This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Tobi Reif notes how the position of custom fonts set at very large font sizes can be super different, even in the same browser across operating systems. The solution? Well, you know how there are certain CSS properties that only work within @font-face blocks? They are called “descriptors” and font-display is a popular example. There are more that are less-supported, like ascent-override, descent-override, and line-gap-override. Chrome supports them, and lo-and-behold, they can be used to fix this issue.
I really like the idea that these can be used to override the “metrics” of local (fallback) fonts to match a custom font you will load, so that, when it does, there’s little-to-no-movement. I detest FOUT (I know it’s theoretically good for performance), but I can swallow it if the text swap doesn’t move crap around so much.
Direct Link to Article — Permalink
The post Ensuring the correct vertical position of large text appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-02-25T23:30:32+00:00) Ensuring the correct vertical position of large text. Retrieved from https://www.scien.cx/2021/02/25/ensuring-the-correct-vertical-position-of-large-text/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.