2. Type doesn’t like to be measured.

I bet you went through something like this at least once in your life.

You go to Microsoft Word, choose a font size — say, 50 pixels — and then start with Helvetica:

Mmmm… Yes. It looks good. It’s the goddamn Helvetica. Period. But you’re not done exploring, right? So, you switch to another font, let’s say Clan, and suddenly things seem rather different:

Sure, it’s a typeface with a different personality, but it also seems… bigger. That couldn’t be, though — you only changed the font, but didn’t change its size. You double check. Correct. It’s still 50 pixels. So you switch between them to make sure:

Definitely, Clan is bigger. How come?

It turns out that when you choose font size, you actually only choose the size of the box the font lives within. What happens within that box is up to the type designer. (Well, within and sometimes without, if you remember Zapfino just above.)

Here’s Helvetica and Clan at the same font size, one on top of the other. You can see that Clan feels slightly more… comfortable within its box.

So, yes: two fonts of the same size are likely to not actually be the same size.

There are consequences of this beyond just font sizing. Since the font designer can do whatever they want within the box, some fonts will inevitably end up closer to top, or to bottom. You might have to take that into account when laying things out:

This font here sits much higher than most other fonts.

Another consideration: Within each box, there will be some space both above and below text. So, spacing things consistently might be trickier.

When you spread two images apart, you can rest assured 20 pixels will mean exactly 20 pixels. When it comes to text, those 20 pixels will be accompanied by extra vertical padding at the bottom and top of each text box — and the text will feel like it’s further apart.

In order for it to feel consistent with image spacing, you might have to pull it closer. (It’s a weird word, feel, isn’t it? Oh, believe you me, it will come back many times below.)

Constant spacing between boxes vs. optically adjusting the spacing differently for text and images

But hey, at least you can rely on fonts being aligned horizontally, right?

Right!?

Look at the text below. It’s all set in the same font, and each line begins at the same horizontal position. However, you can see its starting point getting farther and farther away from the left edge:

This is because each letter has some built-in padding on the left and right — its own personal space it has for itself and no other letter. That personal space gets bigger as the letters get bigger, resulting in horizontal misalignment.

What does it all mean for me?