6 ms·

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 le

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.

joe5150 4y ago
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#industrial https://github.com/system-fonts/modern-font-stacks#industria....
- foxandmouse 4y ago
  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 4y ago
    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 4y ago
      > 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 4y ago
        > 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 4y ago
        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.
        djur 4y ago
        If it is legible I don't care. If I can select a style a little bit more specific than "serif" or "sans-serif", that's great, as long as it degrades to something legible. I've yet to see a situation where free-flowing text or headings became illegible because the font changed. UI elements, sure.
        philistine 4y ago
        It simply puts a bit more trust on the user than normal. And if your OS has a ridiculous system-UI font that can't handle paragraphs well, you have bigger problems than some website.
deckard1 4y ago
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 4y ago
  > 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 4y ago
    > 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-stack-3 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.

joe5150 4y ago

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#industrial https://github.com/system-fonts/modern-font-stacks#industria....

foxandmouse 4y ago
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 4y ago
  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 4y ago
    > 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 4y ago
      > 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 4y ago
        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.
        djur 4y ago
        If it is legible I don't care. If I can select a style a little bit more specific than "serif" or "sans-serif", that's great, as long as it degrades to something legible. I've yet to see a situation where free-flowing text or headings became illegible because the font changed. UI elements, sure.
        philistine 4y ago
        It simply puts a bit more trust on the user than normal. And if your OS has a ridiculous system-UI font that can't handle paragraphs well, you have bigger problems than some website.

deckard1 4y ago

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 4y ago
> 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 4y ago
  > 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-stack-3 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.