- This topic has 10 replies, 4 voices, and was last updated 3 years, 4 months ago by vast.
-
AuthorPosts
-
November 22, 2020 at 11:50 am #1541415vast
Hi there,
Does the GP team have a list of fonts that result in layout shifts?
It seems when using fonts such as Pacifico in the header/site title for example (at any size), the navigation shifts when the font loads.
November 22, 2020 at 8:28 pm #1541733LeoStaffCustomer SupportHi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know 🙂
November 22, 2020 at 8:47 pm #1541750vastHi 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?
November 23, 2020 at 4:26 am #1542110DavidStaffCustomer SupportHi 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:
November 23, 2020 at 9:48 am #1542740vastThanks 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?
November 23, 2020 at 12:19 pm #1542977DavidStaffCustomer SupportI 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/
November 23, 2020 at 12:33 pm #1542999vastThanks David. That’s a great starting point. Is there a list of similar tools/sites that the GeneratePress team uses?
November 23, 2020 at 1:04 pm #1543038ElvinStaffCustomer SupportHi,
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.
November 23, 2020 at 1:42 pm #1543068vastThanks for the tip Elvin.
November 24, 2020 at 11:36 am #1544972ElvinStaffCustomer SupportThanks for the tip Elvin.
No problem. 🙂
November 24, 2020 at 12:19 pm #1545017vastDavid, Elvin, thanks for the input. We’ll close this thread for now.
-
AuthorPosts
- You must be logged in to reply to this topic.