Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to avoid layout shifts caused by web fonts

simonhearne.com

Post reply on HN
Print view View original

111–120 of 126 posts

Re: How to avoid layout shifts caused by web fonts

#111

Post by Spivak »

maccard wrote: post #108
capableweb wrote: post #51

Earlier quoted context omitted.

Sometimes you care a lot about the design of the website and that everything looks 100% OK in all browsers and screen-sizes. For example, think web agency landing pages, where you're supposed to sell your service to potential customers. In those cases, using whatever font is usually not good enough, because many of them have different sizes (both length-wise, height-wise and line-height-wise), so if a user gets a dif…

If you care that much you need to bundle the font with your site.

Which is what web fonts are. But you still have to handle the case and do something reasonable if the user or user-agent doesn’t load web fonts.

Re: How to avoid layout shifts caused by web fonts

#112

Post by OJFord »

chrismorgan wrote: post #58
divbzero wrote: post #18

The suggestion I like the most is 3.4) Use system fonts : body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } Stack Overflow took this approach last year with the following font stack: [1] @ff-sans: system-ui, -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS "Segoe UI", // Windows "…

-apple-system and BlinkMacSystemFont are now both obsolete and covered by system-ui. Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more, causing more harm than they solve. For sans-serif, I recommend at most three items: a web font, system-ui, and sans-serif. No more. I would note that system-ui is not necessarily sans-serif, but in practice it almost always is,…

What's the benefit of putting `system-ui` in front of `sans-serif` that outweighs the down-side that it might not be sans serif?

Also, even with `ui-sans-serif` (i.e. if it's guaranteed that it is/someone's doing something deliberate if it isn't) why's that what you want for the sans serif text on your web page, that isn't 'system UI'?

Re: How to avoid layout shifts caused by web fonts

#113

Post by divbzero »

thrdbndndn wrote: post #36
divbzero wrote: post #18

The suggestion I like the most is 3.4) Use system fonts : body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } Stack Overflow took this approach last year with the following font stack: [1] @ff-sans: system-ui, -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS "Segoe UI", // Windows "…

>Stack Overflow took this approach last year Just to note, what you posted below isn't their final version, and for good reasons. Anyone that is interested about this please check the original post with update 1,2, and 3. On the other hand, I still failed to see the the advantage of such complex stack vs font-family: sans-serif; Why reinvent the wheel when you can just use this and it would use browser's default sans…

Thanks for pointing out Stack Overflow’s subsequent updates.

They removed system-ui which, as you pointed out in the other comment, can cause problems for some OS languages:

  @ff-sans:
    -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
    "Segoe UI", // Windows
    "Liberation Sans", // Linux
    sans-serif; // The final fallback for rendering in sans-serif.
  @ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  @ff-mono:
    ui-monospace, // San Francisco Mono on macOS and iOS
    "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
    "Liberation Mono", // Linux
    Menlo, Monaco, Consolas, // A few sensible system font choices
    monospace; // The final fallback for rendering in monospace.
https://github.com/StackExchange/Stacks/pull/642/files

Re: How to avoid layout shifts caused by web fonts

#114

Post by wtallis »

gwn1 wrote: post #72
Gigachad wrote: post #44

Earlier quoted context omitted.

Spoken like a true hacker news user. Absolutely zero understanding outside of their field but still confidently parades their opinion. Turns out that branding and consistency are actually very important.

Having a consistent logo is great and SVG is a good choice for that But for things like the body font on a website, nobody really cares except the company's designers

The worst case of this kind of designer hubris I've seen is Qualcomm's website, which includes a webfont that's completely pedestrian except that it makes every "Q" look like the Q in the company logo — which is actually a pretty poor stylistic fit for the rest of that font.

Re: How to avoid layout shifts caused by web fonts

#115

Post by l0b0 »

iforgotpassword wrote: post #56
s5806533 wrote: post #55

Earlier quoted context omitted.

> Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. Done! Thanks for the reminder!

I switched to using ublock origin to do that, since I can quickly add an exception for a site. Some sites use fonts for icons. Most of them are still usable but just look a bit silly, but sometimes it's annoying to the point that I want to add an exception.

Let's see if I get this right:

(0. Install uBlock Origin)

1. Re-enable web fonts

2. In the main UO settings, check "Block remote fonts"?

3. Refresh a page

4. Click the UO icon, and then "more" until I see an icon titled "Click to no longer block remote fonts on this site"

5. Click

6. Refresh the page

Repeat 4-6 for relevant sites.

Any caveats?

Re: How to avoid layout shifts caused by web fonts

#116

Post by nicbou »

KronisLV wrote: post #21

