14 ms·

System Font Stack

353 points by SenHeng 4y ago

tkanarsky 4y ago
I "discovered" this stack through VScode autocomplete when making my website several moons ago. It's a huge improvement in readability over the default serif font, and not much overhead is added!
hwc 4y ago
What's wrong with just using `sans-serif`, `serif`, and `monospace`?
- lelandfe 4y ago
  Imagine 10 pages of interface people talking about how mimicking standard OS controls allows blah blah – but IMO folks really just don't like how Arial and Times New Roman look.
leipert 4y ago
I assume the emoji fonts in Serif are there as fallback fonts because they are actually considered sans-serif?
- ushakov 4y ago
  emoji have their own font
  - hk__2 4y ago
    > emoji have their own font That’s not true. Emojis are Unicode characters just like `a` or `ß`. When I type <an emoji character> on my computer it doesn’t magically change font in the middle of the sentence; it’s just a character. edit: looks like HN stripped away my emoji.
    - Kwpolska 4y ago
      Emojis are Unicode characters, and some emojis appear in all sorts of fonts, but the more fancy emojis, as well as the color renditions of emojis, appear only in the system color emoji font. The font is changed in the middle of the sentence, as part of font fallback.
    - deleted 4y ago
      [deleted]
    - kevin_thibedeau 4y ago
      Your OS can magically change the font if a glyph isn't available in the current one.
    - recursive 4y ago
      > it doesn’t magically change font in the middle of the sentence It's not magic but it can happen. In fact, it usually does. Helvetica doesn't have emoji glyphs. Guess what happens if you drop an emoji in a block of text formatted with Helvetica?
    - jeroenhd 4y ago
      On my system I've manually updated the Noto Emoji font to get emoji 14 support because I'm not updating to Ubuntu 22.04 on my daily driver to get the new font support. Emoji are often rendered using the system's font fallback mechanism. When one font doesn't have the glyph required, another font that does have the glyph gets picked. Most fonts don't have glyphs for non-western scripts; there are only a few fonts out there that cover most of the Unicode standard, often made up of several fonts combined. You're not manually changing the font-face mid sentence, but when you use emoji the renderer is definitely switching fonts to one you didn't specify.
pvinis 4y ago
Smart and fun how -apple-system works. I wonder why this has not been a thing for windows and linux too, and have it aliased too. And while I wonder that, I thought of a weird alias.. firefox-system or chrome-system would be terrible.
- sophiebits 4y ago
  There is now “font-family: system-ui” though apparently it has a few issues: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/2017/systemui.html
  - pvinis 4y ago
    huh. interesting, thank you!
  - Kwpolska 4y ago
    caniuse shows green for all modern browsers, and this blog post from 2017 talks about Windows 7 and the Windows Classic theme. Where are the actual issues?
hk__2 4y ago
[meta: This should have (2021) in the title.] If you don’t care about having the same font on all devices, what’s the point of this: > font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; versus that: > font-family: sans-serif; ?
- deleted 4y ago
  [deleted]
- Kwpolska 4y ago
  The point of the system font stack is that your site’s typography resembles the typography of the entire platform. It might look differently on different platforms, but it matches the platform you’re on. Sans-serif will get you ugly fonts, such as Arial on Windows, and likely DejaVu Sans or Liberation Sans on Linux.
  - chrisco255 4y ago
    But you're not on that platform. You're on the browser. And short of every other web site adopting this stack (not gonna happen), it will just look weird, like an uncanny web site trying to look more native without being native at all.
  - codedokode 4y ago
    Using different fonts on different platforms will be a problem for design because those fonts have different metrics, different character height and different optimal line interval, for example. Also, Arial is not ugly. It looks good on print.
    - Kwpolska 4y ago
      Arial is a cheap knock-off of Helvetica. Helvetica does look great in print or on high DPI screens, and Arial manages too, but it’s not so great if you’re dealing with a 96 DPI screen and small font sizes.
ushakov 4y ago
i can't stand Ubuntu's default rounded web font browser vendors should just include Inter and make it the default web font
api 4y ago
Another benefit: no tracking. Google Fonts and many other font hosts use their free service as a way to track people across the web.
- ushakov 4y ago
  there's a very handy tool, called google webfonts helper, which that can download and include google fonts for you https://google-webfonts-helper.herokuapp.com/fonts https://google-webfonts-helper.herokuapp.com/fonts
  - elondaits 4y ago
    Google Fonts are also available through npm to host them locally.
    - sphars 4y ago
      One such set of packages I've used is Fontsource. Has all the Google fonts plusany more. https://fontsource.org/ https://fontsource.org/
Kwpolska 4y ago
Oddly enough, the page doesn’t use the font stack it proposes. They moved Segoe UI to the end of the list, before Arial, so Windows users who installed Roboto will see Roboto instead.
- anaisbetts 4y ago
  Yep, on my Windows 11 machine these fonts are rendering as Arial, which is most definitely _not_ the System UI font. I would definitely consider an alternative to this stack.
- tmcw 4y ago
  This is fixed. It's a side project I did in 2018 that I didn't realize would meet with the scrutiny of the orange site four years later.
