Revised Font Stack | Hacker News Reader

Revised Font Stack

awayback.com

83 pointschaostheory9 comments

I might be daft, but this article doesn't explain (and seems to assume it's perfectly obvious) why in the world you should use

    Arial, sans-serif

instead of:

    sans-serif

at the bottom of a stack. If I am on a platform where Arial looks OK, it should already be my default sans-serif font, right? Currently, I have Arial installed, but I've set my default sans-serif font to DejaVu Sans Mono, which (subjectively) looks better on freetype. But most sites force Arial. It seems like a cargo-cult sort of thing.

This problem is worse with monospace fonts (even more subjectively, I am practically allergic to Courier New).

You should stick Arial at the bottom if your first-choice font is something similar in x-height and design sensibility, because it will make your site stay more consistent in design. If your first-choice font is a completely unrelated sans-serif, then there's no reason to put Arial at the end.

Thus, you’ll notice that in this particular article, Arial is at the end of the “Helvetica” stack, but not at the end of the “Gill Sans” stack.

Also, DejaVu Sans Mono is never going to keep design continuity with the site’s intended sans-serif font, because it’s monospace.

Problems with x-height is the first thing that popped into my mind when reading this article. Some fonts, even if they're both old roman fonts, will have dramatically different sizes: higher x-height, wider, thicker, etc. Just putting together a list of serif fonts doesn't necessarily produce good end results unless your design is totally fluid.

Erm, sorry, I just meant DejaVu Sans. But I do appreciate that its metrics are still different from Arial. Is that important in every application? Maybe.

Well, I think a lot of times you’re right, the “Arial” at the end is just cargo-cultism, and should be scrapped; blame copy-pasta.

But yes, I think it’s completely reasonable to have a design request Helvetica but fall back on Arial: to the regular reader the two look pretty much the same, which means that the design will stay working, both in layout and style, as the designer intended.

If I am on a platform where Arial looks OK, it should already be my default sans-serif font, right?

Well, the thing about designers is that they don't trust the end user. In their minds, if the end user were put in charge, 90% of the web would end up as Comic Sans MS.

If you want to force the issue, you can use a user-defined CSS file to override some font settings.

Thanks for this! I've used 'Better CSS Font Stacks' as my primary reference for a while. It's nice to have another, and it's extremely nice to be able to see some numbers about font presence on OS X/Windows.

(Better CSS Font Stacks: http://unitinteractive.com/blog/2008/06/26/better-css-font-s... -- the PDF they link to at the end is highly recommended.)

If you're bothered enough to do this sort of analysis on the display font wouldn't you choose an @font-face font?

There’s nothing stopping you from putting one of those first, right? Either way, you should be careful about the fallbacks.

It’s impossible for an article like this to discuss the proper stack for every possible @font-face typeface you could choose.

Reply on news.ycombinator.com