Death to px, long live ch

Aug 23, 2026 08:56 PM - 3 weeks ago 6

Pixels are a lie. Even if you deliberation you're drafting thing pinch "pixel perfect" accuracy, your show is lying to you. There is nary grid of platonically cleanable squares.

In CSS, pixels are a double lie:

Note that 1px doesn't needfully adjacent 1 beingness instrumentality pixel. On HD displays, it whitethorn span aggregate beingness pixels. Similarly, 1cm successful CSS often doesn't correspond to 1 hundredth of SI meter. On a ample TV screen, it typically is longer than that. The lengths are perceptual: 16px looks astir the aforesaid connected a phone, laptop, aliases TV surface astatine emblematic viewing distance.

This blog is chiefly matter based. I want the width of the matter to beryllium readable for the mean human. So, alternatively than mounting the main width to beryllium a percent of the screen, I group it based connected characteristic width utilizing the ch portion - which isn't precisely a character but bully capable for my purposes:

CSS--width-content: min(75ch, 100%); main { max-width: var(--width-content); }

When it comes to padding and margins, the aforesaid is true. If I want a spread astir an element, I want that spread to beryllium successful proportionality to the matter wrong it.

For widths, it makes consciousness to re-use the ch unit. I want the spread to beryllium successful proportionality to the text.

But for height, possibly it doesn't make consciousness to definitive vertical region connected characteristic width? In which lawsuit the ex portion tin beryllium used. It is the size of a emblematic lower-case letter.

Just for illustration my thought to eliminate CSS classes from my HTML, it's imaginable to spell excessively acold pinch this. I haven't changed every reference from px to ch, I'm conscionable experimenting to spot if it works.

There's thing wrong, immoral, aliases evil astir utilizing px - aliases immoderate different measurement unit. Using ch and ex fresh pinch my peculiar proclivities.

More