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:
As well as also on the serif font stack, which uses Georgia, like on this ELU question title:
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
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:
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:
Arial Regular, set at 24:
Arial Unicode MS Regular, set at 24:
Georgia Italic, set at 24:
Times New Roman Regular, set at 24:
As you see, those are all bad. Here are better ideas.
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:
Or even just plain Helvetica, which works just fine here:
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:
But that won’t work for Greek or IPA. But Liberation Sans does work:
Liberation Sans Regular, set at 24:
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:
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:
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."
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:
Or you could use Linux Libertine, which is just as good at glyph support: