Font layout shfit

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hi Leo,

The site is for internal use so it'll be a real challenge in making it externally accessible. Is there a site you can test with?

Hi there,

the variables affecting font 'size' are many, such as their base width, kerning and x-height. These will vary from one font family to another.

Although they're fonts that have similar anatomies, the issue you will have is selecting a font that matches the fallback font that the browser is using, which will vary from device to device.

So unfortunately there is no simple list.

Aside of using the System Stack fonts, the only way to avoid the shift is by preloading the font. See here for more info:

https://web.dev/preload-optional-fonts/

Thanks David. The fonts are already preloaded and although it reduces the shift, it still occurs on devices that are reliant on slow connections.

Do you have any suggestions on sources that may suggest matching fonts that are closest to system fonts?

I cannot find a resource for the System Stack fonts, which is a pity, as there is this great app that provides them for the main Google Fonts:

https://useratio.com/the-anatomy-of-a-thousand-typefaces/app/

Thanks David. That's a great starting point. Is there a list of similar tools/sites that the GeneratePress team uses?

Hi,

Thanks David. That’s a great starting point. Is there a list of similar tools/sites that the GeneratePress team uses?

My 2 cents:

While I don't exactly use any tool for this, when I need similar fonts for fallback, I usually get a clean screenshot image of a sample of the typeface and then scour font finder sites for any match.

I then make a shortlist of candidate fonts which I measure in Adobe Illustrator. When picking, I measure the length from cap height to the descender of the typeface.

But then again, this is pretty tedious and is coming from a Graphics Designer perspective. But this helps A LOT in sites of companies with very meticulous Branding Guideline.

David's link works great though. It should be good enough of a basis if you only need to address the layout shift.

Thanks for the tip Elvin.

Thanks for the tip Elvin.

No problem. :)

David, Elvin, thanks for the input. We'll close this thread for now.