Death to px, long live ch!

Pixels are a lie. Even if you think you're drawing something with "pixel perfect" accuracy, your monitor is lying to you. There is no grid of platonically perfect squares. In CSS, pixels are a double lie: Note that 1px doesn't necessarily equal one physical device pixel. On HD displays, it may span multiple physical pixels. Similarly, 1cm in CSS often doesn't correspond to one hundredth of SI meter. On a large TV screen, it typically is longer than that. The lengths are perceptual: 16px looks roughly the same on a phone, laptop, or TV screen at typical viewing distance. This blog is primarily text based. I want the width of the text to be readable for the average human. So, rather than setting the main width to be a percentage of the screen, I set it based on character width using the ch unit - which isn't exactly a character but good enough for my purposes: --width-content: min(75ch, 100%); main { max-width: var(--width-content); } When it comes to padding and margins, the same is…