Using `ch` and `ex` CSS Units for Text-Based Layouts Instead of Pixels

The Inaccuracy of Pixels in CSS

In CSS, the `px` unit does not consistently represent a single physical device pixel. On high-density displays, one CSS pixel can span multiple physical pixels. Similarly, other absolute units like `cm` often do not correspond to their real-world physical measurements on screens. CSS units are designed to be perceptual, meaning `16px` should appear roughly the same size across various devices at typical viewing distances.

Adopting `ch` for Widths

For text-centric layouts, basing element widths on character size can enhance readability. The `ch` unit in CSS measures the advance measure of the '0' (zero) character of the font. This allows for setting content widths that are proportional to the text itself, ensuring a consistent reading experience regardless of screen size or device. An example implementation sets a main content width to `min(75ch, 100%)`.

Utilizing `ex` for Heights and Spacing

While `ch` is suitable for horizontal measurements, the `ex` unit can be used for vertical spacing. The `ex` unit represents the x-height of the current font, typically the height of a lowercase 'x'. This allows for padding and margins to be set in proportion to the text's vertical dimensions, maintaining visual harmony within text-heavy elements.

Contextual Unit Selection

The choice of CSS unit depends on the specific design goal. While `px` remains a valid and widely used unit, `ch` and `ex` offer advantages for creating layouts that adapt more gracefully to different viewing environments, especially for content primarily composed of text. The developer notes this is an experimental approach, not a universal replacement for `px`.