1

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!

  • 2
    Hi Lora, welcome to GDSE! It would help if you added some clarifications—you say you are designing an app, but talk about CSS—is this a web app? Or a mobile app built on a HTML+CSS framework? The obvious solution is to talk to the developers and see what they need because the answer will completely depend on the implementation. Adding as much detail as possible will give you more chance of getting a relevant answer though. – Cai Mar 23 '16 at 13:39
2

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.

2

I think it's worth noting the HTML meta viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Which allows developers to more easily program responsive websites and web apps on high res devices.

What @Rafael said:

A retina device declares one thing and does another

is exactly right... i.e. CSS pixels are not always equal to the actual rendered pixels. I would take a look at this article and the "A Pixel is Not a Pixel" section of the meta viewport article.

As @Rafael also mentioned, fonts are vector files so they will look good (for the most part) no matter how they are rendered.

As for the images, websites can be programmed to swap out an image for a higher quality version (2x or 3x) if a retina device is detected. This is why you would provide multiple to the developer. You can also, depending on what's in your image, save it as an SVG, Scalable Vector Graphic, which will make the developer's job a bit easier as he or she can just use one image file.

This might be too much detail for you, but I figured I'd add it for those who are interested in more details. Even as a designer I think it's good to know, at least at a high level, what's going on in the browser.

0

Don't worry about the fonts as this will just automatically happen depending upon the device. Be sure to supply a mock up and at 100%.

Images best to plan that they all can be doubled / tripled evenly. 10, 20, 30 etc. artwork at 100% as above then export as needed if using an app like Sketch.

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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