5 ms·

>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 abo

>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
        "System font stack" — which I took to mean the longish list of commonly known default fonts for a bunch of OSes brought up earlier in the thread — with a CSS value of "sans-serif". There was no mention of direct use of Arial, Times New Roman or Courier that I could see, so I don't see why bring it up.
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.

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
        "System font stack" — which I took to mean the longish list of commonly known default fonts for a bunch of OSes brought up earlier in the thread — with a CSS value of "sans-serif". There was no mention of direct use of Arial, Times New Roman or Courier that I could see, so I don't see why bring it up.

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.