Ensuring the correct vertical position of large text
In some cases, browsers display large text at different vertical positions across operating systems.
Pics or it didn't happen
Here are screenshots of an example:
In Chrome on MacOS:
In Chrome on Windows:
Very different vertical positioning of large text across operating systems.
A Solution
In CSS Fonts Module Level 4 there's a great solution for that issue:
Default font metrics overriding:
the ascent-override,
descent-override and
line-gap-override descriptors
.
An example
A page for testing the vertical position of large text across operating systems.
Here's the @font-face block with the three override properties:
@font-face {
font-family: Hetilica;
src: url(Hetilica.woff) format("woff");
font-weight: normal;
font-style: normal;
ascent-override: 75%;
descent-override: 25%;
line-gap-override: 0%;
}
(The override values are specific to that font. They need to get figured out for each font.)
Here are screenshots of the above example-page with the new CSS:
In Chrome on MacOS:
In Chrome on Windows:
Consistent vertical positioning of large text across operating systems. Yay!
Another use case
The spec lists another use case in Default font metrics overriding:
"We may override the metrics of a local fallback font to match the primary font, which is a web font. This reduces layout shifting when switching from fallback to the primary font."
Browser support
- Chrome supports it (tested on MacOS vs Windows).
- Here's the Firefox implementation ticket.
- Here's the Safari implementation ticket.
- Also check caniuse.com: GitHub ticket, search for ascent-override, search for descent-override, search for line-gap-override.
If you enjoyed this post, follow me
on Twitter