Connect with us

Article

Ensuring the correct vertical position of large text

Published

on


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

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *