A px is not a pixel, long live the px!
Tags: css, webdev, beginners, html
Published: 2023-11-27 16:32:06

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)](https://drafts.csswg.org/css-values/#absolute-lengths).

Furthermore, the CSS specification defines a pixel to be [exactly 1/96th of a CSS inch](https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel), 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!