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

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.