How to avoid layout shifts caused by web fonts • Hacker News Board

Re: How to avoid layout shifts caused by web fonts

#11

Post by mrweasel » Sun, Jan 30, 2022, 9:37 AM UTC

setr wrote: post #8

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.

Branding is bit subtler than that — you’re not going to really say anything about Target’s consistent styling, versus Walmart’s fairly austere aesthetic, but you definitely get a different “feel” from each, before looking at their actual contents/stock. I don’t know whether fonts are really that important to the total equation, but “not terrible enough to walk out the door” is generally a very low bar to meet when de…

I’m not sure I understand the point about enterprise apps, because that can go both ways. Custom company application tend to be the worst, because they apply all the company branding guidelines, rather than just applying to system defaults.

Re: How to avoid layout shifts caused by web fonts

#12

Post by Leherenn » Sun, Jan 30, 2022, 9:48 AM UTC

2Gkashmiri wrote: post #10

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 have tried to ask people a simple question. "why do you think you know fonts better than microsoft or apple?" not to even talk about linux for a moment here. do these multi trillion dollar companies making operating systems do a shit job at fonts that each and every website developer needs to use google fonts that increase dependency on third parties than using system default fonts?

Not particularly a fan of custom fonts, but fonts are not one size fits all. Apple or Microsoft default fonts are designed for the general use case, and other fonts might be more suited in a different context. Whether that's worth the cost, that's a different question.

Re: How to avoid layout shifts caused by web fonts

#13

Post by oefrha » Sun, Jan 30, 2022, 9:49 AM UTC

2Gkashmiri wrote: post #10

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 have tried to ask people a simple question. "why do you think you know fonts better than microsoft or apple?" not to even talk about linux for a moment here. do these multi trillion dollar companies making operating systems do a shit job at fonts that each and every website developer needs to use google fonts that increase dependency on third parties than using system default fonts?

Yes, Microsoft does do a shit job at fonts. Many Android vendors too. Don’t even get me started on Linux.

Re: How to avoid layout shifts caused by web fonts

#14

Post by chrisseaton » Sun, Jan 30, 2022, 9:52 AM UTC

mrweasel wrote: post #4

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

> why do anyone care about which font is used as long as the basics such as fixed or sans serif is applied correctly?

Because typography is a means of communication.

Re: How to avoid layout shifts caused by web fonts

#15

Post by [deleted] » Sun, Jan 30, 2022, 9:56 AM UTC

2Gkashmiri wrote: post #10

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 have tried to ask people a simple question. "why do you think you know fonts better than microsoft or apple?" not to even talk about linux for a moment here. do these multi trillion dollar companies making operating systems do a shit job at fonts that each and every website developer needs to use google fonts that increase dependency on third parties than using system default fonts?

[deleted]

Re: How to avoid layout shifts caused by web fonts

#16

Post by 2Gkashmiri » Sun, Jan 30, 2022, 9:59 AM UTC

oefrha wrote: post #13

2Gkashmiri wrote: post #10

Earlier quoted context omitted.

i have tried to ask people a simple question. "why do you think you know fonts better than microsoft or apple?" not to even talk about linux for a moment here. do these multi trillion dollar companies making operating systems do a shit job at fonts that each and every website developer needs to use google fonts that increase dependency on third parties than using system default fonts?

Yes, Microsoft does do a shit job at fonts. Many Android vendors too. Don’t even get me started on Linux.

cool. why don't you kindly ask them to fix the fonts by a bug request instead of everyone just assuming the stuff is shit

Re: How to avoid layout shifts caused by web fonts

#17

Post by KronisLV » Sun, Jan 30, 2022, 10:00 AM UTC

setr wrote: post #8

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.

Branding is bit subtler than that — you’re not going to really say anything about Target’s consistent styling, versus Walmart’s fairly austere aesthetic, but you definitely get a different “feel” from each, before looking at their actual contents/stock. I don’t know whether fonts are really that important to the total equation, but “not terrible enough to walk out the door” is generally a very low bar to meet when de…

> Another example in the app space — you know enterprise apps will get the job done, but they’re downright unpleasant to use; from aesthetics to workflow efficiency, they just barely hover over “dealing with it isn’t worth the output”.

While this is a good point, i don't feel like a discussion about fonts is relevant here. For example, when working with Jira, i don't care about what font it uses, as long as it is legible (e.g. even whatever is the default sans-serif font would work), whereas what actually matters to me in such a context is the responsiveness of the UI and how well it works, UX over UI.

If Jira's interface is laggy and slow, or just cumbersome to use because their implementation of custom fields is weird, no font or logo choices will make any of that markedly better. In my eyes, how something looks is largely decoupled from how well it works - if Jira were a GTK/Win32 app with almost no styling, but worked faster than it currently does, i'd probably get more value out of it than i currently do, fancy UI or not.

(just using Jira as an example here, because their UI redesign did make things slower and got some backlash from users that was ultimately ignored, i bet the same applies to a lot of other software out there, e.g. how Flutter apps oftentimes break right click behaviour in browsers etc.)

Re: How to avoid layout shifts caused by web fonts

#18

Post by divbzero » Sun, Jan 30, 2022, 10:00 AM UTC

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
    "Ubuntu", // Ubuntu
    "Roboto", "Noto Sans", "Droid Sans", // Chrome OS and Android with fallbacks
    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
    "Ubuntu Mono", // Ubuntu
    "Roboto Mono", // Chrome OS and Android
    Menlo, Monaco, Consolas, // A few sensible system font choices
    monospace; // The final fallback for rendering in monospace.

[1]: https://meta.stackexchange.com/questions/364048/we-are-switc...

Re: How to avoid layout shifts caused by web fonts

#19

Post by Raed667 » Sun, Jan 30, 2022, 10:05 AM UTC

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.

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.

Re: How to avoid layout shifts caused by web fonts

#20

Post by hexo » Sun, Jan 30, 2022, 10:11 AM UTC

mrweasel wrote: post #4

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

Exactly!