tobireif.com / posts Twitter

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 need to get figured out for each font. I haven't used it yet, but this suggestion by Simon Hearne might help (on the linked page see the text starting at "Calculating the required values").

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

If you enjoyed this post, follow me on Twitter Twitter