CosmicShadow 4y ago
I'm kind of confused as to why they don't have a demo showing all the fonts. I'm not just going to blindly pick from system fonts, I want to choose which I prefer first. Yeah I could look them all up, but just seems like they missed showing off the core thing...
- seanwilson 4y ago
  I'm guessing license issues would be a problem. Roboto wouldn't be an issue, but I'm pretty sure Microsoft's and Apple's default font files require a license to host.
  - guerrilla 4y ago
    I'm sure a screenshot would suffice
  - leodriesch 4y ago
    Yes, but they could demo the serif stack for your current OS.
- Kwpolska 4y ago
  That’s not the point. This is supposed to be a stack that gets you the system font on Windows, Android, Apple platforms, and maybe Ubuntu. It looks the same way the rest of the OS does, unless the user did something weird (eg. install Avenir on Windows).
- tmcw 4y ago
  I wanted to do this but it was a lot of work. It's an open source project, though, so…
swyx 4y ago
I collect these things for fun and one of my big discoveries is that there's no "standard" system font stacks - here are my list of system font stacks and their sources: https://github.com/sw-yx/spark-joy/blob/master/README.md#fonts https://github.com/sw-yx/spark-joy/blob/master/README.md#fon... some of them even come with annotations as to why they make the choices they make. Github's font stack is font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; VS Code: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif probably more "native" on mobile: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif; apparently all modern browsers have this new shortcut that make it as simple as: font-family: ‘system-ui’, sans-serif; https://chromestatus.com/feature/5640395337760768 https://chromestatus.com/feature/5640395337760768
- madeofpalk 4y ago
  It's surprising the site doesn't mention the actual, official standard `system-ui` font alias. font-family: system-ui, -apple-system, sans-serif; Is really all you need these days. That covers all modern browsers, and older browsers will just fall back to whatever sans-serif is.
  - lelandfe 4y ago
    > Never, ever use system-ui as the value of font-family > It turns out that the value of system-ui in fact not only depends on the version of the current OS, but the language of the OS as well. https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/2017/systemui.html
    - anaisbetts 4y ago
      This is done in order to mitigate Han Unification - I suspect on OSs that aren't ancient this is probably Fine, but if you have a huge userbase like Bootstrap you probably need to support these people
mproud 4y ago
I don’t understand. Many of these fonts are very different from one another.
- tobr 4y ago
  The systems are also different, so that’s expected?
cyril_st_john 4y ago
Please don't use this. -apple-system & BlinkMacSystemFont are OK but after that it's just a scattershot list of guesses that will often be wrong. I have most of the fonts in this stack installed on my Linux desktop for various reasons and none of them are the system font. Just fall back to sans-serif for now and adopt future -apple-system equivalents as they become available.
- TacticalCoder 4y ago
  > but after that it's just a scattershot list of guesses that will often be wrong. What do you mean? If it's wrong, the font ain't there. If the font is there, it's the correct font (according to the desire of the one who made the stack). If my stack has "Liberation Sans", it means that if your system has Liberation Sans, then it's going to be used. And it's very often better than the default system font ("Deja Vu Sans", for example, is a typical fallback on Linux and sucks big times compared to Liberation Sans and compared to many other sans-serif fonts). The way I see it that's the entire point of these "scattershot list of guesses": you can put several, it absolutely doesn't matter. The goal is to find one that matches before falling back to the default.
  - thrdbndndn 4y ago
    People can manually install these fonts for whatever reason (I have some for my Photoshop use) while don't want them as the "system font" (because they're not for their OS).
- incrudible 4y ago
  This is not about literally displaying the system font, but about displaying a reasonably appealing font that is already installed. I could not possibly care less about whatever questionable system choice for sans serif some random Linux user makes.
eschaton 4y ago
Why not just let the browser use what its developers feel are most appropriate for serif, sans serif, and monospaced fonts, and avoid specifying specific fonts at all? We’re talking about web pages, not a magazine.
- kevincox 4y ago
  This is exactly my thought. Why make every website specify `system-ui` to look nice? Why not just make it the default? I'm struggling why we need system-ui, ui-serif, ui-sans-serif... When we already have initial, serif, sans-serif...
  - quickthrower2 4y ago
    I imagine it is backwards compat.
- SenHeng 4y ago
  Because there are pesky things like Corporate Branding and designer preferences. Should we restrict every digital text to Times New Roman only?
  - chipotle_coyote 4y ago
    Whever font discussions come up on Hacker News, asking a question like that is risky, because a lot of people will (at least profess to) not only sincerely answer "yes" but be very, very insistent that web designers should not be able to even suggest the typeface that their pages use. When you press them on this point, at least a small subset of them will go on to explain why all design is bad and image support was probably a mistake.
    - eschaton 4y ago
      Giving so-called designers a bunch of tools to make every web page behave differently and taking the design choices away from browser and platform vendors absolutely was a mistake and you can see it really clearly when you look at application design in the mid-1980s to mid-1990s versus the mid-1990s to now “designers get to do whatever they want” era of suck.
