CSS Font Appearance Adjuster
With this tool, you can adjust various CSS font properties such as font-size-adjust and
font-variant settings to observe how appearance difference can be minimized between two
fonts.
The properties in here are clearly different from what @font-face's descriptors do. @font-face's descriptors are for adjusting font metrics itself. It's like the default setting of the specific font. However, the properties are element-level appearance overrides. Properties are not default setting. It's for tuning.
π€ DECLAIMER: This tool is specifically focusing on experimenting how to adjust and minimize the appearance difference between different two fonts. The point of this tool is NOT how to optimize / pretty the whole paragraph or text inside an element. Therefore, those (`text-wrap` or `word-wrap` etc.) properties are not considered in this scope.
π€ DECLAIMER: The changes you make with the adjusters will be debounced for 50ms for the performance reasons.
CSS Properties for Elements
font-size-adjust
The font-size-adjust property helps maintain consistent text readability across different
fonts.
Even if you use size-adjust in @font-face of fallback fonts, fallback font might have a
significantly
different
aspect value (height of lowercase letters divided by font size) from your primary font.
(eg.
Verdana
has relatively large lower case letters vs. Times New Roman has small lower case letters!)
This
undesired aspect value difference happens especially at small font sizes. Adjusting the aspect
value across fonts with font-size-adjust, the text appears similar regardless of
the font used.
The from-font value automatically uses metric values from the primary font. For more
details,
see:
CSS Fonts Module Level 5
Spacing Properties
Text Box Trimming: text-box-trim and text-box-edge
A line of text is taller than its visible glyphs. The font's own metrics leave space above the capital
letters (ascent minus cap-height) and below the baseline (descent), and line-height adds
half-leading above and below that content area. Both amounts differ from font to font, so two fonts
at the same font-size rarely sit at the same vertical position, and text "centered" with
equal padding still looks slightly low: the eye reads the block from cap-height to baseline, not from
ascent to descent.
text-box-trim cuts that space off the start (over) and/or end (under) edge of the text's
block container, so that the block's edge lands exactly on a glyph metric instead of on the line box:
the box hugs the visible letters, and padding or alignment measured from that edge no longer depends
on the font. text-box-edge picks the metric: cap (cap-height),
ex (x-height), or text (the font's own ascent) for the over edge, and
alphabetic (baseline) or text (the font's own descent) for the under edge.
In the preview, the border of each layer snaps to the chosen guide line and the hatched half-leading
disappears on the trimmed edge.
π€ Trimming is applied to both text layers here, because it only lines fonts up when
every font is trimmed to the same edge. With trim-both cap alphabetic each box runs
exactly from its cap line to its baseline, so the two fonts share the same top edge whatever their
ascent is; add font-size-adjust: cap-height (or ex alphabetic with
ex-height) and their cap heights match too, so the baselines coincide as well.
For more details, see: CSS text-box-trim
| Blog | Chrome for Developers,
CSS Inline Layout Module Level 3
π€ Under discussion in the CSSWG ([css-inline-3]
Does text-box-trim remove negative leading? #14328, Aug 2026): when
line-height is smaller than ascent + descent the leading is negative (the red band in the
preview), and the spec does not say whether trimming removes it too, which would make the box taller.
Chrome and Firefox trim it, Safari does not; the proposed resolution (PR #14331) is to trim it.
Font Features: font-variant and font-feature-settings
Control OpenType features in the font. proportional-width for
font-variant-east-asian or palt for
font-feature-settings are for controlling proportional metrics. When it's used, OpenType's
font
spacing
information is referred to instead of referring to equal amplitude. This feature is available
for specific font families.