I am currently available for freelance/contract work. Book a meeting so we can talk about your project.

Fonts that make you go “agh!iIl1”

Posted on

Finding good typefaces can be a hassle. How do you know which of the options on Google Fonts or Adobe Fonts are good? To quickly compare typefaces, you can use the string “agh!iIl1”.

I originally picked this trick up from Jon Tan. It reveals some of the details of a typeface and helps us compare them based on those. Let’s run that test string through a few different typefaces:

The string “agh!iIl1” in 24 different typefaces.
Look at all that screaming.

We already get a good comparison of their individual styles and tone. Let’s look at what this overview reveals.

The a shows the weight of a typeface.

The letter “a” highlighted in all samples.
One letter already sets the tone.

Despite them all being the same font size, the a in Avenir looks much lighter than the one in Helvetica.

A direct comparison between Avenir and Helvetica.
They have the same size and weight, and yet they don’t.

We also see that most typefaces use the two-storey a. Some, like Futura and Monaco, use a single-storey a.

Arial, Georgia, and Verdana use a two-storey a. Futura, Comic Sans, and Monaco use a single-storey a.
Let me tell you a “storey” with nothing but aaaa.

The height of a lowercase letter x (not pictured) represents that typeface’s “x-height”. Descenders are the part of a letter that reach down from the x-height. Ascenders are the part of a letter that reach up from the x-height.

The letters g and h in the test string reveal how the typeface treats descenders and ascenders.

The letters g and h highlighted in the test string.
This highlights serifs and how high/low these letters go.

The exclamation mark, lower- and uppercase i, lowercase l, and digit 1 often look very similar. In some typefaces, an uppercase i and lowercase l look almost identical.

The tail end of the test string highlighted.
In some of these, you can hardly tell the different characters apart.

We put the exclamation mark in the middle of the string instead of at the end to see the font’s kerning. Many typefaces center the exclamation mark, whereas it leans to one side in others.

The exclamation mark leans left in Comic Sans, is centered in Inter, and leans right in Helvetica.
Back and forth, side to side.

We can also see that some typefaces are much wider than others at the same size.

The same test string is short in League Gothic, medium wide in Times New Roman, and very wide in Verdana.
I swear these all use the same font-size.

None of these attributes make one typeface “better” than another. This comparison quickly highlights some of the differences between them. Whether it works for your use case depends on the tone you’re going for.

Happy typing!

Debug
none
Grid overlay