CSS Units

I figured I’d take another stab at educating people about CSS units.

In the responses both on this blog (and on Slashdot), some people argued with the high DPI proposal saying “A pixel is just a pixel! Making a CSS pixel != screen pixel is a bad idea!” Those of you who think this way have a fundamental misunderstanding regarding how the Web works even today. It is already true that a CSS pixel does not necessarily equal a device pixel, and there’s nothing wrong with doing this. It doesn’t mess up your Web site. You don’t even have to think about it if you don’t want to.

For example, whenever you zoom in a browser that supports it (like Opera), a CSS pixel won’t equal a screen pixel. Nor should it, since otherwise the zooming wouldn’t be possible. The zooming, done well, doesn’t hurt your Web site or disrupt its layout in any way, since everything zooms together. The high DPI proposal I outlined earlier is about defining how a Web site can intelligently reveal higher levels of detail when zoomed rather than just scaling up the exact same content.

Another example of where high DPI already comes into play is with printers. Printers can have very high DPI, and if you made a CSS pixel = a device pixel, your Web site when printed would be so tiny that you wouldn’t even be able to read it. Pixel scaling is already done at the printing level.

In addition to being muddled about the px unit, some people were confused about the so-called absolute units. These include units like pt or cm. These units actually aren’t absolute. The absolute unit is a myth.

The sad truth is that designers never really understood the difference between pt and px. Many Web sites even today mix those units in the same Web page. Not only do they assume that pt and px are close to one another in size, they actually mingle these units assuming that the ratio between these two units will be constant across all browsers and devices. Any browser that truly attempted to treat pt as 1/72nd of a physical inch would just end up mis-rendering Web sites.

This is why browsers use the 96 dpi rule when deciding how all of the absolute units relate to the CSS pixel. When evaluating the size of absolute units like pt browsers simply assume that the device is running at 96 CSS pixels per inch. This means that a pt ends up being 1.33 CSS pixels, since 96/72 = 1.33. You can’t actually use the physical DPI of the device because it could make the Web site look horribly wrong.

The other units worth discussing are em and ex. These units are interesting to use primarily because of the text zoom feature of Web browsers. Because some browsers (like Safari and Firefox) just zoom text without zooming other content, expressing everything in these units can give you a way of having content other than text also scale with the font size.