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

61–70 of 126 posts

Re: How to avoid layout shifts caused by web fonts

#61

Post by michaelcampbell »

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,…

> superfluous or not a good idea any more, causing more harm than they solve.

Can you expand on why?

Re: How to avoid layout shifts caused by web fonts

#62

Post by TacticalCoder »

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,…

> 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).

Re: How to avoid layout shifts caused by web fonts

#63

Post by TacticalCoder »

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 "…

The typical font stacks IMO always forget to put "Liberation". For many Linux desktop users it's going to be the best available when Oxygen/Cantarell/Ubuntu aren't there. Many Debian users, for example, are going to have Liberation and not the others. It's sad that a fugly default is often going to be picked up for these users instead of Liberation.

So: modern font stacks... Not bad, but not yet the panacea either (even for big websites who really should know better).

Re: How to avoid layout shifts caused by web fonts

#64

Post by amelius »

lelandfe wrote: post #34
mattbee wrote: post #23

He forgot one: inline the font data (evil cackle). This made sense for me in conjunction with subsetting for a stopwatch app that only needs 10 digits and a colon. I submit it's not so bad if you inline it with the rest of your styling, at least that's cacheable separate from the content.

I’ve been meaning to build a PoC where you subset to the glyphs shown above the fold, inline, and then download the full font face at a low priority.

You could inline a dummy font containing only the font metrics. Then replace it by the real font after the initial render.

Re: How to avoid layout shifts caused by web fonts

#65

Post by MrPatan »

thingsgoup wrote: post #6
mrweasel wrote: post #4

Earlier quoted context omitted.

I’m sure there’s a few exception, but why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly? The answer is most likely branding, but I don’t recall landing on a company website and going: “That’s not the font from their design guidelines. This is unacceptable, I shall take my business elsewhere” All this tweaking and hacking font loading is a vaste of time.

I gather from your comment that you don’t do frontend. I don’t either. I also think it’s a waste of time. But I think you and I are not the intended audience. I think frontend people are trying to design an experience for users. The same way you or I might be designing an architecture for the system. They want it to look and feel a certain way in order to provoke a response.

I do front end. It's a waste of time. Pick a common one you like and move on.

Re: How to avoid layout shifts caused by web fonts

#66

Post by Macha »

tacone wrote: post #57

If OS makers reached some kind of agreement to incorporate the most used 20 web fonts in their OS, 99% of this madness would be gone.

This was pretty much done with the original web safe fonts, but fonts have an element of fashion to it and moved on and pretty much all of them are seen as dated by the people who do specifically pick fonts.

Re: How to avoid layout shifts caused by web fonts

#67

Post by ljm »

thrdbndndn wrote: post #52
jezzamon wrote: post #46

Earlier quoted context omitted.

There is something incomplete feeling about just the default styling. If you're going for a brutalist design mentality then sure, go for it, but sometimes the appearance actually does matter

I'm not against using font style; I'm against (or more like, failed to see the point) to manually craft a complex " system font stack" to achieve.. basically the same thing as sans-serif but worse.

If you're building a web app (say, via electron) as opposed to a site or document, using the system font stack will make that app fit into the desktop environment much better than Arial, Times New Roman and Courier New will.

Re: How to avoid layout shifts caused by web fonts

#68

Post by pville »

michaelcampbell wrote: post #61
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,…

> 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.

Re: How to avoid layout shifts caused by web fonts

#69

Post by TacticalCoder »

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…

> Why reinvent the wheel when you can just use this and it would use browser's default sans-serif font setting?

I've done lots of testing and very often a font stack gives better looking results than simply using the default. People who came up with these font stacks didn't do a bad job at all. I'd say it's especially noticeable on Linux (but not only): the default may really be freaking ugly compared to one of the previous font in the stack.

> Which users can define to whatever they want, system font or not.

But most users really don't bother do that. Heck, out of simplicity I don't even do it: the reason being I like to see how others are using fonts on their sites and I don't want to always turn my font overrides/default on/off. I want to know if the sites looks good "without any user intervention".

One problem with font stacks though is those who picked one then forget to update them when new, much better, fonts installed by default comes out. For example a shitload of websites on the latest OS X / M1 macs are going to fall on Helvetica first (because they use outdated font stacks) and use that even though the world as really moved on and came up with incredibly better looking screen fonts than Helvetica (I'm not saying Helvetica doesn't still have its place in print).

Re: How to avoid layout shifts caused by web fonts

#70

Post by dmitryminkovsky »

hawski wrote: post #59

How to avoid layout shifts caused by CSS loading. How to avoid layout shifts caused by images. How to avoid layout shifts caused by ads. How to avoid layout shifts caused by DOM changes. It is funny how as many things moved to web we still have those basic issues, that would be considered show stopper errors in a desktop app. Sometimes I would like for the browser to keep the state from 0.2 second ago when I decided…

> How to avoid layout shifts caused by images.

And it’s funny how the state of the art way to address these issues is usually some absurd hack. Like in the case of images, setting the height to 0 and using padding to achieve a stable height: https://nikitahl.com/css-aspect-ratio.

Post reply on HN