Pixel density, retina display and font-size in CSS

Question

I don\'t have a Retina MacBook myself to test these things out, and there seems to be a lot of confusion on the internet about web design on high pixel density displays.

Answer 1

OK, this is a pretty serious misunderstanding (which is cool! :) ), so here's a brief explanation of what you might want to do.

Firstly, any recent iPhone/iPod/iPad or many Android phones have Hi DPI screens, so you might already have something to test with. If not, and you are doing this professionally, just buy a 4G iPod Touch.

In terms of how it works, for 99% of stuff, you need do nothing. If it worked how you suggested, then most websites would be a quarter of the size they should be, and the internet would be broken.

For fonts, SVG, CSS box shadows, gradients and any other CSS drawn stuff, it's all good. Those things look awesome without any extra work. (Hence why we've been pushing towards everything in CSS for a while.)

For bitmaps (i.e. pngs, jpgs, gifs), all you need to do is provide the image with 2x the resolution, but size it the same as normal.

As an example, if your page had an image that was 100px by 100px, you'd provide an image that was 200px by 200px, but specify in CSS or as an attribute in HTML that it is 100px by 100px.

The reason this works is that a pixel on the screen is not the same as a CSS pixel. This is a good thing, because otherwise as I say, things would be tiny.

I guess that in hindsight, it might have been better to call the px unit in CSS something different, like a dot or something, but there you go.

You'll sometimes see references to device independent pixels, which is the difference between the CSS px, and the real pixel on the screen.

Answer 2

The Retina display doesn't double the size of the element. It only effects images on the web.

For each "web pixel" in an image it requires 4 (I think) "screen pixels" so images are stretched to fill these extra pixel spaces, making them look less crisp on a retina display. Images should be exported at a higher DPI and served to Retina displays via media queries or Javascript.

Text, CSS effects, Canvas, SVG Vectors etc are not directly effected by the retina display.