33

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:

ransom note demo                               ɪᴍᴀɢᴇ ᴄʀᴇᴅɪᴛ: 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-serif fallback 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:

demo of ransom note effect

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:

colorized ransom note demo

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:

corrected ransom note

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:

Baskerville Sample set at 16

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

  1. Large version of ransom-note problem

    big demo of ransom note problem

  2. Large version of colored ransom-note problem

    big colorized demo of ransom note problem

  3. Large version of Firefox fix to ransom-note problem

    big demo of fix to ransom note problem

  4. Large version of Baskerville applied to the ransom-note problem:

    big demo of Baskerville fix for ransom note problem

  • 1
    The mobile font stack here is also not great - about a third of the characters in the reference data are boxes. – curiousdannii Oct 25 '18 at 13:19
  • Hm. Looks like this depends highly on what your environment is - on Chrome on Ubuntu 18.04, the text renders correctly for me: i.stack.imgur.com/BrrRt.png – ArtOfCode Oct 28 '18 at 2:06
  • @ArtOfCode You’re right, it certainly does. But you aren't using the Georgia+Tiimes New Roman frankenfont monster that both Windows and Mac users have been afflicted with, either. I’m pretty sure that that’s Liberation Serif that you’re showing there. It’s not Linux Libertine, which has curly serifs on things like ɒ and ɑ where Liberation Serif has strictly flat ones. But your version has a different bug: the t͡ʂɻ cluster puts the tie over the last two not the first two. I’m not seeing that on the Mac rendering using Liberation Serif. Weird. – tchrist Oct 28 '18 at 2:29
  • Ah, the wells of wonderment and wizardry that is web fonts. – ArtOfCode Oct 28 '18 at 2:42

You must log in to answer this question.

Browse other questions tagged .