HACKER Q&A
📣 fireattack

Why using “system font stack” when you can just use “sans-serif”?


I've read dozens of articles about how various websites set their "system font stack" up and tutorials on it [1-5].

From what I can see, the goal of "system font stack" is trying to use native system font when possible, particularly on mobile. And all these articles gave rationales about how it would be superior than some of the traditional stacks such as `font-family: "Helvetica Neue", Arial, sans-serif;`, which I fully agree.

However, none of them seem to address an obvious question: why not just use "font-family: sans-serif;"? The only discussion I found that is on a "notable enough" project is this issue on normalize.css repo: https://github.com/necolas/normalize.css/issues/665

-- By assigning only "sans-serif", it will fallback to exactly that: system's default (san-serif) font. For example, there is no need to manually assign, say, "Roboto" (a typical choice for any of these "system font stacks") on Android, to accomplish so: "sans-serif" uses Roboto already. Similar can be said for iOS etc.

Wikipedia (desktop version, not mobile version) perhaps is the only "notable" site I knew that uses simply "sans-serif", and it seems to work flawlessly for years, on all devices.

Another plus for just using "sans-serif" is that for ends that have finer control over fonts (such as desktop browsers), users can assign their own preferred fonts (therefore overriding the system default ones) and it will be immediately applied to the website. This won't happen for sites that have hard-coded fonts (including these "system font stacks").

Disclaimer: I'm not a designer, but a end-user who is relatively sensitive to fonts.

[1] https://woorkup.com/system-font/ [2] https://markdotto.com/2018/02/07/github-system-fonts/ [3] https://furbo.org/2018/03/28/system-fonts-in-css/ [4] https://support.zendesk.com/hc/en-us/articles/115012937927-About-the-system-font-stack [5] https://flaviocopes.com/css-system-fonts/

(Just search "system font stack to get more)


  👤 qwertee Accepted Answer ✓
Designer/Programmer for 20 years

System font stacks are a way to produce consistent designs across machines. You use them because you know for certain that a font is installed on a machine. This comes with some benefits. But the primary benefit would be maintaining a certain level of control of the brand/site.

By specifying "sans-serif" you are handing over the control of the font to the user. Now if I were to set my default font hypothetically to wingdings, The whole site becomes instantly unusable. That is an extreme for certain, but the point remains valid if I set it Comic sans because i like the look of it. The New York Times would lose the timeless feel and serious nature they have worked hard to evoke. If I changed it to Consolas I would throw the old and well established rules of typography like leading, kerning, line length and visual weight straight in the bin.

Many people may not think about those rules, because those rules are like special effects - when they are good, they are invisible. No one stops mid-page to remark how readable something is. Just like no one questions if an Apple store is an apple store. It just is, everything screams "Apple". But change the Apple stores primary colour from white to slightly grey and everything will feel slightly off. You mentioned Wikipedia uses "sans-serif" only yet wikipedia doesnt focus too much on brand or legibility of their content. They focus a lot on the quality of the content.

So thats the high-level take on why forcing a system font is preferable for designers, it provides a fairly predictable experience with some well designed default fonts that are already installed, without having to worry about unusual fonts breaking designs. Thinking too much about it is for big corporate site where there is money to care about such things. Often, a Corporate Identity comes down from Marketing and front end guys have to follow it to the letter.

(NB I have not mentioned my thoughts on RTL and international languages purely because I am not qualified to do so. Not an expert, just aware this is a massive problem on its own)

Having said all of that.. I personally think there is nothing wrong with "font-family: sans-serif;" and use it often.