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.