5 ms·

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

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.
  - jraph 4y ago
    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 4y ago
  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.
  - joe5150 4y ago
    > 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 4y ago
      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.

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.
- jraph 4y ago
  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 4y ago
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.
- joe5150 4y ago
  > 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 4y ago
    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.