Blog post argues for sizing text-heavy CSS layouts in ch instead of px

A blog post titled "Death to px, long live ch," published on shkspr.mobi on 23 August and surfaced on Hacker News's front page, makes the case that developers of text-heavy websites should measure their layouts in characters rather than pixels — using the CSS ch unit for widths and ex for vertical spacing.

Pixels are not what they seem

The post opens with a provocation: the pixel is not the exact, physical quantity many developers assume it is. On high-density displays a single CSS pixel can span several hardware pixels, and a CSS centimetre rendered on a large television is typically longer than a real centimetre. According to the author, CSS lengths are best understood as perceptual rather than absolute — a 16px font appears roughly the same size on a phone, a laptop and a TV screen because each device is viewed at its typical distance.

That framing sets up the argument that follows. If pixels already encode assumptions about human perception, the author reasons, it is equally legitimate to choose units that encode a different, more content-focused assumption instead.

Sizing a reading column in characters

Because the site consists mainly of text, the stated goal is a comfortable line length for the average reader rather than a fixed share of the screen. The main content column is therefore sized with:

--width-content: min(75ch, 100%);

main { max-width: var(--width-content); }

The ch unit tracks the width of the type itself; the author concedes it is not a perfect stand-in for "one character" but treats it as close enough for layout purposes. A column capped at 75ch keeps the line length stable when the font family, font size or user preferences change, and the min() expression lets the column shrink to the viewport on narrow screens.

The same logic applied to spacing

The idea extends to padding and margins. A gap around an element, the author argues, should relate to the text the element contains, so horizontal spacing also uses ch. For vertical distances, where character width is a poor reference point, they suggest ex, a unit corresponding to the height of a typical lowercase letter.

An experiment, not a doctrine

The post is notably restrained about its own advice. The author has not converted every pixel value in the stylesheet, describing the exercise as an experiment comparable to an earlier project of theirs that removed CSS classes from their HTML. They also state plainly that there is nothing wrong or unusual about using px or any other unit; ch and ex simply suit their preferences for a text-first site.

Why it matters

The post captures a genuine tension in responsive design: viewport- and pixel-based layouts anchor the page to the screen, while character-based units anchor it to the content. For reading-heavy interfaces that difference has practical consequences. Line length is a readability variable, and a ch-measured column holds it steady as fonts and user font-size settings vary, which tends to behave better with browser zoom and accessibility preferences than columns sized purely in pixels or percentages.

The counterpoint sits inside the post itself. If px is already a perceptual unit, as the author argues, then pixel-based layouts are not broken — they are just anchored to a different reference. Teams that rely on consistent spacing systems, precise handoff from design tools, or predictable component sizing may find that mixing ch, ex and px adds friction without clear payoff. The actionable takeaway for most developers is narrower than the title suggests: measure reading columns and content-proportional gaps in characters, and leave the rest of the stylesheet alone.