vishnumohandas 4y ago
Related story: https://ente.io/blog/tech/system-fonts/ https://ente.io/blog/tech/system-fonts/ system-ui[1] deserves a mention, but OP's proposal is more thorough as it covers the Serif and Mono families. [1]: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui
bufferoverflow 4y ago
I'm actually dealing with the massive font differences that break the designs, and I don't know how to solve it. The designer specced the fonts that are available on different OSes. Something like font-family: X, Y, sans-serif;. The problem is, X and Y have different line heights and different widths. And there's no CSS / media query way to detect which font is available. So far I'm leaning towards a very ugly solution: rendering a test string into a DIV, measuring it, and then applying the correct class to the parent element.
- kevin_thibedeau 4y ago
  Stop trying to enforce pixel perfect control. This is equivalent to old school Win32, VB6 GUIs with hardcoded pixel positioning of all controls designed to work on a 640x480 screen. Web technologies are designed to accommodate flexible layout. Accepting font rendering differences is part of that.
  - bufferoverflow 4y ago
    It's not even about being pixel perfect. I can't vertically align text with an image. If I align it with one font, the other one is misaligned. I need something like media query for fonts.
    - kevin_thibedeau 4y ago
      You just need flexbox or construct an SVG. Let the divs size themselves to the font and allow the browser to put them where they're told to go.
      - bufferoverflow 4y ago
        I don't see how flexbox solves this problem. Just because you vertically center text, doesn't mean that the visible text is actually centered. It depends on the font.
      - bufferoverflow 4y ago
n0w 4y ago
`system-ui` can be useful on modern browsers and I'm looking forward to more browsers adding support for the `ui-*` variants: https://caniuse.com/extended-system-fonts https://caniuse.com/extended-system-fonts
- codedokode 4y ago
  No, this is bad because it provides additional signal for fingerprinting. I don't like this.
  - duskwuff 4y ago
    > No, this is bad because it provides additional signal for fingerprinting. Not really. The fonts selected by these font-family values should, at most, be dependent on the OS and language of the host system -- which are already easy to detect.
    - codedokode 4y ago
      OS should not be detectable. There is no need for a marketing agency to know what OS you are using.
      - vulcan01 4y ago
        The User-Agent string already has your OS in it. Or have you customized your browser to randomize that as well?
        codedokode 4y ago
        That is easily changed via settings and I hope that browser developers will "freeze" it in future so that it always reports Windows 10 (which was promised to be the final version of Windows).
  - d12bb 4y ago
    One can already easily get a list of fonts installed on the system…
codedokode 4y ago
While using local fonts is generally a good idea, this provides a reliable signal for fingerprinting. Therefore I would prefer that every major browser (Safari, Chrome and Firefox) ships its own reasonably chosen set of fonts and doesn't access system fonts (however the user may grant access to system fonts if they are fine with fingerprinting). This could also simplify web design because now there will be a somewhat standartized set of fonts.
- lelandfe 4y ago
  Believe it or not, what you describe is already in place for Firefox and Chrome! Chrome has a proposal for an API to handle this instead: https://chromestatus.com/feature/6234451761692672 https://chromestatus.com/feature/6234451761692672 And more info here: https://web.dev/local-fonts/ https://web.dev/local-fonts/
  - codedokode 4y ago
    Good to know it, but this is not enough. Browsers should not provide access to local fonts by default because it allows to identify an OS. Therefore, the only sane solution seems to bundle necessary fonts with a browser. Of course, browser should use its own font rendering library instead of using a system one. Of course, for browsers that target a single platform (like Safari which is available only on MacOs) this is not an issue, but Chrome or Firefox might be used on many platforms, like Windows 8, Windows 10, Windows 11, Debian, Ubuntu, FreeBSD, Plan 9, Chrome OS and so on.
    - cpeterso 4y ago
      Chrome's Local Font Access API allows web content to enumerate the names and meta data of local fonts, but doesn't block web content from guessing local font names (e.g. for fingerprinting). The use case is web apps like Figma that want to allow designers to use specific local fonts (such as custom or licensed fonts) in design documents.
- Kwpolska 4y ago
  Safari refuses to use locally-installed non-standard fonts to render web content. You’re stuck with the fonts Apple ships, or web fonts.
TacticalCoder 4y ago
It's great to see that "Liberation Mono" is added (it's a great font family available on some Linux systems, some of which may not have Ubuntu). But please always add "Liberation Sans" and "Liberation Serif" to the other stacks too. You risk nothing doing it and they render very well when present (says "Liberation Sans" renders better than the default sans-serif this stack would fall back to).
kitsunesoba 4y ago
System font stacks are great what I’d like more are similar “magic” values to system-ui that provide reasonably metrics-matched local fonts. The biggest reason I use system font stacks is not as much to look native as it is to try to have similar text metrics across platforms without the overhead and quirks brought by webfonts. The system font does bring some advantages though, like on macOS/iOS where that font is San Francisco, it’s designed specifically to look good and read well on screen. Under WebKit you even get hand-tweaked letterforms, metrics, and kerning for different combos of size, weight, and context (title, subtitle, body, etc). Something that would be really cool is if all browsers did what Apple is doing with San Francisco by shipping with a FOSS screen-oriented font like Inter UI[0]. [0]: https://rsms.me/inter/ https://rsms.me/inter/
thrdbndndn 4y ago
Is there a reason the site itself does not use the rule it says? The one in article is -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; The one it actually uses is -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif It looks like a minor difference, but the former one has segoe ui before helvetica (which is hard-coded as Arial alias on Windows), so it would use segoe ui on Windows; while the latter (currently using) one would show the content as Arial on Windows.
- kijin 4y ago
  There was a time when Helvetica crapped out spectacularly in Windows with a certain combination of user-installed fonts. Can't remember exactly which combination it was or perhaps still is, but anyway that was a pretty solid reason for prioritizing Windows default fonts over Helvetica. Maybe someone pointed that out to the author who changed the content but didn't really test it on their own site.
  - montag 4y ago
    Back in my day, if you had Helvetica installed on Windows, it wasn’t made for screen rendering and looked terrible. I remember putting Windows-friendly fonts higher in the stack for that reason
    - cpeterso 4y ago
      IIRC, most Helvetica fonts on Windows computers were installed by Adobe applications, which might explain why the fonts were designed for print instead of screen rendering.
