How does font size translate on a Retina Display in Photoshop?

Question

I was wondering, now that I am designing on a retina display in photophop, I've doubled my screen resolution from 72 to 144. I've been keeping my document pixel size the same. For example, for ipad (landscape), I've set my canvas to 1024x768 pixels.

I am also working at zoomed in at 200%.

I am very confused with regard to font sizes. They seem double the size, so 20 pixel fonts looks small. I've read that moving to points instead of pixels will resolve this problem and will translate the best. What do you recommend?

Am I setting up my photoshop document correctly to accommodate this new retina world we live in?

I found this article that seemed insightful but wanted to get group consensus: http://louis-andre.net/retina-photoshop/

Answer 1

I'm sorry for answering super late, I've just noticed your mention. I'm the author of the article you link to. There is definitely more than one "professional" way of handling several resolutions, and things have become a bit more mature since I wrote about it.

If you've bumped your resolution to 144ppi, you can fix the zoom and size issues by doubling your document's pixel dimensions, and switching over to points as your unit of measurement. Especially if you have some experience in print design, this will make a lot of sense.

The one I suggest in my article aims for two things: Pixel-precise preview (this helps you), and accurate measurements (this helps developers).

There are other concerns down the line – mainly assets generation. For this, I defer to fellow designer Marc Bjango, who's written a great article with good focus on production: Designing for the Retina display.

Answer 2

Retina screens use virtual pixels. For web work, the device translates standard dimensions for you and does the doubling behind the scenes.

So a 12px font on a non-retina screen is the same size as on a retina screen. It's just that the retina screen is using 4x the pixels to render it.

I find the easiest way to handle this when sketching mockups is to not use Photoshop, but instead vector software such as Illustrator.

But if you want to use Photoshop, there's a number of ways to handle it. One way would be to choose the highest retina density you want to support and than do the math to accommodate.

So, if you're designing for a 3x retina screen, set up your Photoshop file to the size in actual pixels of the screen, then view it at 33% zoom. When setting type or any other element on the screen, remember you need to multiple by 3. So if you want to use 12pt type, in Photoshop, you set it to 36pt. But remember, when it comes time to code the UI, the UI will still use 12pt type.