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

51–60 of 126 posts

Re: How to avoid layout shifts caused by web fonts

#51

Post by capableweb »

bruce343434 wrote: post #37
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 "…

Why not just `body {font-family: sans-serif}`? Like, you don't have to explicitly enumerate all sans-serif system fonts ever. The browser will handle it.

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 different font loaded than what you have tested with, it could at best just have a different size (right-side of the text is now 3px away from the side rather than 6px for example) and at worst introduce line-breaks in your buttons that only expects one line of text, making everything look very fugly.

Re: How to avoid layout shifts caused by web fonts

#52

Post by thrdbndndn »

jezzamon wrote: post #46
thrdbndndn wrote: post #36

Earlier quoted context omitted.

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

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.

Re: How to avoid layout shifts caused by web fonts

#53

Post by hexo »

Gigachad wrote: post #44
togaen wrote: post #43

Earlier quoted context omitted.

That’s just another thing your users don’t care about.

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.

Turns out with modern technologies it is never ever consistent, nor nice, fast, ergonomic. Heck, sometimes not even usable at all.

Re: How to avoid layout shifts caused by web fonts

#54

Post by [deleted] »

capableweb wrote: post #51
bruce343434 wrote: post #37

Earlier quoted context omitted.

Why not just `body {font-family: sans-serif}`? Like, you don't have to explicitly enumerate all sans-serif system fonts ever. The browser will handle it.

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…

[deleted]

Re: How to avoid layout shifts caused by web fonts

#55

Post by s5806533 »

l0b0 wrote: post #7
tomcooks wrote: post #2

> Most designers will cringe at the thought of showing users a fallback system font. Explaining them that web is not paper, helps removing a lot of this childish behaviour.

I guess it's a good thing the web is built for users rather than designers, then, isn't it? Oh wait. On a more serious note, screw all the font **ery. Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above . Better to have some crappy websites glitch out a bit than get a headache from trying to read 200 different fonts in a day.

> Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above.

Done! Thanks for the reminder!

Re: How to avoid layout shifts caused by web fonts

#56

Post by iforgotpassword »

s5806533 wrote: post #55
l0b0 wrote: post #7

Earlier quoted context omitted.

I guess it's a good thing the web is built for users rather than designers, then, isn't it? Oh wait. On a more serious note, screw all the font **ery. Settings → Language and Appearance → Advanced → untick Allow pages to choose their own fonts, instead of your selections above . Better to have some crappy websites glitch out a bit than get a headache from trying to read 200 different fonts in a day.

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

Re: How to avoid layout shifts caused by web fonts

#58

Post by chrismorgan »

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, and ui-sans-serif (along with ui-serif, ui-monospace and ui-rounded) is only implemented by Safari yet.

For serif, I recommend at most three items, possibly including one named font: a web font, Georgia, and serif. See, serif is probably a narrower serif (something like Times New Roman), but Georgia a wider one—they’re fairly different in character, so that it can be worth including if you’re doing so deliberately.

For monospace, I recommend at most four: a web font, ui-monospace (I wouldn’t, but some macOS people prefer it), Consolas, and monospace. I think Consolas is worth keeping in until Firefox updates its Windows default (https://bugzilla.mozilla.org/show_bug.cgi?id=713680), because Courier New is that bad.

Most font stacks now are just cargo culting, and are mostly mildly harmful.

Re: How to avoid layout shifts caused by web fonts

#59

Post by hawski »

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 to tap or click and do something like nothing did change in this time.

Re: How to avoid layout shifts caused by web fonts

#60

Post by bschwindHN »

Cullinet wrote: post #38
Raed667 wrote: post #19

Earlier quoted context omitted.

Designers want the web-app to look like their figma. Most are not willing to compromise on that. It takes senior engineers (with weight in the company) to lead the effort to force design to concede on certain things like this.

everything that I use computers for has been ultimately to produce aesthetics to my exacting standards a example of which is the 8 years taken from first sketch of my redesign for the company logo to first example of use. But I refuse to allow applications like Figma on my company computing assets. You probably wouldn't be hired if you used such things as part of your work flow anyway. Good design begins with pencil…

I can't tell if this is a joke or not, we're talking about websites.
Post reply on HN