10

SUMMARY: The default font stacks using the old 1990s Microsoft fonts don’t work well because of collisions with smart quotes. Those font stacks all need adjusting, and quite possibly should be served up differently for different systems. Suggested already-installed replacement fonts are provided.


The Smart-Quote Problem

The so-called “smart quotes” being used in titles and elsewhere don’t work right under the current font stacks. That’s because the ancient 1990s Microsoft fonts being used by default cause common characters like a lowercase f to overlap its terminal with the start of the knob of the closing quotation mark.

And it doesn’t matter which font stack you use. This happens both with the sans font stack, which uses Arial, like on this Stack Overflow question title:

  • SO question title

    SO question title demo

As well as also on the serif font stack, which uses Georgia, like on this ELU question title:

  • ELU question title

    ELU question title demo

And if you think it’s bad in the header, you should see how nasty it is at body sizes or the teensy caption size, where you get

SO caption botch demo

and

ELU caption botch demo

This is a little less devastating on Windows than on a Mac because the Windows renderer produces spindlier glyphs than the Mac ones does, but it’s still not great:

  • Windows SO sample:

    Windows SO demo

  • Windows ELU sample:

    Windows ELU demo

And when you add in the italic, bold, and bold italic possibilities, Arial, Georgia, and Times New Roman are every one of them just awful at this. Consider this sample, where I’ve given both a single- and a double-quoted version; the single-quoted version would come in something like Jeff’s. I’ve also added U+017F LATIN SMALL LETTER LONG S used for historical text and U+0283 LATIN SMALL LETTER ESH used in phonetic transcriptions where it represents both ends of shush:

  • Regular “f” ‘f’ “ſ” ‘ſ’ “ʃ” ‘ʃ’
  • Italic “f” ‘f’ “ſ” ‘ſ’ “ʃ” ‘ʃ’
  • Bold “f” ‘f’ “ſ” ‘ſ’ “ʃ” ‘ʃ’
  • Bold Italic “f” ‘f’ “ſ” ‘ſ’ “ʃ” ‘ʃ’

Which is rendering like this:

render example


Arial Regular, set at 24:

Arial 24pt demo

Arial Unicode MS Regular, set at 24:

Arial Unicode MS regular, set at 24 demo

Georgia Italic, set at 24:

Georgia 24pt demo

Times New Roman Regular, set at 24:

Times New Roman regular demo

As you see, those are all bad. Here are better ideas.


Suggested Solutions

So what are the solutions? I’m going to address both the sans and the serif stacks alike, showing what works better there. You already use a much fancier font stack for the mono stack than you use for the sans or serif stack, and I think you are going to have to do the same thing on the other two stacks: make them much more fine-tuned.

But first, you have to get rid of the 1990s Microsoft fonts. Sorry.

I understand why you insist on using only fonts that you hope will be on the user’s system already, never downloading webfonts on the fly. I’ll try to restrict my suggestions to things that may actually already be there.

1. How fix the sans-serif stack

The quickest, easiest corrective measure for the sans stack is simply to ditch Arial and use Helvetica Neue instead, which doesn’t have this problem at any weight and slant:

Helvetica Neue Regular, set at 24:

Helvetica Neue Regular at 24

Or even just plain Helvetica, which works just fine here:

Helvetica Regular, set at 24:

Helvetica Regular, set at 24

So use Helvetica, not Helvetica Neue. Or at least do so in the right order.

That won’t help Linux users, though. You might consider using Open Sans:

Open Sans Regular, set at 24:

Open Sans Regular demo

But that won’t work for Greek or IPA. But Liberation Sans does work:

Liberation Sans Regular, set at 24:

Liberation Sans at 24 demo

And it has broad glyph coverage, too.


2. How to fix the serif font stack

The modern update to Georgia, Georgia Pro, actually fixes this for the “f” case, but it isn’t free so most people don’t have it, and it doesn’t have good glyph support.

For Mac users, the choice is obvious: you “should” be using Baskerville.

Baskerville Regular, set at 24:

Baskerville demo at 24

It comes on all Macs, and has very good glyph support. However, its x-height of .400 is considerably smaller than Georgia’s at .481. That makes it fine for a header font like in titles or a body font like in the regular text, but it’s not very good as a caption font like in comments.

If you do use Baskerville, and on Macs I think you probably should, you need to be careful when you set up your CSS. You need to make sure that you only use its SemiBold roman and italic fonts, never the Bold ones. Its Bold is simply far too black, just as Georgia’s is:

  • Baskerville Regular, set at 24:

    Baskerville Regular

  • Baskerville SemiBold, set at 24:

    Baskerville SemiBold

  • Baskerville Bold, set at 24:

    Baskerville Bold

As you see, we really wouldn’t want the Bold, only the SemiBold. You can set that up in CSS easily enough.

For the record, Georgia’s bold is actually much more like a black. Per its Wikipedia entry:

Georgia's bold is also unusually bold, almost black. Carter noted that, "Verdana and Georgia...were all about binary bitmaps: every pixel was on or off, black or white...The bold versions of Verdana and Georgia are bolder than most bolds, because on the screen, at the time we were doing this in the mid-1990s, if the stem wanted to be thicker than one pixel, it could only go to two pixels. That is a bigger jump in weight than is conventional in print series."

  • Georgia Bold Italic, set at 24:

    Georgia Bold Italic

This is doubtless why Georgia Pro was issued in other weights as well, including SemiBold and Light.


For Linux users, you could use Liberation Serif, which works for Greek and IPA and a whole lot more:

Liberation Serif Regular, set at 24:

Liberation Serif at 24

Or you could use Linux Libertine, which is just as good at glyph support:

Linux Libertine Regular, set at 24:

Linux Libertine, set at 24

You must log in to answer this question.

Browse other questions tagged .