Get 200+ icons, free for personal use:

Fonts that make you go “agh!iIl1”

Dom HabersackFebruary 17, 2021
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:

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.

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.

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.

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.

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.

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.

Back and forth, side to side.

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

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

#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.

#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.

#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.