Home / Companies / LogRocket / Blog / Post Details
Content Deep Dive

CSS font-size-adjust : How to auto-adjust your font size

Blog post from LogRocket

Post Details
Company
Date Published
Author
Tomi Adekanye
Word Count
1,170
Language
-
Hacker News Points
-
Summary

The article explores the CSS font-size-adjust attribute, which helps developers auto-adjust font sizes based on the x-height of lowercase letters, rather than uppercase letters, to maintain readability and aesthetic consistency when switching between font families. It highlights how this attribute can prevent layout shifts when fallback fonts are used but notes that browser compatibility is limited—only Firefox supports it by default, while Chrome and Opera require enabling experimental features. The article contrasts font-size-adjust with the broader CSS font-size property, which sets overall font size and can be affected by the parent element's size when using relative units like em or percentages. It advises developers to use compatible typefaces to avoid discrepancies in unsupported browsers and suggests methods to ensure consistent font rendering, even when the font-size-adjust property isn't supported.