: 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

@Jessie844

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.

Vote Up Vote Down

@Pierce403

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:



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.

Vote Up Vote Down

@Deb5748823

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: 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: 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.

Vote Up Vote Down

@Holmes874

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.

Vote Up Vote Down

@Sue6373160

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.

Vote Up Vote Down