Improve legibility and reduce layout shifts with x-height adjustments

This site is primarily supported by ads. Articles like this one wouldn’t exist without them. Please disable your ad blocker or become a patron to support the blog.

There’s more to setting the text size on your webpages than just the CSS font-size property. It only controls the size of majuscule (“uppercase”, e.g. “A”) letters, numbers, and punctuation. The size of minuscule (“lowercase”, e.g. “a”) letters is left up to the font. A font’s minuscule size metric is referred to as x-height; the height of an “x” letter. However, you can control the size of the two independently — and here’s why you might want to do that.

The font-size-adjust property compliments the font-size property by letting you override the font’s x-height. Its value is a multiplier applied to latter to the font-size. For example, the CSS snippet font-size: 16px; font-size-adjust: 0.5; sets the x-height to 8 px.

Unfortunately, font-size-adjust is only supported in Firefox. It has been supported by this browser for over a decade already. It was implemented in Chrome for almost half a decade, but it has been left to rot behind the Experimental Web Platform features flag. It’s not implemented in Safari.

Leave a Comment