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

81–90 of 126 posts

Re: How to avoid layout shifts caused by web fonts

#81

Post by ljm »

necovek wrote: post #73
ljm wrote: post #67

Earlier quoted context omitted.

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.

But that's not what was being compared. How would electron apps render a "sans-serif" font?

What is being compared? Because to me it read like a question of choosing 'sans-serif' over 'ui-system-font-sans' or whatever in your CSS. Nothing more than that.

Re: How to avoid layout shifts caused by web fonts

#82

Post by dmitryminkovsky »

megous wrote: post #78
dmitryminkovsky wrote: post #70

Earlier quoted context omitted.

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

Normal way to achieve img to have a size before the resource in src loads is to set width/height attributes to the native size of the resource that will be loaded (because you have to tell the browser size of an image somehow), and if you want to scale it with aspect ratio preserved you just use min/max-width/height in css to fit it to whatever size you need.

You’d think, right? But I tried that approach, and I don’t remember what the issues were but there were problems. Unless I was doing something wrong. Either way, yes, you need the dimensions ahead of time, which is reasonable and not my gripe.

Re: How to avoid layout shifts caused by web fonts

#83

Post by thrdbndndn »

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

> 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

Re: How to avoid layout shifts caused by web fonts

#84

Post by thrdbndndn »

TacticalCoder wrote: post #69
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…

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

>People who came up with these font stacks didn't do a bad job at all

Not without trial-and-error. Twitter, GitHub, and Stackoverflow all got huge complaints for their font changes and had to revert/revise their font stack choices quickly due to the outcry.

In SO's case which I followed, they didn't even have anyone to test their UI on Windows at all. I don't know how that's "a good job".

>and I don't want to always turn my font overrides/default on/off

Just to clarify a little bit, by "user can define it" I'm not saying to override using custom CSS or anything. I'm saying users can choose the default sans-serif/serif/monospace fonts in all major browsers. Any specific fonts defined in CSS other than sans-serif would still override that.

Re: How to avoid layout shifts caused by web fonts

#85

Post by esprehn »

dmitryminkovsky wrote: post #70
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 .

The aspect ratio hack was replaced by the aspect-ratio CSS property: https://web.dev/aspect-ratio/

Which is supported in all modern browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati...

The state of the art for CSS these days is not that hacky.

Re: How to avoid layout shifts caused by web fonts

#87

Post by thrdbndndn »

ljm wrote: post #81
necovek wrote: post #73

Earlier quoted context omitted.

But that's not what was being compared. How would electron apps render a "sans-serif" font?

What is being compared? Because to me it read like a question of choosing 'sans-serif' over 'ui-system-font-sans' or whatever in your CSS. Nothing more than that.

He/she is trying to say what the default of "sans-serif" would be if not 'ui-system-font-sans'.

And it indeed is the same font on Android and iOS, at least. Windows is kinda tricky though.

Re: How to avoid layout shifts caused by web fonts

#88

Post by distantsounds »

togaen wrote: post #41

Easy: don’t use them. They are a waste of time anyway. I promise you your users care 0% about whether your font is “just right” or not.

Until the HTML spec is actually fixed so this isn't a problem solved by jabascript/css hacks, this is the accurate answer

Re: How to avoid layout shifts caused by web fonts

#89

Post by pville »

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.

Maybe it's time to bring back "Weaponized" Comic Sans: http://www.openbsd.org/papers/bsdcan14-libressl/mgp00025.htm...

Re: How to avoid layout shifts caused by web fonts

#90

Post by lelandfe »

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

I would never in a million years think of this. Thanks for the link.
Post reply on HN