8

We've been asked why different parts of the responsive design site theme have noticably different fonts on some sites:

English home page

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:

Actual content on Judaism

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:

Tiny phone screen

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.

  • If you're going for a more interesting family of fonts - I have very nice things to say about the source family of fonts, especially source sans and source code pro, as a dyslexic ;) – Journeyman Geek Sep 21 '18 at 20:49
  • 11
    "Sans serif fonts tend to be more appropriate for isolated bits of text, especially on smaller screens: [image]" — I don't really see this at all. Any novel will have chapter titles and small quotations in serifed text. The image looks rather ugly to me, especially the isolated header. Interface and content aren't really separate or isolated anyway: together, they are what you see, they are the page. Surely nobody would advocate ignoring the background colour of the main text when considering the colours of headers. But the main point is: English.SE is now beautiful. The new thing is...not. – Cerberus Sep 21 '18 at 21:27
  • 4
    P.S. I thought Georgia was available as a new standard font? P.P.S. The font is just one out of twenty+ or so things that aren't right with the new design. Have you looked at all the issues people mentioned here? (Also notice the 34 down-votes. This is creating quite a bit of negativity on several sites, at least as far as I know. Everyone I've spoken to (without my raising the issue) was very negative about the new design, on several sites, even beta ones. – Cerberus Sep 21 '18 at 21:30
  • 3
    To be honest, I don't see much of an argument here. The only thing that really sounds like it would make a difference is the downsizing, however, note that many of the elements which those like tchrist have suggest return to serifs are larger than the body text. Perhaps in the future it would be possible to evaluate returning serifs for individual elements. The voting numbers for example are large and already constrained by a fixed sized box and so would not be able to throw out the site alignment. – curiousdannii Sep 22 '18 at 2:19
  • @Cerberus: To quote the Bard: "Beauty is bought by judgement of the eye." But in any case, the trade off we're making is increased legibility at the cost of beauty. Did you happen to look at this paper I linked to? It shows measurable improvement in readability based on greater x-height. Sans fonts tend to have larger x-heights. Unlike screens, printed books are fixed to the size specified by the publisher. – Jon Ericson Sep 22 '18 at 3:33
  • 1
    @curiousdannii: One of the advantages of the new theme is that we can indeed evaluate changes such as adding serifs to certain elements. If we can come up with a reasonable metric, I could even imagine an A/B test producing interesting results. – Jon Ericson Sep 22 '18 at 3:44
  • 3
    @Jon: I haven't read it, but I have now read the abstract. I'm more than willing to believe that sans serif can be easier to read if legibility is truly an issue. But when letters are displayed at a normal, comfortable size? Or when they are in menus in which speed matters, but which we already know by heart and therefore recognise more by word shape? I should be surprised if it made a significant difference. I don't believe legibility is an issue here (besides, various other changes to the design such as reduced contrast worsen legibility significantly), just as it it isn't in novels. – Cerberus Sep 22 '18 at 3:55
  • 7
    @JonEricson: What do you mean by "reasonable metric" that will enable you to "evaluate changes such as adding serifs"? How about this one: "The users all hate many things about the new design"? – Robusto Sep 22 '18 at 19:48
  • 2
    @Robusto: From my perspective, a lot of the feedback is irrational and occasionally insulting. We knew from the start that some, even many, users would hate the changes, so it's not really a surprise. (Though, I did hope that everyone would be a little more understanding.) No, I'm thinking about metrics that can be measured objectively. – Jon Ericson Sep 22 '18 at 22:18
  • 2
    On further consideration, @Robusto, my comment is a touch unfair. Buried under the outrage are some reasonable concerns. For instance, "why are we inconsistent with font faces?" So I spent parts of Thursday and Friday chatting with a designer, researching the state of the art and translating my findings to our situation. It sure has been discouraging that this work has been greeted with dismissive comments. Now I plan to continue to do this sort of reseach for my own benefit and I might as well publish my results. But, well, it's a bit less likely that I will do that now, y'know? – Jon Ericson Sep 22 '18 at 22:48
  • 13
    @JonEricson♦: So wouldn't it be a good idea to let the designers of the new themes speak to the community? As it is, you and Catija seem to be forced to bear the brunt of the criticism, even though you didn't create the new theme? It seems unfair to you and her, and at the same time less productive. And what happened to Jin, who created such a nice theme? I'm sure Jin, your other professional designers, and/or people at GraphicDesign.StackExchange.com would be more than willing to help make the new themes conform to design standards. Developers aren't usually designers... – Cerberus Sep 22 '18 at 23:47
  • 6
    @Cerberus: I'd really like the designers to speak for themselves. But in my experience, they get a lot of abuse on meta when they do. If you poke around, I'm sure you'll be able to find our designers (who have actual degrees in graphic design, experience in the field and other such credentials). I'd be happy to introduce them, but not if they are going to have to take on the sort of comments we've been seeing recently. :-( – Jon Ericson Sep 22 '18 at 23:59
  • 2
    @JonEricson: There's very little difference between Helvetica and Arial. A typical fallback spec will be 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. – Robusto Sep 23 '18 at 23:36
  • 1
    @Cerberus you said: …"I don't believe legibility is an issue here (besides, various other changes to the design such as reduced contrast worsen legibility significantly), just as it it isn't in novels"… It would be if every page in that novel used two different fonts, and if the subtitle was significantly larger than the chapter's title. – Mari-Lou A Oct 2 '18 at 6:38
  • 4
    I don't see how fonts help maintain consistency in look when that font is used within a custom theme. Font alone is not enough to establish this commonality. Given that everything else is in the new theme, it makes sense for this to also apply to the font. And it seems that, at bear minimum, you should launch with the same serif/sansserif options as the text itself. (Also, your design is really brittle if it depends on the exact metrics of a font. This is dynamic, right? Mobile and accessibility options may increase font size, even. Android doesn't even have actual Arial, you know.) – trlkly Oct 13 '18 at 1:22