deleted 4y ago
[deleted]
throwntoday 4y ago
I use a single font file and it is 230kb. I don't use heavy images anywhere on my website. I think I'd prefer to offer a consistent look across devices and OS than use inconsistent system fonts that all vary in size, spacing, and aesthetic.
- tgv 4y ago
  Exactly. What's so difficult about serving fonts with your pages?
draw_down 4y ago
jrochkind1 4y ago
Iowan Old Style?
- montag 4y ago
  It’s a great serif, introduced with macOS Catalina I think.
Vladimof 4y ago
I have too many fonts... what's your favorite font navigator?
NonNefarious 4y ago
I don't rely on pre-installed sans-serif fonts, because many of them suffer from a fundamental defect: no crossbars on the capital I. All fonts should clearly distinguish between a capital I and lower-case L.
b0ner_t0ner 4y ago
Segoe UI is such an underappreciated font.
shroompasta 4y ago
Ubuntu the best looking one. no bias.
pabs3 4y ago
I prefer that my browser show me the fonts that I prefer, so I tell it to do that instead of using web fonts and CSS font suggestions.
fevangelou 4y ago
IDEA: Browser vendors (or browser engines) should just agree on a bare minimum of modern fonts (the most used perhaps by websites?) and include them with their releases. Additionally, why not have a working group to deal with font upgrades for browsers as we have for CSS, JS (ECMA) standards and so on? And funded by the same billion dollar companies that build browsers... REALITY: The engineers who would eventually build all this just laugh and don't care. And HN will talk about this again next year.
chrismorgan 4y ago
I disagree with much of these stacks. I would scrap at least Avenir Next, Avenir, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial, Apple Garamond, Times New Roman, Droid Serif, Times, Source Serif Pro, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Monaco, Liberation Mono and Lucida Console, and probably a couple more, for one of three reasons: that the family is superfluous, for an obsolete platform, or inferior. —⁂— But as a consumer of the web, I personally don’t actually need to worry about these things any more, because I have my browser set to use my chosen sans-serif, serif and monospace faces (Equity, Concourse, Triplicate), and you can too! ① Use Firefox. Other browsers may have something similar; dunno; but Firefox is good anyway. ② Settings (about:preferences) → Fonts → Advanced → untick “Allow pages to choose their own fonts, instead of your selections above”. I started doing this a few months back as a week-long experiment, and found it so significantly improved the web that I’m not going back. (It did feel a little strange for a few days, as Concourse is a somewhat narrower sans-serif than the likes of Arial, but that’s about the specific fonts that I chose. Now it’s just perfectly natural.) I have experienced a very few icon-font related breakages, about which I wrote yesterday at https://news.ycombinator.com/item?id=31540234 https://news.ycombinator.com/item?id=31540234, but it’s surprisingly few given how popular the technique was for a few years. I also get a fair bit of bonus unintended serif from people that have neglected to add a generic font family fallback, or misspelled it (e.g. sans or "sans-serif" (quoted) instead of sans-serif), so that it falls back to the global default, which I have left as a serif.
- ayushnix 4y ago
  > ① Use Firefox. Other browsers may have something similar; dunno; but Firefox is good anyway. ② Settings (about:preferences) → Fonts → Advanced → untick “Allow pages to choose their own fonts, instead of your selections above”. I've been doing this for several years now and I love that Firefox can do this and Chromium can't. However, as you've mentioned, icons break on several websites including DuckDuckGo and rust mdbook (the search icon is replaced as "fl"). In addition, several websites assume that their monospace web font will always load and when it doesn't, code blocks are displayed in sans-serif fonts which is a huge turn off. I guess both of these issues happen because people assume everyone's using Chromium web browsers?
toastal 4y ago
Hard disagree. In most cases, just use the bases like sans-serif, serif, monospace, fantasy. If I'm not getting a tailored webfont appropriate for the site or a heavily curated font stack, I want the font for values I already specifically set in my browser. How is Times New Roman, Baskerville, Garamond, and Droid Sans all in the same serif stack? These hardly look alike. Arial and Ubuntu look nothing alike. If it's not in the same lineage don't include it, go with the default.
ChrisArchitect 4y ago
(2018)

