How to avoid layout shifts caused by web fonts
simonhearne.com
simonhearne.com
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
@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.
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;
How would electron apps render a "sans-serif" font?
And it indeed is the same font on Android and iOS, at least. Windows is kinda tricky though.
There was no mention of direct use of Arial, Times New Roman or Courier that I could see, so I don't see why bring it up.
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).
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.
They removed system-ui which, as you pointed out in the other comment, can cause problems for some OS languages:
@ff-sans:
-apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
"Segoe UI", // Windows
"Liberation Sans", // Linux
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
"Liberation Mono", // Linux
Menlo, Monaco, Consolas, // A few sensible system font choices
monospace; // The final fallback for rendering in monospace.
It’s a fair reason with an appropriate CSS pattern.
This seems to be developed for browsers which do not default to system-wide fonts: which ones are those today?
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.
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.
Can you expand on why?
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).
I don’t want your idea of a suitable font, in general, because the default defaults (that is, the browser’s default value for sans-serif) are thoroughly good enough, and I changed my defaults, and by writing the likes of `…, Arial, Helvetica, sans-serif`, you didn’t change anything for most people, but prevented me from getting my chosen default sans-serif.
Long font stacks are fighting a fundamentally unwinnable battle with small potential benefits, high uncertainty, and definite costs (normally mild) to people that actually expressed preferences to their user agent.
And that's exactly where it causes problem [1].
Also, even with `ui-sans-serif` (i.e. if it's guaranteed that it is/someone's doing something deliberate if it isn't) why's that what you want for the sans serif text on your web page, that isn't 'system UI'?
So: modern font stacks... Not bad, but not yet the panacea either (even for big websites who really should know better).
I make exceptions for websites that I visit regularly, where the most frequent breakage is a custom font that packs icons. On websites that I frequently read for documentation I sometimes even swap the font to something that I prefer (by injecting a @font-face src:local rule).
Designer's choice of fonts are frequently lower in legibility and/or do not have good hinting (not at the same level of most system fonts). On non-retina displays the qualitative difference is sometimes staggering.
This. Plus sometimes, for some reason, they choose hair-thin versions of fonts that are a pain to read even on (non mac) retina displays.
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.
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.
Yes. What would be interesting is if you could use an a-priori available font (system font), and combine it with a website-provided font metrics file. That way, you can render visible text immediately, and then later render the correct font without layout change.
Rendering a similar system font (by metrics comparison, ideally) in its place is indeed a great improvement on this, but mostly for the render-as-soon-as-possible problem.
I'd treat it as a separate problem simply because it can be on the user agent to decide to do it and how, and even without it, a bunch of web apps would start benefitting right away (those which have most of their actual text off screen but which might block rendering other parts of the page).
var html = document.documentElement;
var script = document.createElement("script");
script.src = "fontfaceobserver.js";
script.async = true;
script.onload = function () {
var roboto = new FontFaceObserver("Roboto");
var sansita = new FontFaceObserver("Sansita");
var timeout = 2000;
Promise.all([
roboto.load(null, timeout),
sansita.load(null, timeout)
]).then(function () {
html.classList.add("fonts-loaded");
}).catch(function (e) {
html.classList.add("fonts-failed");
});
};
document.head.appendChild(script);I wonder why we almost never talk about the actual filesizes of different fonts and which ones take less space, for when the total size of our webpages is important and we'd like to make our font choices with that in mind, provided that we don't want to just use the system fonts for whatever reason.
For example, i described some of the specifics of serving my own fonts on my site instead of using Google Fonts in a discussion about privacy some time back: https://news.ycombinator.com/item?id=29996364
The question that i posed in that comment still hasn't really been answered and is still relevant in my eyes:
> While we're on the topic of fonts, it's a shame that we don't think more about how heavy the fonts we choose to use are, since right now serving my own fonts eats up around half of the bandwidth on my non-image-heavy site. The single article that i've found on the topic so far as been this, "Smallest (file size) Google Web Fonts": http://www.oxfordshireweb.com/smallest-file-size-google-web-...
Why doesn't Google Fonts have a field somewhere that'd show the total size of a font in any number of supported file formats? Why do we have so much effort towards optimizing the sizes of images, and yet fonts don't get the same love?
I've been keeping an eye out to see if there's been an equivalent FOSS solution but nada so far.
We used adobe fonts for a while, but I really wasn’t impressed.
Hundreds of dollars to buy a font it turned out we could only use through their hosted service.
Am I crazy or does that waterfall pretty clearly show nothing of the sort? When using http/2, a reasonable amount of preloaded assets won’t block anything else in the critical path…
And do use verdana, it's the most readable font. Admit it, you like it here
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.
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.
Probably this, that approach is very standardized now across the major browsers.
I worked at a web agency until last year, and led projects to inline image height/width values for 4 large companies. Huge reduction in CLS and permits you to lazyload without fear of layout shifts.
`aspect-ratio` hadn't landed in iOS Safari at that point, but you can do that instead now. Identical behavior.
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.
Not sure this one counts as a bug, but a deliberate WONTFIX. I never intentionally click on ads, but I have been known to press one when an ad "happened" to appear in the position of some other content.
"Avoiding layout shifts caused by web fonts" is a great topic.
"Readability" would be another one.
2. There is no step 2
They just slow the web down and often make things less legible in the name of style.
Turns out that branding and consistency are actually very important.
But for things like the body font on a website, nobody really cares except the company's designers
Explaining them that web is not paper, helps removing a lot of this childish behaviour.
So to instead of dropping (or at least thinking about optimizing) the loading transition the designer (with a straight face) proposed a loading bar for the loading of the loading animation.
I was lost for words.
[Edit: typo]
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 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 designing a thing.
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”. But that’s generally not where you want things to sit as a design goal.
My main point is simply that there’s a significant gap between “it can be used” and “it can be used well” — and a designer’s primary job is to bridge that gap (generally the engineer in us takes us to “it can be used”). That (some? many? majority?) designers aren’t competent is a separate concern… but their abstract goals are fairly obvious and intuitive if difficult to specify concretely
And we understand this intuitively, because there are many apps in our section of the universe that fall under it can be used — back-office apps, enterprise apps, etc a constant offender (not say good ones don’t exist, or bad custom apps don’t exist, or bad designers/designs don’t exist… etc — but we’ve all probably encountered a good few that are astoundingly unpleasant to use)
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.)
Because typography is a means of communication.
Fonts are associated with different periods of time, different groups of people, different artistic and even philosophical movements. Picking a font can help communicate how you see yourself and what you are trying to achieve. A picture paints a thousand words.
A world without typography would be a poorer world.
But that doesn’t change that typography is valuable.
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.
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.
Done! Thanks for the reminder!
(0. Install uBlock Origin)
1. Re-enable web fonts
2. In the main UO settings, check "Block remote fonts"?
3. Refresh a page
4. Click the UO icon, and then "more" until I see an icon titled "Click to no longer block remote fonts on this site"
5. Click
6. Refresh the page
Repeat 4-6 for relevant sites.
Any caveats?
You can ship your own fonts. Everyone and their dog uses one of two web browser engines. People want their websites to "look right". You can offer a fully specified look!
Meh.
>and other fonts might be more suited in a different context
that is why "general use case" is my point. can you point me a specific example of where my current default "noto sans 10 pt" in kde neon is NOT suited for a specific use case? i want to see that unless i use a developer decided font, i would be totally off base, i would miss the plot, i would read garbage, etc etc.
Complaining and not using them is the only real option.
besides, i refuse to accept that the billions microsoft and apple in particular spent on truetype/cleartype fonts or whatever the tech is, is so poor that you are forced to use something else. i... i mean how can that be.... do you have some proof of this?
>Complaining and not using them is the only real option.
so microsoft and apple will be in your opinion forever content with shipping "shitty fonts" as "defaults" which run on billions of devices, android comes with fonts that run on many billion devices and they ALL are using shitty defaults and these multi trillion dollar companies do not know better than your average hacker news reader. nice. i am in good company lads.
I'll bite. What's wrong with fonts on Linux?
It takes senior engineers (with weight in the company) to lead the effort to force design to concede on certain things like this.