Why do some parts of the standard theme use different fonts than the rest of the site?

Question

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.

Technical addendum

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.

Answer 1

Thank you for posting, Jon. You’ve mentioned several issues,
and comments to your post have raised still more, so I’m going
to take this a little at a time. My first post addresses what
we’ve lost both in aesthetics and also technically compared
with our old setup.

Here in summary are my two points for this present post:

1. Under the new setup, serif sites no longer sport a coherent,
   unifying design. They look like accidental afterthoughts.
   They did not use to, and they do not need to.

2. By now rendering user content in Arial in so many
   new places, you create technical confusion because that
   face does a worse job at representing the IPA normally used
   to transcribe English than the previous serif choice did.

---

“Content” vs “Interface”: A false dichotomy

Every site is now a sans-serif one at its base, and all site-specific overrides for serif sites now occur much further down the CSS stack. Moreover, those targeted serif overrides are few and far between; most site elements have changed their previous serif character to sans-serif.

This changes the overall feel of the site a great deal. It used to be that a serif site was mostly serif except for a select few elements such as tags, user cards, and time stamps, or general navigation selectors like active, oldest, votes. The rest of a serif site was left in serif shape. This provided a serif site with a unified appearance that reinforced the overall aesthetic feel of that site. It made it look like the whole thing was designed to fit together, to “be a garment of one cloth woven”.

This overall coherence and balance no longer holds with your recent changes. Now it feels like a bland beta site with a few serif patches begrudgingly applied here and there. It’s no longer warm and inviting, but austere and artless, even off-putting in its haphazard application. The site’s connection to the centuries-old tradition of the printed word, of scholarship and of literature alike, has been frayed and patched over randomly.

This to me is that most important thing: the feel of the site is gone, replaced with computerese blandness. That’s the big thing. About little things I can show you technical deficiencies, but not about the big, overarching one. I cannot provide you with a “technical” justification for why you should not do this to the overall shape of the site. I can provide only an aesthetic argument about the way that the whole site looks when taken together.

I do not understand why you’ve done this, do not understand what problem it is you think you’re solving. You made a specific decision about where in the CSS stack you allow a site specify to specify that it’s a serif site versus a sans-serif one. You could easily allow the <body> element set to trickle down and inherit to most places the way you used to, overriding this only in select UI elements. But you did not: you’ve changed everything, and forced serif sites to override a few places far lower down. But you’ve missed a lot.

Why?

This does not seem deliberately done, but haphazardly. Consider what happens when a user asks a new question: you use the title to provide suggestions about related questions that may already have the answer.

Concrete Example 1

Why would you have deliberately changed this...

....to this?

Here there are both technical concerns and aesthetic ones, and in my opinion the aesthetic argument against doing this is the stronger of the two. It works against having a coherent character for the overall site. This looks the same as it would on a beta site, which is wholly without character.

The technical issue is that with this change you’re now displaying characters from the International Phonetic Alphabet using a sans face that wasn’t designed for it, which makes the text hard to read. This is not some UI element like a submit button or a badge count. This is user content, and it looks bad.

Can’t read ð

As just one example, the Arial face you’re preferentially using here uses a poorly rendered glyph for ð, which is U+00FC LATIN SMALL LETTER ETH. In Arial it’s a very “muddy” glyph, especially at the teensy-weensy 13-point size you’re using to render the suggested question titles (or for that matter the one you’re using for the box that the user enters their own question title in).

The suggested-question titles used to be the site’s thematic face, and now they are not. This breaks cohesion and makes IPA especially difficult to read. Is that really an eth or is it instead an o with a tilde? In Arial, it’s really hard to tell. When the two possibilties are juxtaposed, you can probably figure it out, but not in isolation. If you had placed Helvetica first before Arial, it would have been a lot easier to read. But there’s no reason that this user content shouldn’t be in the site’s theme face, which is Georgia. Here set at the 13 points you’re using are all three:

• Arial
• Helvetica
• Georgia

As you see, Arial comes out rock bottom between the three choices there. And eth is a very common character when representing English pronunciation, since it’s just the “voiced th” sound from the English word father.

The alienness of the question-asking page is even more notable when you zoom out a little and look at the entire framing. Here was the old version:

And here is the new one:

The new version is not only sterile and off-putting in comparison to the old version but also harder to read in places. I can understand why the edit box is using “the UI font” for things like Links and Images and Lists. Those are legitimate UI elements, and the contrast against the site theme’s face makes this clear. That didn’t change.

Only every single other piece of the page changed, and it changed to make it not look like the same site any longer. All the text is now in the austere sans, not in the site’s thematic face, the one that gives the site a link to the literary tradition of print publishing at its finest.

Now it just looks like a beige beta site. And one whose IPA is harder to read than it used to be.

Concrete Example 2

This happens all over the place. For example, it even happens on user profiles and activity pages. Here’s an example user activity page under the old system:

Notice how under the old system, UI elements were in sans but the rest of it, including most especially user content, was in the site thematic serif.

Whereas here is what it is now become:

Now you can’t even tell that you’re on ELU because you’ve changed the entire framing to be a sans. Sure, the UI elements are in sans, but so is everything else, even all that user content.

Why?

---

Summary

Under the new system, only sites that were previously sans-serif still have a balanced look that speaks to the tradition of the topic that the site is about. Serif sites are now second-class citizens, patchwork quilts made out of random bits; basically no more than a background that’s mostly sans with a few odd serif patches pasted on here and there. They are no longer coherent in their design or their aesthetics. They look like accidental afterthoughts. They did not use to, and they do not need to.

Moreover, in a great many places that you are now suddenly rendering user content not merely in sans not a serif but specifically in Arial. And Arial is a particularly bad choice because of the muddy glyphs which it uses for certain characters from the International Phonetic Alphabetic that are routinely used in transcriptions of English pronunciation.

That’s important to a site about English, even if it doesn’t matter much to programming sites.

Sure, leave UI elements in sans the way they always have been, but please return the site framing on serifed sites to serif so that they look like they were actually designed to look the way they look instead of looking like an afterthought that got casually bolted on after the fact. Also please render all the user content in serif so that we can read the IPA that is critical to our site.

You might also consider rearranging your UI font stack to place Helvetica before Arial. If nothing else, it means that people will someday be able to tell the difference between a future ð-vs-θ tag, a ð-vs-õ tag, and a õ-vs-ö tag. :)