5 ms·

The suggestion I like the most is 3.4) Use system fonts: body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ub

• thrdbndndn 5y ago
  >Stack Overflow took this approach last year Just to note, what you posted below isn't their final version, and for good reasons. Anyone that is interested about this please check the original post with update 1,2, and 3. On the other hand, I still failed to see the the advantage of such complex stack vs font-family: sans-serif; Why reinvent the wheel when you can just use this and it would use browser's default sans-serif font setting? Which users can define to whatever they want, system font or not.
  • divbzero 5y ago
    Thanks for pointing out Stack Overflow’s subsequent updates. They removed system-ui which, as you pointed out in the other comment, can cause problems for some OS languages: @ff-sans: -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS "Segoe UI", // Windows "Liberation Sans", // Linux 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 "Liberation Mono", // Linux Menlo, Monaco, Consolas, // A few sensible system font choices monospace; // The final fallback for rendering in monospace. https://github.com/StackExchange/Stacks/pull/642/files https://github.com/StackExchange/Stacks/pull/642/files
  • jezzamon 5y ago
    There is something incomplete feeling about just the default styling. If you're going for a brutalist design mentality then sure, go for it, but sometimes the appearance actually does matter
    • thrdbndndn 5y ago
      I'm not against using font style; I'm against (or more like, failed to see the point) to manually craft a complex "system font stack" to achieve.. basically the same thing as sans-serif but worse.
      • ljm 5y ago
        If you're building a web app (say, via electron) as opposed to a site or document, using the system font stack will make that app fit into the desktop environment much better than Arial, Times New Roman and Courier New will.
        • necovek 5y ago
          But that's not what was being compared. How would electron apps render a "sans-serif" font?
          • ljm 5y ago
            What is being compared? Because to me it read like a question of choosing 'sans-serif' over 'ui-system-font-sans' or whatever in your CSS. Nothing more than that.
            • thrdbndndn 5y ago
              He/she is trying to say what the default of "sans-serif" would be if not 'ui-system-font-sans'. And it indeed is the same font on Android and iOS, at least. Windows is kinda tricky though.
            • necovek 5y ago
  • TacticalCoder 5y ago
    > Why reinvent the wheel when you can just use this and it would use browser's default sans-serif font setting? I've done lots of testing and very often a font stack gives better looking results than simply using the default. People who came up with these font stacks didn't do a bad job at all. I'd say it's especially noticeable on Linux (but not only): the default may really be freaking ugly compared to one of the previous font in the stack. > Which users can define to whatever they want, system font or not. But most users really don't bother do that. Heck, out of simplicity I don't even do it: the reason being I like to see how others are using fonts on their sites and I don't want to always turn my font overrides/default on/off. I want to know if the sites looks good "without any user intervention". One problem with font stacks though is those who picked one then forget to update them when new, much better, fonts installed by default comes out. For example a shitload of websites on the latest OS X / M1 macs are going to fall on Helvetica first (because they use outdated font stacks) and use that even though the world as really moved on and came up with incredibly better looking screen fonts than Helvetica (I'm not saying Helvetica doesn't still have its place in print).
    • thrdbndndn 5y ago
      >People who came up with these font stacks didn't do a bad job at all Not without trial-and-error. Twitter, GitHub, and Stackoverflow all got huge complaints for their font changes and had to revert/revise their font stack choices quickly due to the outcry. In SO's case which I followed, they didn't even have anyone to test their UI on Windows at all. I don't know how that's "a good job". >and I don't want to always turn my font overrides/default on/off Just to clarify a little bit, by "user can define it" I'm not saying to override using custom CSS or anything. I'm saying users can choose the default sans-serif/serif/monospace fonts in all major browsers. Any specific fonts defined in CSS other than sans-serif would still override that.
• bruce343434 5y ago
  Why not just `body {font-family: sans-serif}`? Like, you don't have to explicitly enumerate all sans-serif system fonts ever. The browser will handle it.
  • augustuspolius 5y ago
    Because they want to have a tighter control of user experience, which includes the choice of the font used to display text. So they list their preferred fonts first, with fallback fonts at the end. It’s a fair reason with an appropriate CSS pattern.
    • necovek 5y ago
      I, like the GP, fail to see how listing dozens of fonts of completely different nature (x-height, line-height, width, proportions, weight...) provides any "control of the user experience". This seems to be developed for browsers which do not default to system-wide fonts: which ones are those today?
  • capableweb 5y ago
    Sometimes you care a lot about the design of the website and that everything looks 100% OK in all browsers and screen-sizes. For example, think web agency landing pages, where you're supposed to sell your service to potential customers. In those cases, using whatever font is usually not good enough, because many of them have different sizes (both length-wise, height-wise and line-height-wise), so if a user gets a different font loaded than what you have tested with, it could at best just have a different size (right-side of the text is now 3px away from the side rather than 6px for example) and at worst introduce line-breaks in your buttons that only expects one line of text, making everything look very fugly.
    • maccard 5y ago
      If you care that much you need to bundle the font with your site.
      • 5y ago
• chrismorgan 5y ago
  -apple-system and BlinkMacSystemFont are now both obsolete and covered by system-ui. Almost all of the named fonts in common font stacks are either now superfluous or not a good idea any more, causing more harm than they solve. For sans-serif, I recommend at most three items: a web font, system-ui, and sans-serif. No more. I would note that system-ui is not necessarily sans-serif, but in practice it almost always is, and ui-sans-serif (along with ui-serif, ui-monospace and ui-rounded) is only implemented by Safari yet. For serif, I recommend at most three items, possibly including one named font: a web font, Georgia, and serif. See, serif is probably a narrower serif (something like Times New Roman), but Georgia a wider one—they’re fairly different in character, so that it can be worth including if you’re doing so deliberately. For monospace, I recommend at most four: a web font, ui-monospace (I wouldn’t, but some macOS people prefer it), Consolas, and monospace. I think Consolas is worth keeping in until Firefox updates its Windows default (https://bugzilla.mozilla.org/show_bug.cgi?id=713680 https://bugzilla.mozilla.org/show_bug.cgi?id=713680), because Courier New is that bad. Most font stacks now are just cargo culting, and are mostly mildly harmful.
  • OJFord 5y ago
    What's the benefit of putting `system-ui` in front of `sans-serif` that outweighs the down-side that it might not be sans serif? Also, even with `ui-sans-serif` (i.e. if it's guaranteed that it is/someone's doing something deliberate if it isn't) why's that what you want for the sans serif text on your web page, that isn't 'system UI'?
  • michaelcampbell 5y ago
    > superfluous or not a good idea any more, causing more harm than they solve. Can you expand on why?
    • pville 5y ago
      Firefox has left me scratching my head a few times, I think they limit the amount of fallback fonts to resist fingerprinting. Long lists like these will get cut short. Text you intended to be monospace might not be rendered as such as the "monospace" at the very end was never reached.
• TacticalCoder 5y ago
  The typical font stacks IMO always forget to put "Liberation". For many Linux desktop users it's going to be the best available when Oxygen/Cantarell/Ubuntu aren't there. Many Debian users, for example, are going to have Liberation and not the others. It's sad that a fugly default is often going to be picked up for these users instead of Liberation. So: modern font stacks... Not bad, but not yet the panacea either (even for big websites who really should know better).
  • necovek 5y ago
    I prefer DejaVu family of fonts.
• city41 5y ago
  I am a firm believer in this and just using built in fonts in general. Users really don't care about fonts, they really don't. And if you really need a specific font for say a logo, use an SVG with the text converted to paths. But of course only do that in image type situations and provide alt text.
• racto 5y ago