TECH Signal 507
Using ch and ex units instead of px creates proportional CSS text layouts
Illustration only Photo by Kimon Maritz on Unsplash
A developer proposes replacing CSS pixel units with ch and ex units to ensure layout dimensions remain proportional to the text size rather than relying on perceptual pixel measurements.
CSS pixels are perceptual units that do not map one-to-one with physical device pixels, which can complicate text-heavy layouts. Using ch for horizontal spacing and ex for vertical spacing ties the layout directly to the typography, ensuring readability across different devices.
Written by elseif from the cluster below · every claim links back to a sourceThe three things worth knowing
CSS pixels are perceptual units that do not correspond to physical device pixels.
The ch unit bases horizontal dimensions on character width to keep layouts proportional to text.
The ex unit bases vertical dimensions on the height of a typical lower-case letter.
THE CLUSTER