Live data from Hacker News

How to avoid layout shifts caused by web fonts

simonhearne.com

71–80 of 126 posts

Re: How to avoid layout shifts caused by web fonts

#71

Earlier quoted context omitted.

Then why not share all typography with everyone under a license, that allows every OS maker to include all the fonts they want plus allowing users to choose what else to install and then only use system fonts? That way we can have it all, fast websites, without additional secret server side tracking, and the fonts of the system being used and the artist getting their message communicated. No need for any web font.

I guess there aren’t any commercial incentives to do that. But that doesn’t change that typography is valuable.

We can definitely agree on that. I would want every designer to be able to express themselves as they wish to, without forcing their vision on everyone.

I just don't want to download megabytes of fonts when visiting a website, sending an additional request to some Google servers. It will always remain blocked on my end. I hope we can somehow get to a solution, that allows each side their choices, instead of prefering one dictating how things are regardless of the other side's wishes. That means, if I choose to have all websites display their text in some font meant for dyslexia, I should have the possibility to do so, without the whole design breaking. If I enjoy monospaced fonts perhaps (although that is a stretch) even that. Or if I just want my plain and simple system fonts, I should be able to do that and still make use of the website like every other visitor.

At least this much I expect from a proper design. CSS these days is so powerful, I would expect web designers to know their tools, including what can be done with CSS3, their choices and the consequences for visitors.

I am not even a frontend developer mainly. I do all kinds of things, sometimes also frontend, but I prefer not to. Yet I have apparently informed myself more about what is possible with CSS and the right approach to responsive design, than what I see implemented in many websites. I feel that some basic knowledge about what CSS can do should be a minimum requirement for anyone touching frontend stuff. It makes me question, whether there ever has been a web designer giving proper thought about some websites and a person, who has tested these things like "What happens, if the webfont is not loaded?". Maybe the website is some quick and dirty output of some tool, and the actual person developing the website had no good knowledge about web development and their tools. Ultimately what does a website consist of? Mostly HTML, CSS and perhaps if needed some JS. Some static resources like images, OK. If one does not know these well, how does one expect to deliver good work?

Perhaps it is also that people are not given enough time to really make a good design and implement that with proper CSS. Design and implementation of it takes time. It is the reason, why there is a job or role called web designer, UX designer. Someone actually gets down to it and does a good job, that earns my respect. But not this "Oh you used a slightly different font, the design of this website cannot work properly any longer!"-crap.

Re: How to avoid layout shifts caused by web fonts

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

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

Re: How to avoid layout shifts caused by web fonts

#73
post #67

Earlier quoted context omitted.

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.

But that's not what was being compared.

How would electron apps render a "sans-serif" font?

Re: How to avoid layout shifts caused by web fonts

#74

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

I prefer DejaVu family of fonts.

Re: How to avoid layout shifts caused by web fonts

#75

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.

Because they want to have a tighter control of user experience, which includes the choice of the font used to display text. So they list their preferred fonts first, with fallback fonts at the end. It’s a fair reason with an appropriate CSS pattern.

I, like the GP, fail to see how listing dozens of fonts of completely different nature (x-height, line-height, width, proportions, weight...) provides any "control of the user experience".

This seems to be developed for browsers which do not default to system-wide fonts: which ones are those today?

Re: How to avoid layout shifts caused by web fonts

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

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.

Re: How to avoid layout shifts caused by web fonts

#79
post #68

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.

Huh, ok, never experienced that but that is probably just due to you and I going to different sites. I do use FF as my daily non-work driver though.

Re: How to avoid layout shifts caused by web fonts

#80
post #64

Earlier quoted context omitted.

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.

I was going to suggest that too.

Separate metrics files have already been done too (both with TeX in TFM files and Adobe/PostScript fonts in AFM/PFM files), so you wouldn't even have to invent a new file format.

Or you could simply use a regular font with no glyph curve data.

I am a bit disappointed this is not covered in the original post, and that no effort is being put in W3C to make that easy and viable.

Post reply on HN