Hacker News Reader

Comment by _fat_santa | Hacker News Reader

I have a question about system fonts. Whenever I declare system fonts I always use: `serif`, `sans-serif`, or `monospaced` rather than the actual fonts like:

```

font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;

```

Am I doing it wrong by declaring it just like `font-family: sans-serif`?

View on HN

The system font stacks are trying to target the fonts that the operating system uses by default (e.g., using San Francisco as the sans serif font on a Mac). If you just use "serif", "sans-serif", and "monospaced", you're targeting the fonts that the browser uses by default, which probably aren't the same fonts.

So, you're "doing it wrong" in the sense that you're not actually doing the same thing, but you're not wrong in some kind of cosmic sense. :)

(This does make me wonder for the first time why, when system font stacks started to become popular, browsers didn't just make the system fonts the defaults, though. Sure, it would mean that web pages that only specified "sans-serif" would change appearance between the old and new browser versions, but if they only specified "sans-serif" they were declaring "I don't care what font you give me as long as it's sans serif" anyway.)

Browsers "fixed" the problem by adding system-ui, ui-sans-serif and ui-serif.

I guess displaying an ugly font was important for backwards compatibility so instead of fixing millions of existing wrbsites they created new keywords that you need to opt into.

No, you're not doing anything wrong. In fact, you're giving users choice to use the fonts that they want, if they customize their fonts in their web browser. However, this choice comes at the cost of potentially ugly default fonts out of the box. Courier New, Times New Roman, Arial, for example. Of course, this is completely subjective.

Use `font-family: sans-serif` for your everything on your website except code blocks and inline code elements, which should use `font-family: monospace, monospace`. Yeah, you have to specify `monospace` twice. If you don't, monospace fonts will be unnaturally smaller than sans-serif fonts.

Please don't use serif fonts on your website, ever. Most people on the planet don't have a high resolution display and serif fonts look chipped and broken on those displays. Serif fonts make sense if you're using them inside a media query for print.

No, it's a matter of preference. The default fonts in some browsers are pretty ugly, so if you want at least a chance of getting a better font, you can use a stack like this. But it's fine if you don't.

> The default fonts in some browsers are pretty ugly

Is this really the case anymore these days? I think Firefox uses Courier New on Windows as the default monospaced font, but other than that I'm not aware of popular browsers using terrible fonts by default.

A nice aspect of using just serif or sans-serif is that users who configured their browser's font options get what they chose.

> I think Firefox uses Courier New on Windows as the default monospaced font

Actually, it was recently changed to use Consolas: https://bugzilla.mozilla.org/show_bug.cgi?id=1607913

Reply on news.ycombinator.com