by joshbetz on 1/29/22, 7:30 PM with 121 comments
by divbzero on 1/30/22, 10:00 AM
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.
by wakeupcall on 1/30/22, 10:25 AM
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.
by mattbee on 1/30/22, 10:14 AM
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.
by jurnalanas on 1/30/22, 10:16 AM
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);by KronisLV on 1/30/22, 10:11 AM
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?
by lelandfe on 1/30/22, 10:35 AM
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…
by cblconfederate on 1/30/22, 3:59 PM
And do use verdana, it's the most readable font. Admit it, you like it here
by hawski on 1/30/22, 12:47 PM
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.
by logifail on 1/30/22, 2:16 PM
"Avoiding layout shifts caused by web fonts" is a great topic.
"Readability" would be another one.
by tacone on 1/30/22, 12:38 PM
by jesprenj on 1/30/22, 2:13 PM
by donatj on 1/30/22, 3:38 PM
2. There is no step 2
They just slow the web down and often make things less legible in the name of style.
by togaen on 1/30/22, 11:14 AM
by tomcooks on 1/30/22, 8:50 AM
Explaining them that web is not paper, helps removing a lot of this childish behaviour.