353 points by SenHeng 4y ago

I "discovered" this stack through VScode autocomplete when making my website several moons ago. It's a huge improvement in readability over the default serif font, and not much overhead is added!

hwc 4y ago

What's wrong with just using `sans-serif`, `serif`, and `monospace`?

lelandfe 4y ago
Imagine 10 pages of interface people talking about how mimicking standard OS controls allows blah blah – but IMO folks really just don't like how Arial and Times New Roman look.

leipert 4y ago

I assume the emoji fonts in Serif are there as fallback fonts because they are actually considered sans-serif?

ushakov 4y ago
emoji have their own font
- hk__2 4y ago
  > emoji have their own font That’s not true. Emojis are Unicode characters just like `a` or `ß`. When I type <an emoji character> on my computer it doesn’t magically change font in the middle of the sentence; it’s just a character. edit: looks like HN stripped away my emoji.
  - Kwpolska 4y ago
    Emojis are Unicode characters, and some emojis appear in all sorts of fonts, but the more fancy emojis, as well as the color renditions of emojis, appear only in the system color emoji font. The font is changed in the middle of the sentence, as part of font fallback.
  - deleted 4y ago
    [deleted]
  - kevin_thibedeau 4y ago
    Your OS can magically change the font if a glyph isn't available in the current one.
  - recursive 4y ago
    > it doesn’t magically change font in the middle of the sentence It's not magic but it can happen. In fact, it usually does. Helvetica doesn't have emoji glyphs. Guess what happens if you drop an emoji in a block of text formatted with Helvetica?
  - jeroenhd 4y ago
    On my system I've manually updated the Noto Emoji font to get emoji 14 support because I'm not updating to Ubuntu 22.04 on my daily driver to get the new font support. Emoji are often rendered using the system's font fallback mechanism. When one font doesn't have the glyph required, another font that does have the glyph gets picked. Most fonts don't have glyphs for non-western scripts; there are only a few fonts out there that cover most of the Unicode standard, often made up of several fonts combined. You're not manually changing the font-face mid sentence, but when you use emoji the renderer is definitely switching fonts to one you didn't specify.

pvinis 4y ago

Smart and fun how -apple-system works. I wonder why this has not been a thing for windows and linux too, and have it aliased too. And while I wonder that, I thought of a weird alias.. firefox-system or chrome-system would be terrible.

sophiebits 4y ago
There is now “font-family: system-ui” though apparently it has a few issues: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/2017/systemui.html
- pvinis 4y ago
  huh. interesting, thank you!
- Kwpolska 4y ago
  caniuse shows green for all modern browsers, and this blog post from 2017 talks about Windows 7 and the Windows Classic theme. Where are the actual issues?

hk__2 4y ago

[meta: This should have (2021) in the title.] If you don’t care about having the same font on all devices, what’s the point of this: > font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; versus that: > font-family: sans-serif; ?

deleted 4y ago
[deleted]
Kwpolska 4y ago
The point of the system font stack is that your site’s typography resembles the typography of the entire platform. It might look differently on different platforms, but it matches the platform you’re on. Sans-serif will get you ugly fonts, such as Arial on Windows, and likely DejaVu Sans or Liberation Sans on Linux.
- chrisco255 4y ago
  But you're not on that platform. You're on the browser. And short of every other web site adopting this stack (not gonna happen), it will just look weird, like an uncanny web site trying to look more native without being native at all.
- codedokode 4y ago
  Using different fonts on different platforms will be a problem for design because those fonts have different metrics, different character height and different optimal line interval, for example. Also, Arial is not ugly. It looks good on print.
  - Kwpolska 4y ago
    Arial is a cheap knock-off of Helvetica. Helvetica does look great in print or on high DPI screens, and Arial manages too, but it’s not so great if you’re dealing with a 96 DPI screen and small font sizes.

ushakov 4y ago

i can't stand Ubuntu's default rounded web font browser vendors should just include Inter and make it the default web font

api 4y ago

Another benefit: no tracking. Google Fonts and many other font hosts use their free service as a way to track people across the web.

ushakov 4y ago
there's a very handy tool, called google webfonts helper, which that can download and include google fonts for you https://google-webfonts-helper.herokuapp.com/fonts https://google-webfonts-helper.herokuapp.com/fonts
- elondaits 4y ago
  Google Fonts are also available through npm to host them locally.
  - sphars 4y ago
    One such set of packages I've used is Fontsource. Has all the Google fonts plusany more. https://fontsource.org/ https://fontsource.org/

Kwpolska 4y ago

Oddly enough, the page doesn’t use the font stack it proposes. They moved Segoe UI to the end of the list, before Arial, so Windows users who installed Roboto will see Roboto instead.

anaisbetts 4y ago
Yep, on my Windows 11 machine these fonts are rendering as Arial, which is most definitely _not_ the System UI font. I would definitely consider an alternative to this stack.
tmcw 4y ago
This is fixed. It's a side project I did in 2018 that I didn't realize would meet with the scrutiny of the orange site four years later.

CosmicShadow 4y ago

