tobireif.com
/
posts
Twitter

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

If you enjoyed this post, follow me
on Twitter
Twitter





Source link

Write A Comment