Retina to actual pixels

Im currently designing an app and exporting images for the developers. I am struggling to know that if i create an icon that on my retina screen shows at say 40px X 100px, when i export, should i create the graphic again but with 20 x 50px instead so they are “real” css pixels?

Same goes for fonts. I have one at 40pt on retina, but should i make them 20pt?

Thanks for the help!


In general terms. A retina device declares one thing and does another.

With the data you are providing, (if you are working in vectors) start with the “real css values”, 20x50px. Then provide two more images, a 2x and a 3x. 40x100px and 60x150px.

Regarding the fonts they are in vectors, make some tests in CSS itself, because if you are simulating them in a Photoshop file, the pixel size depends totally on the resolution declared on your working file.

I personally do not use pt. In the printed version, the pts become real units, absolute units, not relative to the device.

Source : Link , Question Author : Lora , Answer Author : Greg Venech

Leave a Comment