I'm kind of confused as to why they don't have a demo showing all the fonts. I'm not just going to blindly pick from system fonts, I want to choose which I prefer first. Yeah I could look them all up, but just seems like they missed showing off the core thing...

seanwilson 4y ago
I'm guessing license issues would be a problem. Roboto wouldn't be an issue, but I'm pretty sure Microsoft's and Apple's default font files require a license to host.
- guerrilla 4y ago
  I'm sure a screenshot would suffice
- leodriesch 4y ago
  Yes, but they could demo the serif stack for your current OS.
Kwpolska 4y ago
That’s not the point. This is supposed to be a stack that gets you the system font on Windows, Android, Apple platforms, and maybe Ubuntu. It looks the same way the rest of the OS does, unless the user did something weird (eg. install Avenir on Windows).
tmcw 4y ago
I wanted to do this but it was a lot of work. It's an open source project, though, so…

swyx 4y ago

I collect these things for fun and one of my big discoveries is that there's no "standard" system font stacks - here are my list of system font stacks and their sources: https://github.com/sw-yx/spark-joy/blob/master/README.md#fonts https://github.com/sw-yx/spark-joy/blob/master/README.md#fon... some of them even come with annotations as to why they make the choices they make. Github's font stack is font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; VS Code: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif probably more "native" on mobile: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif; apparently all modern browsers have this new shortcut that make it as simple as: font-family: ‘system-ui’, sans-serif; https://chromestatus.com/feature/5640395337760768 https://chromestatus.com/feature/5640395337760768

madeofpalk 4y ago
It's surprising the site doesn't mention the actual, official standard `system-ui` font alias. font-family: system-ui, -apple-system, sans-serif; Is really all you need these days. That covers all modern browsers, and older browsers will just fall back to whatever sans-serif is.
- lelandfe 4y ago
  > Never, ever use system-ui as the value of font-family > It turns out that the value of system-ui in fact not only depends on the version of the current OS, but the language of the OS as well. https://infinnie.github.io/blog/2017/systemui.html https://infinnie.github.io/blog/2017/systemui.html
  - anaisbetts 4y ago
    This is done in order to mitigate Han Unification - I suspect on OSs that aren't ancient this is probably Fine, but if you have a huge userbase like Bootstrap you probably need to support these people

mproud 4y ago

I don’t understand. Many of these fonts are very different from one another.

tobr 4y ago
The systems are also different, so that’s expected?

cyril_st_john 4y ago

Please don't use this. -apple-system & BlinkMacSystemFont are OK but after that it's just a scattershot list of guesses that will often be wrong. I have most of the fonts in this stack installed on my Linux desktop for various reasons and none of them are the system font. Just fall back to sans-serif for now and adopt future -apple-system equivalents as they become available.

TacticalCoder 4y ago
> but after that it's just a scattershot list of guesses that will often be wrong. What do you mean? If it's wrong, the font ain't there. If the font is there, it's the correct font (according to the desire of the one who made the stack). If my stack has "Liberation Sans", it means that if your system has Liberation Sans, then it's going to be used. And it's very often better than the default system font ("Deja Vu Sans", for example, is a typical fallback on Linux and sucks big times compared to Liberation Sans and compared to many other sans-serif fonts). The way I see it that's the entire point of these "scattershot list of guesses": you can put several, it absolutely doesn't matter. The goal is to find one that matches before falling back to the default.
- thrdbndndn 4y ago
  People can manually install these fonts for whatever reason (I have some for my Photoshop use) while don't want them as the "system font" (because they're not for their OS).
incrudible 4y ago
This is not about literally displaying the system font, but about displaying a reasonably appealing font that is already installed. I could not possibly care less about whatever questionable system choice for sans serif some random Linux user makes.

eschaton 4y ago

Why not just let the browser use what its developers feel are most appropriate for serif, sans serif, and monospaced fonts, and avoid specifying specific fonts at all? We’re talking about web pages, not a magazine.

kevincox 4y ago
This is exactly my thought. Why make every website specify `system-ui` to look nice? Why not just make it the default? I'm struggling why we need system-ui, ui-serif, ui-sans-serif... When we already have initial, serif, sans-serif...
- quickthrower2 4y ago
  I imagine it is backwards compat.
SenHeng 4y ago
Because there are pesky things like Corporate Branding and designer preferences. Should we restrict every digital text to Times New Roman only?
- chipotle_coyote 4y ago
  Whever font discussions come up on Hacker News, asking a question like that is risky, because a lot of people will (at least profess to) not only sincerely answer "yes" but be very, very insistent that web designers should not be able to even suggest the typeface that their pages use. When you press them on this point, at least a small subset of them will go on to explain why all design is bad and image support was probably a mistake.
  - eschaton 4y ago
    Giving so-called designers a bunch of tools to make every web page behave differently and taking the design choices away from browser and platform vendors absolutely was a mistake and you can see it really clearly when you look at application design in the mid-1980s to mid-1990s versus the mid-1990s to now “designers get to do whatever they want” era of suck.

vishnumohandas 4y ago

Related story: https://ente.io/blog/tech/system-fonts/ https://ente.io/blog/tech/system-fonts/ system-ui[1] deserves a mention, but OP's proposal is more thorough as it covers the Serif and Mono families. [1]: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui

