Death to px, long live ch!

This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).

CSS pixels are not true physical units - they're perceptual measurements that vary across devices. The author argues for using relative units like ch (character width) and ex (lowercase letter height) instead of px for a text-based blog, sizing content width and spacing in proportion to the text itself rather than as a percentage of screen size. The piece shares a personal experiment rather than a strict rule, acknowledging px still has valid uses.

2m read timeFrom shkspr.mobi
Post cover image

Questions this post answers

What is the CSS ch unit and why might it be better than pixels for setting text width?

The ch unit represents a character-based width measurement, roughly equal to the width of the '0' character in the current font, though it isn't an exact character width. It is useful for setting readable text widths because it scales with the font rather than the screen, so a declaration like max-width: min(75ch, 100%) keeps line length readable regardless of device or font size. Developers refining CSS typography can find more layout deep-dives like this on daily.dev.

What is the difference between the CSS ch unit and the ex unit?

The ch unit is based on the width of a character (commonly the '0' glyph), while the ex unit is based on the height of a typical lowercase letter (like 'x'). Ch is suited to horizontal measurements such as content width or padding, while ex can be used for vertical spacing so it scales with the font's letter height rather than an arbitrary pixel value. Anyone choosing between CSS units for responsive spacing can explore comparisons like this on daily.dev.

1.9K Impressions