CSS Font Property 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.
π€ 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.
Settings
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
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.