bufferoverflow 4y ago

I'm actually dealing with the massive font differences that break the designs, and I don't know how to solve it. The designer specced the fonts that are available on different OSes. Something like font-family: X, Y, sans-serif;. The problem is, X and Y have different line heights and different widths. And there's no CSS / media query way to detect which font is available. So far I'm leaning towards a very ugly solution: rendering a test string into a DIV, measuring it, and then applying the correct class to the parent element.

kevin_thibedeau 4y ago
Stop trying to enforce pixel perfect control. This is equivalent to old school Win32, VB6 GUIs with hardcoded pixel positioning of all controls designed to work on a 640x480 screen. Web technologies are designed to accommodate flexible layout. Accepting font rendering differences is part of that.
- bufferoverflow 4y ago
  It's not even about being pixel perfect. I can't vertically align text with an image. If I align it with one font, the other one is misaligned. I need something like media query for fonts.
  - kevin_thibedeau 4y ago
    You just need flexbox or construct an SVG. Let the divs size themselves to the font and allow the browser to put them where they're told to go.
    - bufferoverflow 4y ago
      I don't see how flexbox solves this problem. Just because you vertically center text, doesn't mean that the visible text is actually centered. It depends on the font.
    - bufferoverflow 4y ago

n0w 4y ago

`system-ui` can be useful on modern browsers and I'm looking forward to more browsers adding support for the `ui-*` variants: https://caniuse.com/extended-system-fonts https://caniuse.com/extended-system-fonts

codedokode 4y ago
No, this is bad because it provides additional signal for fingerprinting. I don't like this.
- duskwuff 4y ago
  > No, this is bad because it provides additional signal for fingerprinting. Not really. The fonts selected by these font-family values should, at most, be dependent on the OS and language of the host system -- which are already easy to detect.
  - codedokode 4y ago
    OS should not be detectable. There is no need for a marketing agency to know what OS you are using.
    - vulcan01 4y ago
      The User-Agent string already has your OS in it. Or have you customized your browser to randomize that as well?
      - codedokode 4y ago
        That is easily changed via settings and I hope that browser developers will "freeze" it in future so that it always reports Windows 10 (which was promised to be the final version of Windows).
- d12bb 4y ago
  One can already easily get a list of fonts installed on the system…

codedokode 4y ago

While using local fonts is generally a good idea, this provides a reliable signal for fingerprinting. Therefore I would prefer that every major browser (Safari, Chrome and Firefox) ships its own reasonably chosen set of fonts and doesn't access system fonts (however the user may grant access to system fonts if they are fine with fingerprinting). This could also simplify web design because now there will be a somewhat standartized set of fonts.

lelandfe 4y ago
Believe it or not, what you describe is already in place for Firefox and Chrome! Chrome has a proposal for an API to handle this instead: https://chromestatus.com/feature/6234451761692672 https://chromestatus.com/feature/6234451761692672 And more info here: https://web.dev/local-fonts/ https://web.dev/local-fonts/
- codedokode 4y ago
  Good to know it, but this is not enough. Browsers should not provide access to local fonts by default because it allows to identify an OS. Therefore, the only sane solution seems to bundle necessary fonts with a browser. Of course, browser should use its own font rendering library instead of using a system one. Of course, for browsers that target a single platform (like Safari which is available only on MacOs) this is not an issue, but Chrome or Firefox might be used on many platforms, like Windows 8, Windows 10, Windows 11, Debian, Ubuntu, FreeBSD, Plan 9, Chrome OS and so on.
  - cpeterso 4y ago
    Chrome's Local Font Access API allows web content to enumerate the names and meta data of local fonts, but doesn't block web content from guessing local font names (e.g. for fingerprinting). The use case is web apps like Figma that want to allow designers to use specific local fonts (such as custom or licensed fonts) in design documents.
Kwpolska 4y ago
Safari refuses to use locally-installed non-standard fonts to render web content. You’re stuck with the fonts Apple ships, or web fonts.

TacticalCoder 4y ago

It's great to see that "Liberation Mono" is added (it's a great font family available on some Linux systems, some of which may not have Ubuntu). But please always add "Liberation Sans" and "Liberation Serif" to the other stacks too. You risk nothing doing it and they render very well when present (says "Liberation Sans" renders better than the default sans-serif this stack would fall back to).

kitsunesoba 4y ago

System font stacks are great what I’d like more are similar “magic” values to system-ui that provide reasonably metrics-matched local fonts. The biggest reason I use system font stacks is not as much to look native as it is to try to have similar text metrics across platforms without the overhead and quirks brought by webfonts. The system font does bring some advantages though, like on macOS/iOS where that font is San Francisco, it’s designed specifically to look good and read well on screen. Under WebKit you even get hand-tweaked letterforms, metrics, and kerning for different combos of size, weight, and context (title, subtitle, body, etc). Something that would be really cool is if all browsers did what Apple is doing with San Francisco by shipping with a FOSS screen-oriented font like Inter UI[0]. [0]: https://rsms.me/inter/ https://rsms.me/inter/

thrdbndndn 4y ago

