One of the lessons you need to have conquered, before becoming the ultimate CSS maestro, is embracing the fact that a css px is not the same as a screen resolution pixel. In CSS a px is a unit of measurement that is supposed to represent "one dot on the screen". Though, it is not always that 1px is made up of a single screen pixel. Actually, in these "high resolution" days, seeing a CSS pixel actually align with screen pixels are quite rare. How can this be?
One of the problems, is that screen resolution keeps getting larger, and if we insisted on letting 1px equal a screen pixel, web pages would become unreadable and ridiculously small on high resolution monitors.
One CSS pixel is defined as the visual angle of one pixel on a device with a pixel density of 96 DPI (dots per inch) and a distance from the reader of an arm's length. Therefore we can also call a CSS pixel for "the visual angle unit". This definition is designed to make web content appear at a similar size across different devices.
"The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc, Q) and the visual angle unit (pixel unit) (px)." - CSS Values and Units Module Level 4 (w3C).
Furthermore, the CSS specification defines a pixel to be exactly 1/96th of a CSS inch, while 1cm is defined as 96px/2.54 ( since one inch is 2.54 centimeters).
What can we learn from this? CSS pixel as the canonical unit!
All this means that, when it comes to all CSS units of absolute length (cm, mm, Q, in, pc, pt and px), they are all reduced to a px value. This means that you really don't need any other absolute length units than px!
It can sure be helpful to know that an inch is always 96 CSS pixels, or that a centimeter is always around 37.8 CSS pixels, as a guide to how many pixels you need. But in the end, in the style sheet, you are probably better off just specifying all absolute sizes in pixels.
What about relative length units?
Many of the relative length units are also anchored to pixels, but you have to do the anchoring yourself. For instance, 1em is the same as the font-size in the element. So if the font-size is set to 14px for an element, then 1em is identical to 14px. 1rem is the same as the font-size in the root-element.
This means that, in the end, if you specify all sizes with px instead of these relative units, the screen will look identical. The upside of having used these relative units, comes when you change the font-size, and witness everything else adjust its sizes accordingly.
I would argue, none-the-less, that in most cases setting the sizes with the px unit is enough here as well, either way. If you maintain an application that rarely change design/font-sizes, it is rare that you need this automatic adjustment, and if you use px as unit you have more control over the actual final sizes in your style.
From an Universal Design perspective, you think you might need these relative units after all. So that the user might change their default font size in their browser settings. From empirical experience, it looks like most people who need a larger text either use browser/OS zoom, or reduce the screen resolution on their devices.
So I'd say, go px all the way!
Top comments (0)