[deckard1]

I'm going to be slightly more blunt and say, if you're using a font "stack" then you don't care about typography at all. A large segment of HN seems to hate web fonts with a passion. And I get that. But let's not pretend you can have your cake and eat it too. You may as well just do "serif" or "sans-serif" and be done with it.

For the same amount of effort it takes to research a font stack you could implement a web font loader that uses browser fonts based on prefers-reduced-motion.

[jraph]

> if you're using a font "stack" then you don't care about typography at all

Why?

If I want to display a document with some atmosphere for which several fonts could be suitable, and it's not so important if a default generic font is used, but I care more about performance and resource usage, it's a good solution, no?

The default generic font will probably be a well designed font that the user is used to, so, typographically, it's very good. I like this "best effort" approach.

A custom font will probably be worse for many users: users have to download it, there can be flashes, reflows, rerenders or a long time where stuff is blank, and the user might not be familiar with this font. Since fonts are mostly a matter of taste anyway, it's not clear the user will prefer this custom font over the ones that are already on their computer and that they are more likely to be familiar with.

So, in the end, it might as well be the better solution, typographically speaking.

[deckard1]

> that the user is used to

That's not the point of typography or design. People are used to Comic Sans. That doesn't make it a good choice. Some designs call for something that stands out in a unique way.

If you are going to the trouble of finding an "atmosphere" for your site and researching the fonts you are using then why just throw that all out with a "stack" and sort of kind of but not really getting it right?

Here's the bigger problem. No two fonts have the same font metrics. Go to the Github page: https://github.com/system-fonts/modern-font-stacks#css-font-.... These fonts are all using the same font size, weight, etc. but they are drastically different. Calibri and DejaVu do not render remotely the same. DejaVu might be readable at a certain size where Gill Sans Nova is going to be rather awful. These are all within the same font stack. Even in the "Preview Rendering" you can see it cheated by having the footnote that says "These fonts have been size-adjusted for easier comparison." How are you planning to do that in CSS? You can't.

All this effort is wasted. You can just pick "sans-serif" and let the user use whatever they have set in the browser. That's better anyway, especially for a blog type layout which is the only layout that would make sense and not completely break with a font stack.

[jraph]

I generally agree with your comment, I'll just reply to some specific points (by the way, thanks to you and to the other commenter who replied to my comment, good points all across).

> People are used to Comic Sans. That doesn't make it a good choice.

Sure. Familiarity is not a sufficient condition. I was assuming well designed fonts for reading several paragraphs.

Comic Sans is suitable (and well designed) for comics. But it is so overused everywhere that other fonts would be preferable for this - I know it seems I contradict myself since I'm also stating that familiar fonts are better, but I think there's a difference between such fonts and more neutral fonts that need to be used for several paragraphs. And I believe familiarity for the more neutral fonts can help because you don't have to "decipher" the font anymore.

> Some designs call for something that stands out in a unique way.

Indeed. I was assuming a standard web page, or a standard web app here to convey information or be functional. For such pages, I don't think it matters if the font is not exactly at the same size when rendered as when designed. The page is already going to be rendered on widely different screens and dispositions and its design should be reliant on such changes. Maybe choosing the default sans-serif font (for screens) with the default size is best for accessibility: you can be reasonably sure it will be displayed well for users with their settings.

Now, with font stacks, you can leave out the outliers and pick a font size that's not at the edge of readability.

[hLineVsLineH]

The say, "then you don't care about typography at all." You say, "If [...] it's not so important [...]" To me, it sounds like you two are in agreement. If it's not important, i.e. if you don't care about it, then it's fine.

> If I want to display a document with some atmosphere for which several fonts could be suitable

There's no such thing as "several fonts could be suitable". All the fonts in these stacks have different metrics, so you can't even set appropriate values for something as basic as the font size and line spacing.

If you design your page using Gill Sans Nova, for example, and someone views it with DejaVu Sans — congratulations, the text now looks something like 50% bigger than you intend it to be. And if you set a sensible size for DejaVu Sans, someone will get unreadable text with some other font. This is not "very good". It's bad.

It might be okay to use these font stacks as fallback when the custom font doesn't work, but it's not "the better solution" if you care about typography.

> I care more about performance and resource usage

It's a valid concern but fonts aren't really that big. Some people are shipping favicons that are like 40kB. That's enough to fit a font.

> The default generic font will probably be a well designed font that the user is used to

System fonts aren't necessarily well designed. And I'm not sure why "the user is used to it" is a good thing. It seems to be the opposite. People complain when a font is familiar to the point that it feels tired and overused.

> Since fonts are mostly a matter of taste anyway, it's not clear the user will prefer this custom font

The user is always in control. They can always choose what to load and what styles to apply. That doesn't mean people should stop designing webpages that looks good.

[jraph]

> If it's not important, i.e. if you don't care about it.

No. I care about typography. You left out the critical part of this sentence: "it's not important if the default font is used".

Now I understand that you also say that default fonts are not necessarily well designed. On my side, these default fonts have looked good on every device I have used, and I'm more often annoyed by arbitrary font settings that look good to the designer who happened to design the web page I'm reading.

> The user is always in control. They can always choose what to load and what styles to apply

In practice, I'm not going to design each page I visit. I'm blocking web fonts by default, but that sometimes triggers a bad setting where the font that is used as a fallback looks very bad. I guess that happens when people assume that the web font will be loaded and don't default to (sans-)serif in their font-familly CSS property.

[hLineVsLineH]

> "it's not important if the default font is used".

That's also what they said. They said "You may as well just do 'serif' or 'sans-serif' and be done with it."

> Now I understand that you also say that default fonts are not necessarily well designed.

While fonts are a matter of taste, objectively speaking fonts that comes preinstalled on systems often have very few weights and support only a very limited range of glyphs. They also lack features such as small caps, old-style numbers, etc.

Usually, though, the main, default sans-serif and/or UI font on the system are much better than some random font that just happens to be included in the system. So you will usually be better off using `sans-serif` than any of these font stacks.

> I guess that happens when people assume that the web font will be loaded and don't default to (sans-)serif in their font-familly CSS property.

But this is just yet another reason why using font stacks is bad...? If instead you just use `serif` or `sans-serif` it will follow the user's font preference.

[joe5150]

> congratulations, the text now looks something like 50% bigger than you intend it to be

Some of these "stacks" do make poor choices with respect to matching the overall metrics of the fonts, but there are any number of reasons why a font might display bigger or smaller than you "intend it to be" in a web browser. Web design fundamentally has to account for this.

[hLineVsLineH]

Yes, and that's exactly the problem with this approach. There's no accounting for the different metrics of the fonts.

Font size and font family should ideally always be set together. If you're setting a font-size, then you should force a font-family, and vice versa. Otherwise, you should set neither and let the user agent decide. This ensures that you would never get a broken combination that's uncomfortable or unusable.

It's similar to the idea that whenever you're setting a foreground color, you should always set the background color as well.