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).
Edge supports it (tested on Windows in Edge 86 vs Edge 87).
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