27

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...

ELU question-asking example under old UI

....to this?

ELU question-asking example under new UI

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 demo of eth vs o+tilde Arial
  • Helvetica demo of eth vs o+tilde Helvetica
  • Georgia demo of eth vs o+tilde 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:

old look of question-asking page

And here is the new one:

new look of question-asking page

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:

sumelic's old activity page

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:

sumelic's new activity page

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. :)

  • 3
    Good answer... but what on earth is with the manual <br> line breaks in the first section? – KRyan Oct 1 '18 at 23:34
  • 3
    @KRyan A little joke: it’s because of this. I’m demonstrating how irresponsive :) the line length is set to by default on the desktop site. The manual breaks are where the lines should end, up around 66 ens not 100 ens. The measure is set much, much too long. Nobody who actually sets type ever sets paragraphs at 100 ens, not if you're expected to read them comfortably at least. It’s a longstanding design error here. Even if people are used to it, it's still a design error from the perspective of a skilled typesetter or graphic designer. – tchrist Oct 2 '18 at 2:31
  • I appreciate concrete examples. The site feel issue seems separate and harder to tease out. To get an idea of how the font choice plays into the feel of the site, I changed "Arial" to "Georgia" in stacks.css. If you look at the screenshot you'll see it causes a few leading problems, but those can certainly be fixed. Looking beyond those problems, I wonder if that feels more like a design fitting for ELU than the untouched theme? – Jon Ericson Oct 3 '18 at 4:41
  • 1
    @JonEricson Your screenshot experiment is quite intriguing, paragraph leading notwithstanding. However, your CSS hack did ɴᴏᴛ do what you thought: you’ve somehow managed to change the previously Arial portions to Times New Roman, not Georgia! Quickly spotted “tells” show up in the "Viewed 4,904 times" sidebar lines: notice how the w glyph no longer joins its twov-halves at the top as in Georgia but only partway as in Times, and it uses Times lining figures ɴᴏᴛ Georgia text figures. Comparison shot with Georgia above Times in all three lines. (cont.) – tchrist Oct 3 '18 at 14:06
  • 1
    @JonEricson Your example illustrates why Georgia is so often preferred over Times on the screen: it’s easier to read, especially set at such small sizes as those used in your caption-sized elements. My comparison shot should reinforce this. Notice also how the Times serifs taper and thin and sometimes angle downwards, while Georgia’s are more substantial. This is especially important when setting light on dark as you have in "Ask Question" and in the "9" score under "Related"; perceptually, those tiny Times serifs look more like chicken scratches set light on dark compared with Georgia’s. – tchrist Oct 3 '18 at 14:17
  • 1
    @JonEricson Last comment: I still owe you a post that attempts to explain and demonstrate why the essential characteristics of a type face that might make it a good (1) display/titling/headline font also make it a poor (2) body/text font and also a poor (3) caption/UI font. That’s why designers make separate choices for all three of those. Even x-height/aspect-ratio alone doesn’t tell the story you might have heard it does, especially without considering tracking and leading. A list of SEE ALSO references follows in case you want to know more before I get a chance to make that longer post.... – tchrist Oct 3 '18 at 14:27
  • SEE ALSO on x-heights 1, 2, 3. On display/body/caption 4, 5, 6, 7. – tchrist Oct 3 '18 at 14:36
  • 5
    Another reason not to touch Arial (or Helvetica) with a ten-foot barge pole when it comes to IPA is that on all Apple units, mobile and desktop alike, the glyphs ɪ (small capital I, IPA near-close near-front unrounded vowel) and ı (small dotless i) are rendered identically, as are œ (open-mid front rounded vowel) and ɶ (open front rounded vowel) (the latter only Helvetica). – Janus Bahs Jacquet Oct 5 '18 at 15:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .