[foxandmouse]

Most of the fonts listed here are premium fonts, the complete DIN typeset costs nearly 2k. If we're going that route, then it's safe to say most of these are lesser than the best in class for each category. popular fonts like Futura, Century Gothic, Baskerville, and Univers are just a few that are omitted..

While there's no objective truth in design, these fonts are not suitable for designers who prioritize typography. However, if you're looking for a quick solution for a side project and don't care much about typography, this list could be helpful. Can't see why it belongs on the front page though.

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

[joe5150]

The type named, DIN Alternate, is included with MacOS (bold and condensed bold only). The GitHub page has some notes about this, along with more info about what systems support which typefaces.

https://github.com/system-fonts/modern-font-stacks#industria....

[foxandmouse]

Thanks! the GitHub page includes a lot of (imo) essential information that should be included on the site. The developer clearly did a lot more research than I assumed.

That said, one thing to consider if you're using this stack is that this implementation will produce OS specific designs. The fonts in each stack differ significantly between operating systems, which means that testing for each OS will be necessary. I already have an issue with the same fonts looking different due to different rendering methods in each browser/ OS.

[joe5150]

I think it's helpful to keep in mind that any design will be to some extent "OS-specific" for a lot of different reasons, available fonts being only one factor.

I also think OS-specific design is perfectly appropriate for a lot of use cases. I use "font-family: system-ui, sans-serif" on my resume page, for example, because I know that the default system fonts look fine (by design) on any screen and a fast, lightweight page is more important to me than a specific font presentation. If you're creating a user interface with really tight tolerances on element size or appearance, different strategies might be more appropriate.

[hLineVsLineH]

> I use "font-family: system-ui, sans-serif" on my resume page [...] If you're creating a user interface with really tight tolerances on element size or appearance, different strategies might be more appropriate.

Shouldn't it be the opposite? It literally has "UI" in the name, and according to the the spec, "The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS."

The text on a resume is not UI, and it has no need to fit the look and feel of the native OS. In this case you should just use `serif` or `sans-serif`. If you're creating a user interface, then it would be appropriate to use `system-ui`.

[joe5150]

> The text on a resume is not UI, and it has no need to fit the look and feel of the native OS

My resume has no need to look any particular way at all; this is just my preference. You should design your webpages however you like!

[jfk13]

You may happen to like how system-ui looks on your system (macOS? Windows?); but do you have any idea what it looks like for the person reading your resume, perhaps on Linux with a custom theme, or on an Android device where the vendor chose to ship some brand-specific UI font? Or on a 5-yr old version of the OS, or on the version that'll be current 5 years in the future?

IMO system-ui is hardly ever a wise choice for content.

[madeofpalk]

Emphasis on "really tight tolerances". If you build a UI relying on the specific metric of a font (as misguided as that may be), system-ui will be a poor fit because it will have different metrics on different operating systems.