A directory of brand guidelines: logosearch.link

Fonts that make you go “agh!iIl1”

Dom Habersack
Dom HabersackFebruary 17, 2021
A screaming cat.
Has looking for fonts ever made you feel like this?

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!

– Dom

Continue reading

A destroyed computer monitor.
#75February 10, 2021

Get better at design by breaking some designs

If good artists copy and great artists steal, why shouldn’t new artists destroy? Break some designs to learn the details that make them work.

A printed color palette with an eye piece.
#52September 2, 2020

My design turned out worse than I thought

What looks good in a design tool doesn’t necessarily look good in a browser. Working in both at the same time helps you catch those mistakes early.

An assortment of metalcast letters used in a printing press.
#8October 30, 2019

The Inter typeface family

Variable fonts are about to fix some of the performance issues caused by adding many custom fonts to our sites.

Read all issues →