Advertisement


Font size on iOS7 looks different from Photoshop even with same resolution


Question

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?

2016/03/12
1
3
3/12/2016 1:29:00 AM

Accepted Answer

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.

2015/05/03
3
5/3/2015 10:46:00 AM