We've been asked why different parts of the responsive design site theme have noticably different fonts on some sites:
As you can see, the logo and the question titles are in a serif font and everything else is sans serif. You might not notice the discrepancy the first time you look, but once it's been pointed out, it's hard not to see it every time. It might even look like a bug, but this is by design.
Most sites (including beta sites) don't have serif fonts at all. For those sites, all text uses the same font family. Only on sites that use serif for posts, such as English, Christianity and Mi Yodeya, is there something to be noticed. So why do some sites use serif fonts at all? In short:
Typography exists to honor content.—Robert Bringhurst, The Elements of Typographic Style
For sites with longer passages of text and that have strong historical roots in classic book design, a serifed font suits the content. Most sites, following the lead of Stack Overflow, have shorter chunks of text that are likely interspersed with code samples and have more modern sensibilities. For them, unserifed fonts fit the bill.
If you look at a question page, which features actual content, you'll see much more of the text is set in a serif font:
Since most visitors come to Stack Exchange sites as the result of specific queries, a question page will greet people with more content presented in a font appropriate for topic. In this view, it's a bit more clear the rest of the text serves as user interface. Sans serif fonts tend to be more appropriate for isolated bits of text, especially on smaller screens:
When considering the decision to standardize on sans serif fonts for UI, it helps to recall that our goals include paying off technical debt. A really common way to refactor messy code is to move commonly used values (such as
Arial, "Helvetica Neue", Helvetica, sans-serif) into a constant. Not only does that allow global changes of the value, the code is easier to understand. Three
font-family constants are now defined in Stacks, our CSS and Pattern library.
Another goal of the new themes is to allow all our sites to scale to whatever size window might be convenient for you. As I already alluded, some fonts scale down better than others. Standardizing on a relatively small set of font faces allows design elements to be resized and moved around without having to worry so much about text becoming illegible. It's particularly important that text isolated from context, which includes most UI elements, be clear at a glance. It might not be consciously noticeable, but tiny frustrations can add up in the unconscious and make using the site less enjoyable.
Now there remains one downside, depending on how you view the network. By standardizing on the same sans serif fonts for interface elements, all the sites on the network will look more like other sites on the network. From a usability point of view, that's not a bad thing. (In my job as a community manager, I appreciate that it's easier to identify navigation controls.) But that comes at a cost. Communities get a measure of identity from unique features of their design, so the more we standardize, the less there is to distinguish one site from the rest.
There's a further consideration: we'd rather not have arguments about which font face should be used. There's no real consensus about sans vs. serif and it generally comes down to individual preference. Certainly when it comes to your content, the community's preference should take precedence. (Though my suggestion to use Papyrus for Biblical Hermeneutics was shot down for some reason.) But I think it's rational to let our designers manage the user interface that surrounds your content.
Arial isn't exactly the ideal choice of a sans font if design were the only consideration. (It's just so bland by design.) But it does have several advantages over other sans serif fonts:
- Everyone already has the font, so it doesn't need to be downloaded for the page to render properly.
- It has a very complete character set.
- Unlike Helvetica, it's consistent across platforms. In particular, we know what x-height to count on.
Arial is everywhere, so does not draw special attention to itself. According to the font's foundry:
Arial is an extremely versatile family of typefaces which can be used with equal success for text setting in reports, presentations, magazines etc, and for display use in newspapers, advertising and promotions.
Choosing it is defensible, if not inspired.
After all the sites get the standard theme, we can actually consider a more interesting choice of fonts. (Hello Roboto?) It really depends on having a predictable framework for every site on the network before we can make that sort of choice.
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;(Helvetica Neue, a MacOS staple, is somewhat different, but you'll typically find on Windows systems that Arial and sans-serif will be identical. In any case, you see those so frequently because they are "web safe," meaning even the least savvy users will have them. They are fonts worthy of the name "fallback." Basically, my point is, try to use a headline font that has more weight . Even Verdana would be better than Arial.