Hacker News Reader

Comment by toastal | Hacker News Reader

Quick fix:

  - .sans-serif {
  -   font-family: -apple-system, BlinkMacSystemFont,
  -                'avenir next', avenir,
  -                helvetica, 'helvetica neue',
  -                ubuntu,
  -                roboto, noto,
  -                'segoe ui', arial,
  -                sans-serif;
  - }
  + .sans-serif { font-family: sans-serif; }

I already set my preferred sans serif in my user agent; if you don’t care enough about the design to provide a real font stack, I don’t need your site trying to override my preferred default with Ubuntu, Roboto, or ugh Arial. If you just want something sans serif, please just fall back to the user agent so users can define the value.

View on HN

I believe the issue with this is that the font that the browser picks with “sans serif” can vary wildly depending on the user’s system, with totally different metrics, weights, etc, meaning that the page might look anywhere between passable and broken. The most egregious case of this is probably on some of the more “libre” type Linux distributions that default to that one oddly wide sans serif that I can’t remember the name of.

The idea of user configurability is nice but most users have no idea how to do that or that it’s even possible, and browsers bury these settings increasingly more deeply which doesn’t help matters either.

The other side of that coin is that Nimbus (if it's installed) will happily insert itself as an alternative to Arial and/or Helvetica (cannot remember), even though it's a trash typeface with a broken baseline.

I think just going with sans-serif is the better choice.

It’d be nice if something like Inter[0], which is specifically designed for onscreen/UI usage, were bundled with each OS and could be assumed to be present, making it unnecessary to include Arial or Helvetica in one’s stack.

[0]: https://rsms.me/inter/

This makes more sense why Tailwind chose Inter as their default font (for at least a long time). I've noticed tons of sites now use Inter as a result of using Tailwind and derivatives. I think Laravel did some level of popularization of this too

Then put the desired typeface at the beginning of the stack, and the generic (sans-serif) at the end.

I've never had a designer ask for 17 fallback options before selecting a generic (like this font stack).

> The idea of user configurability is nice but most users have no idea how to do that or that it’s even possible

No need to baby users. In the context of Hacker News, a lot of the websites built here are demo sites/documentation where the audience is definitely technical enough to not need this.

In the case of libre, Free Sans is a clone of Helvetica (as is Nimbus) & they are usable if a user decides to set them as their preferred font (or a fallback in fontconfig).

Ah, the age-old battle between some many designers who want their output to be “just so” and some people who have a strong preference for what they read to be “just thus”!

Perhaps there is room for new preferred-sans-serif-font, preferred-serif-font and preferred-mono-font aliases that we can shove at the top of font stacks like this and are set by the user if they wish (defaulting to nothing if they don't). That way people with a strong preference get listened to if they set this, so you can have other fonts installed for compatibility with documents written by others you collaborate with without them overriding your preference which is otherwise further down the list. Though that might be impractical: you need to convince browsers to implement the setting and designers to add it to the top of their stacks. The browser makers are not always fast to implement things until there is demand and there might not be demand because no one tries to use it while browsers don't support it. That and many designers may think “let the user pick the typeface, eeewwwwww!” & similarly browsers those packaging browsers for their OS might implement it wrong (putting something in those settings by default instead of them being blank unless specified). It could be described as an accessibility issue to get more traction, allowing users with certain vision issues to specify typefaces (and maybe other properties like minimum sizes & weights) that improve readability for those with their condition.

If a designer wants something “just so”, they would have included a @font-face. This sort of font stack is usually mislabeled something along the lines of “system font” (hence it just being labeled sans-serif unlike the specific font face fallbacks). Instead we see a cascade of ‘find something that looks a bit Grotesk per platform’ which may not be the type of sans serif the user wants. And that’s the problem: if you wanted a system font, just ask the system.

I actually don’t mind something designed with purpose & has a reasonable font stack to match it, but this stack isn’t that.

Unfortunately you can't just ask the system, because browsers don't consistently use the system font, or otherwise make good choices, for system-ui.

Using a system font stack isn't about “a typeface that is a bit Grotesk” and more about trying to integrate with the look of the users OS. Including a @font-face will not achieve that version of “just so” unless you want to mimic one OS for everyone.

I think you’re misinterpreting what’s going on here. That looks like a backwards compatibility replacement for the standard font-family: system-ui; CSS rule. They aren’t trying to force you to view Roboto. They are trying to tell the web browser to use the standard font for the platform.

-apple-system will give San Francisco on Apple systems. BlinkMacSystemFont will do the same in Chrome. Roboto is the Android default font. And so on. Since most people don’t typically have the default system font for other platforms installed, a rule like this will typically give the same font that is used everywhere else in the platform.

Web browsers don’t typically use the standard font for the platform for backwards compatibility reasons, which is why system-ui was created. Older browsers don’t support system-ui, so tools like PostCSS will often replace it with a stack like this in an attempt to get the same behaviour in older browsers.

This basically boils down to somebody saying “let’s use the standard font for the platform the user is using”.

> This basically boils down to somebody saying “let’s use the standard font for the platform the user is using”.

Exactly. This is what system-ui should be but some browsers instead default to something else, perhaps in a misguided effort to make their UA look consistent between platforms, to many use a font-list like the above to try enforce what system-ui should be. Unfortunately it falls apart if the user has fonts for other systems installed (perhaps for compatibility with others they collaborate with on documents, or to be able to view HTML more exactly as those users will see it) and those users get someone else's system font instead because it is ahead of thiers in the list.

It’s a weird game of whack-a-mole where it solves a problem for some while creating new problems for others. That’s why it’s best to just save the bits & ask the UA.

System defaults can be ugly sometimes. Sometimes user might set their default font to something like Comic Sans or Papyrus accidentally or not and have no clue how to fix it. Users are really, really dumb. I wouldn't like my designed website to look like trash because the user wants to bring their ugly font, I want it to be consistently classic book sans-serif. Any time of the day I'd choose Segoe UI over Arial or god forbid Verdana. Hence that line and https://systemfontstack.com/ exist. The latter one is, by the way, always in my toolkit.

My website, my design. my fonts. Period.

Some people, believe it or not, actually like Comic Sans.

Their device, their preferences, their fonts. Period.

It’s not uncommon for people with dyslexia to use Comic Sans because some of them find it easier to read.

However pretty much every website specifies which font to use. If you want your own font, you aren’t going to get it by complaining about one particular CSS framework. There’s a way of overriding fonts in every browser; find that and you’ll get what you want.

Opinionated design is design.

Reply on news.ycombinator.com