How bad typography (almost) ruined my holiday

Bad typography can kill, but the wrong type of numerals can prevent you from going on vacation. Which is obviously worse.


A little while ago, I went on vacation to New York with a friend of mine. We booked our flight, applied for our ESTAs and all was good in the world. Until the day of departure when we tried to check in for our flight. The app kept on giving errors without being specific about what went wrong. After cursing the developers of said app, thinking the app was just buggy or something, I moved on to the website. But that too wouldn’t let me check in for the flight. Here at least I got an actual message on what went wrong. Still not a very useful error message: just that there was something wrong with the passenger details. But still, this was better than no information at all.

So, we both started checking our passenger details and before long this friend started calling me a moron, because I apparently entered her passports document number incorrectly. Obviously I didn’t, I can actually read. She just entered it incorrectly when she was applying for the ESTA, but that’s besides the point. The point is that this mistake was made because of bad typography. To be precise: a horrible misuse of Old Style Figures.

Shocking. I know.

In 2014, the Dutch passport got a complete makeover, with a pretty rainbow gradient in the background and not much else. The whole thing is actually pretty legible. It uses Lining Figures, except, for some weird reason, the document number, which uses Old Style Figures.

Here’s an example of a Dutch passport.

A little history

I’m not saying Old Style Figures are evil, not at all actually, I like ‘m. But there is a time and a place to use them. And it’s not in the document number of a passport.

A long time ago, people using the Latin alphabet where using Roman Numerals. You know, those I, II, III, IV, V, VI, etc. numbers. But somewhere during the 12th century, Arabic Numerals reached Europe and we started using those more and more instead. Those Arabic Numerals are the basis of what we now call Old Style Figures. (One could argue that Roman Numerals are the OG Old Style Figures.)

Over time, shopkeepers started writing them more and more in line with each other. The first font based on this style of writing was introduced in 1788, and Lining Figures were born. After this, Lining Figures became increasingly popular and in the 19th century they had mostly started to replace Old Style Figures.

In the 20th century, Old Style became more and more in disuse with the advent of phototypesetting and later because of the lack of support for it in the first digital font files (Type1 and TrueType). Only by the time OpenType became the standard for digital font files, Old Style Figures could really make a comeback.

But since Old Style isn’t seen as separate characters by the Unicode standard, you need to use OpenType features to get to them. (In some typefaces it’s the other way around: You’ll need to use those features to get to the Lining Figures.) Many people don’t know how to use OpenType features and some apps don’t offer them altogether. (Here’s how to use it) Even some design apps don’t offer support. (Looking at you, Sketch – Okay, with a workaround you can, but it should just be build into the app.)


Old Style, Lining, Tabular, Small Caps???

After this brief history lesson on numbers, you might be wondering what the difference between all these figures is, and when you should use them.


Old Style

Also known as non-lining, lowercase or hanging figures. They have varying heights and alignments. They are similar to lowercase characters. They share the same x-height and have ascenders (6, 8) and descenders (3, 4, 5, 7 and 9).
In running texts, like your body copy these figures fit in way better than Lining Figures. Good if you don’t want them to take too much attention. (Medium uses them as well, so you’re already reading a piece of text with these ‘lowercase’ numerals in them. Reads pretty good, right?)

When to use: Inline in your body copy.


Lining Figures

Also known as uppercase figures. These all have a uniform height and alignment. Usually the same height as capital letters and they all live on the baseline. 
These usually feel a bit bigger then the Old Style Figures and stand out a bit more. In some cases, this makes them more legible. Which is good, if the numbers are the main focal point of your content.

When to use: When showing data. Phone numbers, passport document numbers, that sort of stuff. Oh, and next to capital letters.


Tabular

Both Old Style and Lining Figures can also be Tabular. (I used lining in the example image.)
Tabular is like a mono-spaced version of your numerals. Good for use in tables (hence the name) when you want all numbers to align vertically to make your data more legible.

When to use: In tables, when using large amounts of numbers that need to be aligned beneath each other.


Small Caps

Okay, these are really not that important for this story, but still worth mentioning. Small Caps Figures aren’t really a specific type of numerals, they just fit better next to other Small Caps texts. Say, for instance, you’ve got some acronyms in your text, maybe even a flight number, like KL6020, you’ll want to use Small Caps for a better fit in your body copy.

When to use: When it’s part of some text that’s also in small caps.


So, about that document number on the Dutch passport…

I sort of understand why the designer of the Dutch passport decided to use Old Style Figures for the document number. There’s a bigger difference between characters than with Lining Figures, such as the capital I and the number 1 (not necessarily between the capital I and the lowercase l though), and the capital O and the number 0. However, the rest of the passport uses Lining Figures. So suddenly using Old Style can be confusing if you’re a regular mortal who’s not into Typography.

The number 1, Capital I and lowercase l, using Lining Figures. Left in Brando Sans, right in Gill Sans.

There are a number of ways to fix the problem with the 1/I and o/O using Lining Figures. For instance, you could just not use the number 0 in the document number (which is actually true for the Dutch passport), Moreover, you could use the 0 with a slash in it, or you could even just choose a better typeface where the difference between those characters is bigger. But then you would still have the problem of context. If you only see one of the two characters, you don’t have anything to compare it to and it can still be unclear which character you’re looking at.

The context problem also goes for Old Style Figures and is probably what went wrong for my friend. Since the rest of the passport only uses Lining Figures you wouldn’t expect the document number to suddenly use a different type of numerals. The numerals in her document number are mostly the ones with descenders, so she probably thought all numbers were put on a different baseline from the letters to make it easier to read. Then, because she wasn’t paying enough attention and doesn’t have a lot of knowledge of typography, she didn’t notice that the B in her document number was actually an 8.

In her case the document number had mostly descenders, except for the 8. But if you only have sixes and eights in your document number, you could easily think they’re all Lining Figures and thus mistake a capital I for a one. Again, because of the lack of context.


Old Style is evil?

No! Old Style Figures are great. You just need to use them in the right place. And, although the idea of using Old Style next to capital letters for better differentiation between characters is a good one in principle, it just doesn’t work here. But then again, just using Lining Figures, without doing anything extra to the design, isn’t the answer either.

My friends thinking of the placement of letters and numbers could be an answer for this problem. Using Lining Figures, like the rest of the passport, and putting them on a different baseline from the letters, would actually make it a lot more legible.

Left Old Style – Right Lining Figures, like the rest of the passport, but on a lower baseline.

(We did manage to go to New York on time, by the way. Getting a new ESTA only took 1 minute)