Font size on iOS7 looks different from Photoshop even with same resolution
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.
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
- For a 2Ã— document (Retina), use
- For a 3Ã— document (Retina HD), use
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:
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.
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.