Is there a reason the site itself does not use the rule it says? The one in article is -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; The one it actually uses is -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif It looks like a minor difference, but the former one has segoe ui before helvetica (which is hard-coded as Arial alias on Windows), so it would use segoe ui on Windows; while the latter (currently using) one would show the content as Arial on Windows.

kijin 4y ago
There was a time when Helvetica crapped out spectacularly in Windows with a certain combination of user-installed fonts. Can't remember exactly which combination it was or perhaps still is, but anyway that was a pretty solid reason for prioritizing Windows default fonts over Helvetica. Maybe someone pointed that out to the author who changed the content but didn't really test it on their own site.
- montag 4y ago
  Back in my day, if you had Helvetica installed on Windows, it wasn’t made for screen rendering and looked terrible. I remember putting Windows-friendly fonts higher in the stack for that reason
  - cpeterso 4y ago
    IIRC, most Helvetica fonts on Windows computers were installed by Adobe applications, which might explain why the fonts were designed for print instead of screen rendering.

deleted 4y ago

[deleted]

throwntoday 4y ago

I use a single font file and it is 230kb. I don't use heavy images anywhere on my website. I think I'd prefer to offer a consistent look across devices and OS than use inconsistent system fonts that all vary in size, spacing, and aesthetic.

tgv 4y ago
Exactly. What's so difficult about serving fonts with your pages?

draw_down 4y ago

jrochkind1 4y ago

Iowan Old Style?

montag 4y ago
It’s a great serif, introduced with macOS Catalina I think.

Vladimof 4y ago

I have too many fonts... what's your favorite font navigator?

NonNefarious 4y ago

I don't rely on pre-installed sans-serif fonts, because many of them suffer from a fundamental defect: no crossbars on the capital I. All fonts should clearly distinguish between a capital I and lower-case L.

b0ner_t0ner 4y ago

Segoe UI is such an underappreciated font.

shroompasta 4y ago

Ubuntu the best looking one. no bias.

pabs3 4y ago

I prefer that my browser show me the fonts that I prefer, so I tell it to do that instead of using web fonts and CSS font suggestions.

fevangelou 4y ago

IDEA: Browser vendors (or browser engines) should just agree on a bare minimum of modern fonts (the most used perhaps by websites?) and include them with their releases. Additionally, why not have a working group to deal with font upgrades for browsers as we have for CSS, JS (ECMA) standards and so on? And funded by the same billion dollar companies that build browsers... REALITY: The engineers who would eventually build all this just laugh and don't care. And HN will talk about this again next year.

chrismorgan 4y ago

I disagree with much of these stacks. I would scrap at least Avenir Next, Avenir, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial, Apple Garamond, Times New Roman, Droid Serif, Times, Source Serif Pro, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Monaco, Liberation Mono and Lucida Console, and probably a couple more, for one of three reasons: that the family is superfluous, for an obsolete platform, or inferior. —⁂— But as a consumer of the web, I personally don’t actually need to worry about these things any more, because I have my browser set to use my chosen sans-serif, serif and monospace faces (Equity, Concourse, Triplicate), and you can too! ① Use Firefox. Other browsers may have something similar; dunno; but Firefox is good anyway. ② Settings (about:preferences) → Fonts → Advanced → untick “Allow pages to choose their own fonts, instead of your selections above”. I started doing this a few months back as a week-long experiment, and found it so significantly improved the web that I’m not going back. (It did feel a little strange for a few days, as Concourse is a somewhat narrower sans-serif than the likes of Arial, but that’s about the specific fonts that I chose. Now it’s just perfectly natural.) I have experienced a very few icon-font related breakages, about which I wrote yesterday at https://news.ycombinator.com/item?id=31540234 https://news.ycombinator.com/item?id=31540234, but it’s surprisingly few given how popular the technique was for a few years. I also get a fair bit of bonus unintended serif from people that have neglected to add a generic font family fallback, or misspelled it (e.g. sans or "sans-serif" (quoted) instead of sans-serif), so that it falls back to the global default, which I have left as a serif.

ayushnix 4y ago
> ① Use Firefox. Other browsers may have something similar; dunno; but Firefox is good anyway. ② Settings (about:preferences) → Fonts → Advanced → untick “Allow pages to choose their own fonts, instead of your selections above”. I've been doing this for several years now and I love that Firefox can do this and Chromium can't. However, as you've mentioned, icons break on several websites including DuckDuckGo and rust mdbook (the search icon is replaced as "fl"). In addition, several websites assume that their monospace web font will always load and when it doesn't, code blocks are displayed in sans-serif fonts which is a huge turn off. I guess both of these issues happen because people assume everyone's using Chromium web browsers?

toastal 4y ago

Hard disagree. In most cases, just use the bases like sans-serif, serif, monospace, fantasy. If I'm not getting a tailored webfont appropriate for the site or a heavily curated font stack, I want the font for values I already specifically set in my browser. How is Times New Roman, Baskerville, Garamond, and Droid Sans all in the same serif stack? These hardly look alike. Arial and Ubuntu look nothing alike. If it's not in the same lineage don't include it, go with the default.

ChrisArchitect 4y ago

(2018)