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?

Improve this question

5 Answers 5

Reset to default
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.

Improve this answer
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.

Improve this answer
6
  • PPI is mostly irrelevant here.
    – DA01
    Mar 25, 2015 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, 2015 at 3:04
  • Also, font sizes are typically calculated against the document in apps like Photoshop.
    – DA01
    Mar 25, 2015 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, 2015 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, 2015 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.

Improve this answer
4
  • 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, 2015 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, 2015 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, 2015 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, 2015 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.

Improve this answer
1
  • 1 CSS px = 1 iOS point = 1 Photoshop point (if the document DPI is set up correctly).
    – Marc Edwards
    May 3, 2015 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.

Improve this answer
1
  • 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, 2015 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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