3

I'm facing a weird issue here.

I did a mockup for iPhone 5 + iOS7 in Photoshop, and since Photoshop handles font size in points, I passed all these info with the mockup file to the dev team. (e.g: Header A is 32pt, Body text is 20 pt etc.)

However, it seems that when these font size values are applied in the app and iPhone device, the font size looks enormous!

Is there something I'm missing here? Maybe mobile devices compute font sizes differently? I thought a 32 pt font would look like a 32 pt font anywhere, maybe give or take a few pixels, but not to this kind of huge difference.

Any insight?

3

For points in Photoshop to match points for iOS and OS X native development, you’ll need the document’s DPI to be:

  • For a 1× document (non-Retina), use 72DPI.
  • For a 2× document (Retina), use 144DPI.
  • For a 3× document (Retina HD), use 216DPI.

Document DPI typically doesn’t matter (it’s pixel dimensions that matter), except when talking about points. Points can be used in many places, including text size and stroke size.

Photoshop uses 72DPI as 1:1 pixels to points conversion. With a 144DPI document, the conversion ratio becomes 2:1 for pixels to points. If you’re designing at a Retina density, then that’s precisely what you’ll want.

If you’re designing for an iPhone 6, your document should be set up like this:

enter image description here

That assumes you want to work at the full iPhone 6 Retina resolution. (I usually do a lot of work at the 1×, non-Retina resolution.)

For your text rendering to be as close as possible to iOS’ text rendering, you’ll also want to use the Mac text rendering setting.

enter image description here

And that should be it! Your mockups should be almost identical in size and rendering to iOS, and you can use points in Photoshop, knowing they’re the same as points in iOS.

0

The iPhone 5 specs are 1,136 x 640 and you need make sure your PPI is set to 326. About point size (pt): fonts are vector based and the size is relative to your monitor PPI(72), not the document you're in. If you make your iPhone mock up 72ppi your fonts should look propionate to how they would on the real device.

  • PPI is mostly irrelevant here. – DA01 Mar 25 '15 at 2:59
  • DPI is for print PPI is for screen. So it matters depending on how the mock up was created. – Eddie Adolf Mar 25 '15 at 3:04
  • Also, font sizes are typically calculated against the document in apps like Photoshop. – DA01 Mar 25 '15 at 3:04
  • PPI is a way to describe the pixel density of a screen, but isn't relevant to the PPI setting in Photoshop when creating on-screen graphics. All that matters is the pixel dimensions. – DA01 Mar 25 '15 at 3:06
  • The document DPI does actually matter if you’re using points, because Photoshop uses DPI to convert points to pixels. And it is for this reason that a Retina mockup for an iPhone 5 design should be 144DPI. A non-Retina mockup should be 72DPI. – Marc Edwards May 3 '15 at 10:49
0

First of all, you'll never have your Photoshop files match your actual web site/app. Photoshop is simply going to render type slightly different than a browser will. There's no getting around that issue.

Secondly, are you designing your PSD files at standard pixel dimensions or retina dimensions? If Retina, note that Photoshop won't know that you are doubling the pixels. So if you want 12pt on the actual phone, you'll have to set it at 24pt in Photoshop to emulate the double density (iPhone 6 pro is actually triple density).

In addition, if you are designing at retina, realize that you need to likely be viewing it in Photoshop at 50% to get a 'sense' of the actual size on the phone. And even then, your desktop monitor is likely much lower PPI than your iPhone so it still may actually come across bigger than it actually will be when on the physical iPhone.

Finally, are you using the exact same font in Photoshop as the device is in the app/web? Note that size of the characters across fonts can vary wildly even if the point size is set the same.

Those are all guesses, of course. It would really help if you could show us the actual PSD image vs. what it looks like on the device.

  • Hi DA01, due to NDA contract, I can't upload the PSDs, but I traced over the PSD and iOS screenshot: i.gyazo.com/c9983434ee839b5bd9eff77d7b54f54a.png – Xeon Mar 25 '15 at 5:20
  • As you can see, the sample textsize on the iOS is a lot larger. Original mockup text is 32pt and it becomes something like 60pt (not 64) on iOS. The mockup is done on 72 dpi, 640px by 1136 px. – Xeon Mar 25 '15 at 5:22
  • If you want to see something like 32pt, tell your dev team to use 16pt. You're designing for a 2x device so you need to halve everything. – KJP Mar 25 '15 at 8:13
  • @Xeon it looks like you're designing at retina dimensions but forgetting that you have to halve your type size in the app. If you set your type in Photoshop at 36pt, that's actually 18pt on the device. The device is doing the automatic doubling of pixels, while Photoshop doesn't do that. In otherwords, even though the iPhone has 640 horizontal pixels, it still measures type as if it had 320 pixels. – DA01 Mar 25 '15 at 15:14
0

This is a question that should actually be more on the CSS side of SE, but I'll post the answer regardless.

Fonts on mobile devices are rendered differently than fonts on desktops.

The rendering engines use different metrics to calculate the size of the font. This is so that phones can take outdated content (5 year old web page) and attempt to make it semi-readable to a user on an iPad/iPhone.

So... in order to get the same size fonts, you'll need to use this CSS:

body {
    -webkit-text-size-adjust: 100%;
}

Source: https://stackoverflow.com/questions/6210788/how-to-avoid-ios-automatic-font-size-adjustment

As an additional note, you should try and send your developers sizes in EMs if possible. Define one size of font as your base (16pt = 1EM) and then define all of your other styles off the base.

Here's a very detailed explanation: http://www.hongkiat.com/blog/css-units/

Basically, at the end of the day, your fonts need to be responsive. Putting them as "32px" regardless of the context, is a poor design practice.

  • 1 CSS px = 1 iOS point = 1 Photoshop point (if the document DPI is set up correctly). – Marc Edwards May 3 '15 at 10:45
-1

It works . I had a big issue with the different render process for xCode but when i used 72/144/216 PPI for 1x 2x and 3x it solved the issued.

  • Hello there! Could you please add more detail to your answer? Personally I'm a bit confused as to what it all means. Thanks! – Hanna Sep 21 '15 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.