> Downloading one or two font files to render text won’t have a massive impact on speed, downloading five or ten font files will! I wonder why we almost never talk about the actual filesizes of different fonts and which ones take less space, for when the total size of our webpages is important and we'd like to make our font choices with that in mind, provided that we don't want to just use the system fonts for whatev…

Fonts on my website add up to around 40kb. It barely makes a difference.

Re: How to avoid layout shifts caused by web fonts

#117

Post by chrismorgan »

thrdbndndn wrote: post #83
chrismorgan wrote: post #58

Earlier quoted context omitted.

-apple-system and BlinkMacSystemFont are now both obsolete and covered by system-ui. Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more, causing more harm than they solve. For sans-serif, I recommend at most three items: a web font, system-ui, and sans-serif. No more. I would note that system-ui is not necessarily sans-serif, but in practice it almost always is,…

> I would note that system-ui is not necessarily sans-serif And that's exactly where it causes problem [1]. https://infinnie.github.io/blog/2017/systemui.html

Interesting, I hadn’t come across that particular issue, though it seems obvious now (I know about those ugly old fullwidth fonts). And I’m guessing that quite incidentally -apple-system and BlinkMacSystemFont are unlikely to be affected. I’ll need to reconsider my recommendation—though I will note that I’ve not generally used system-ui anyway, just considered it acceptable. I wonder if it’s time to lobby browsers to update their default sans-serif fonts, as they have updated their monospaces over the last few years (except for Firefox on Windows). The whole ui-sans-serif/ui-serif/ui-monospace thing is a bit of a crock. (And I wonder if I stand any chance of getting the 13px monospace default size killed. That thing is such an utterly obsolete nuisance—though of course removing it from monospace doesn’t remove the concept, which is used in fonts of various languages.)

Re: How to avoid layout shifts caused by web fonts

#118

Post by chrismorgan »

TacticalCoder wrote: post #62
chrismorgan wrote: post #58

Earlier quoted context omitted.

-apple-system and BlinkMacSystemFont are now both obsolete and covered by system-ui. Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more, causing more harm than they solve. For sans-serif, I recommend at most three items: a web font, system-ui, and sans-serif. No more. I would note that system-ui is not necessarily sans-serif, but in practice it almost always is,…

> Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more It's all fallback, how can they be "not a good idea"? That's the beauty of these CSS font stacks: you can always put first the latest best practices. > Most font stacks now are just cargo culting, and are mostly mildly harmful. I disagree and if anything they're not complete enough (I'll write another comment)…

It’s not all fallback: it’s getting in the way of the actual fallback monospace/sans-serif/serif. The cargo-culting nature of this means that there tend to be one or two bad fonts in there, and sometimes some systems will have bad fonts aliased to otherwise good names (e.g. that’s why I say “don’t write Courier”, because although it’s fine on macOS and probably aliased to something reasonable on Linux platforms, Windows aliases Courier to Courier New, which is a terrible font).

I don’t want your idea of a suitable font, in general, because the default defaults (that is, the browser’s default value for sans-serif) are thoroughly good enough, and I changed my defaults, and by writing the likes of `…, Arial, Helvetica, sans-serif`, you didn’t change anything for most people, but prevented me from getting my chosen default sans-serif.

Long font stacks are fighting a fundamentally unwinnable battle with small potential benefits, high uncertainty, and definite costs (normally mild) to people that actually expressed preferences to their user agent.

Re: How to avoid layout shifts caused by web fonts

#119

Post by chrismorgan »

pville wrote: post #68
michaelcampbell wrote: post #61

Earlier quoted context omitted.

> superfluous or not a good idea any more, causing more harm than they solve. Can you expand on why?

Firefox has left me scratching my head a few times, I think they limit the amount of fallback fonts to resist fingerprinting. Long lists like these will get cut short. Text you intended to be monospace might not be rendered as such as the "monospace" at the very end was never reached.

I haven’t ever encountered that, and would expect the limit to be rather long (certainly no less than 32 elements, probably far longer) if there is such a limit. What there is is whitelisting, only exposing certain fonts in order to reduce font list fingerprinting: https://bugzilla.mozilla.org/show_bug.cgi?id=1121643.

Re: How to avoid layout shifts caused by web fonts

#120

Post by capableweb »

maccard wrote: post #108
capableweb wrote: post #51

Earlier quoted context omitted.

Sometimes you care a lot about the design of the website and that everything looks 100% OK in all browsers and screen-sizes. For example, think web agency landing pages, where you're supposed to sell your service to potential customers. In those cases, using whatever font is usually not good enough, because many of them have different sizes (both length-wise, height-wise and line-height-wise), so if a user gets a dif…

If you care that much you need to bundle the font with your site.

Yeah, I mean... Yeah. How is that an argument for just using `body {font-family: sans-serif}`?
Post reply on HN