When you stitch together letters from multiple typefaces, your text begins to resemble a ransom note that pastes together cut-outs from different newspapers and magazines:
ɪᴍᴀɢᴇ ᴄʀᴇᴅɪᴛ: specimen sample of Chris Hansen’s free Ransom Note font
It turns out that we’re doing this at multiple Stack Exchange sites, and the problem has grown worse with the advent of the new ”responsive” theme.
The Problem
At the top of the still-unanswered MSE post Please consider Linux users when designing templates with the Georgia font, we read:
When considering the so-called "web safe fonts", Georgia is one of the most distinctive typefaces out there. This means that it cannot be easily dealt-with with a generic
sans-seriffallback because its letters are much bigger than those found in Times and its many implementations.
And proceeds to demo some of the issues with that. Here is another one, and it’s one that has become worse for some sites under the new responsive design. Here’s what its font stack gives us, set at the 15 points that the body text now uses:
On that first line, look at how some of the letters are shorter and spindlier than other letters: the epsilons that occur between the n and t, and the z and the n, and the z and the n. The three small-cap capital I’s are also too small and spindly, as is the esh glyph at the end of the first word.
But if you look at line six, you’ll see that of its two epsilons, the first is smaller and harder to read than the second one. In fact, they aren’t even the same letterforms!
Here’s some color to make more noticeable which characters are off:
Now do you see it? What that is is all the places that Georgia fails to supply a glyph so the browser pulls in the missing one from Times New Roman. And because Georgia’s aspect ratio is 0.481 while Times New Roman’s is only 0.448, the x-heights don’t line up right.
How It Should Look
If they did, it would have looked like this — and should:
See how much better than looks? I’ve normalized the Times New Roman substitutions to match their x-height with Georgia’s!
The good news is that I did this with a trivial piece of CSS:
font-size-adjust: 0.481; /* aspect ratio for Georgia */
The bad news is that it only works in Firefox, at least for now. The first two shots were rendered by Chrome, which doesn’t respect that setting.
There are a few other differences with how those two browsers handle font substitutions involving code points which, although unrecognized, can be decomposed into a base and one or more combining marks that are now recognizable. You can see this most obviously in the last letter of the first word in line 6.
For now, you should at least fix this with the Firefox-only CSS. It’s a lot better than it was if you do so.
Can’t we get a better solution?
The real solution is to be certain which type face you’re using and never to mix them. And you shouldn’t switch the stack to using only Times New Roman, either. It’s harder to read than Georgia for a lot of reasons. In the colored version so you notice, take a look at the superscript h and w on line 4, which got swapped in. Those are incredibly tiny as superscripts at 15 points swapped in from the smaller Times New Roman for the Georgia. (Windows users should zoom out to 67% to see what this is looking like to Mac users.)
For example, that sample rendered in Baskerville, which is found on every Mac and has good but not quite perfect support for Greek and IPA, comes out like this:
Unfortunately, the tie used in IPA affricates like t͡ʃ and d͡ʒ is missing there.
By the way, Christianity.SE never used to have this problem. Before it got switched over to the responsive design stack, was using a font stack that actually had all the Greek characters in it that it needed. Now it doesn’t.
And ELU has never had one that worked well for its purposes, which are mainly for the International Phonetic Alphabet transcripts like those shown on lines 1–4, with only occasional bits of Greek.
Fix what you can for Firefox now, but try to come up with something that is guaranteed. It would be best if a modern font was chosen that actually had all these, and while Times New Roman does, it really isn’t the best choice for a bunch of reasons.
Reference Data
Here are the data I was using for this in case anybody else wants to play around with them:
1. ɪŋlɪʃ fənɛtɪk rɛprɪzɛnteʃənz
2. ɪɾ̃ɚˈnæʃɨnəɫ fəˈnɛɾək ˈæɫfəbɪt
3. /ˈhɒmɪdʒ/, /ˈ(h)ɑmɪdʒ/, /ɒˈmɑːʒ/, /ˌoʊˈmɑʒ/
4. [ˈtʰre:ɾər], [ˈtʰɹeɪɾɚ], [t͡ʂɻʷeɪd]
5. μῆνιν ἄειδε θεὰ Πηληϊάδεω Ἀχιλῆος
6. καὶ ἐκχεῶ ἐπὶ τὸν οἶκον Δαυιδ
That one uses the inscrutable code font stack of Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif — so heaven only knows what it looks like to anybody. All you can do is guarantee that nobody sees the same thing as you do that way.
Larger Images
Large version of ransom-note problem
Large version of colored ransom-note problem
Large version of Firefox fix to ransom-note problem
Large version of Baskerville applied to the ransom-note problem:
