Hacker News Reader

Comment by favourable | Hacker News Reader

This is a great project, but I learned to use a system font stack[0] instead to address latency issues on my sites. I run an e-commerce site and every millisecond in rendering time is potentially a lost sale. It needs to be fast, especially for those on 3G (or 2G?) connections.

[0] https://systemfontstack.com/

View on HN

The particular stacks advocated by that site aren’t particularly good (though they’re not all that bad either). It was discussed at https://news.ycombinator.com/item?id=31543054 a few weeks ago.

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.

Most actual versions of this kind of thing out in the wild have Roboto; what's your reasoning for wanting to exclude it? "Inferior"?

Superfluous: it’s there for Android, but I believe that sans-serif will normally resolve to that anyway.

(I’m not certain about that, and can’t confirm it as I don’t have ready access to Chrome on Android but I got the impression some years ago that Chrome on Android uses the system font, which is Roboto. But even apart from that, the general idea is “stop specifying specific fonts and let the browser do its thing and the user get their chosen fonts, unless what the browser does by default is too bad, like Courier New for monospace”.)

looks at Samsung and Chinese manufacturers having their own house fonts

... and now you know why Roboto is explicitly included - because sans-serif won't necessarily resolve to Roboto on an Android device.

Including its name doesn’t mean it’s available. Or that it should necessarily be used even if it is—when the purpose of including Roboto was to get a default font, you probably shouldn’t complain when you get a default font.

I see.

I suppose the reasoning behind having it might be that Android devices typically also have one of the fonts that appears lower in the stack, but before sans-serif... though that's not as likely if you're using a much smaller stack (also it's already quite near the end so... not sure why its typically used... could indeed be just trying to opt out of some manufacturers' undesirable alternative defaults, maybe).

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`?

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

This is my preferred solution too. It’s really not necessary to use custom fonts to achieve a nice design in most cases.

Except for Android, very poor default fonts.

They won't notice if your website looks bad: https://images.techhive.com/images/article/2014/04/customize...

Reply on news.ycombinator.com