Typography is impossible

The practical guide to why laying out type never quite does what you want

You’re a front-end engineer, building boxes and putting text inside them. A lot of websites, and a lot of native apps, are basically that — text flowing into boxes. It’s a testament to typography that hundreds of years since Gutenberg, letters and boxes keep reinventing themselves and finding new jobs to do, in materials and technologies that were once future’s future.

You’re a front-end engineer… but at this very moment, you’re also a typesetter. It’s good work. Satisfying work. (As of a few decades ago, you don’t even have to worry much about lead poisoning.) There’s something mathematically, geometrically comforting and peaceful about filling boxes. Computers are good at rectangles. This should be easy.

But you’re about to discover, or perhaps already discovered, that this is no smooth sailing. Setting type can be tricky. Type lets you get close, but it never quite does what you want it to do.

Let this be your guide, in four simple commandments.

1. Type doesn’t like to be cropped.

During the times of metal type, letters as well as whitespace were physical matter that you could only add to — never subtract from:

But even then, creative people figured out ways to make things overlap and cheat the restrictions imposed on them by rectangles made out of lead, via solutions that were, basically, hacks:

In digital typography, few such restrictions apply. Pixels don’t have to compete for space the way atoms do, and the same pixel can be claimed and controlled by two or more letters. And so, we can encounter things like this:

You can easily imagine the left example (set in a font named Stag) as four rectangles — one for each letter — placed together side by side. However, in the word on the right, not only does y invade the space below t, but it actually sticks out farther than where text actually began!

Sticking out is not unusual in typography, even if you don’t use flamboyant typefaces like Zapfino. Here are four examples from Medium today where cropping text precisely at its box’s edges would cut stuff off:

What does it all mean for me?

• The box is just a suggestion. You can’t assume everything will fit neatly in; fonts are likely to stick out any possible way (particularly left and right).
• You need to give text room to stick out. Don’t crop the box with text and, if you need to, leave padding on all the sides. (A rough suggestion would be to add horizontal padding that’s ⅓ of the font size.)
• In HTML… by default, browsers allow stuff to stick out, unless the container or one of its parents use overflow: hidden instead of visible. If for whatever reason it’s necessary to apply that restriction, it is important to add horizontal and vertical padding so that text is not clipped.
• In native iOS… iOS crops horizontally by default, although it pads text elements via lineFragmentPadding. This value (5 points by default) should not be made too small, or padding should be achieved through other means. Also, beware of lineHeightMultiple — if set to less than 1.0, it can crop tops of letters.
• On native Android… I heard that clipChildren and clipToPadding might not work quite well, but you can trick TextView by using a shadow layer around the text with transparent colour radius of 1, and dx of –60. Note: This might be outdated info. Please tell me if you know more!

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?

• The box is just a suggestion, yet again. Fonts are not only likely to sometimes stick out of the box — they will even more likely never be aligned with any side of the said box. This will be more prominent as your type gets bigger.
• Font sizing works within the font, not necessarily across fonts. You can assume font size multiplied by two will result in letterforms twice the size. However, two fonts with identical font sizes might actually have very different dimensions.
• Horizontal and vertical spacing of text will be more tricky than images. If you need precise alignment, you will have to account for the horizontal and vertical whitespace that exist within each letter in a font.

3. Type doesn’t like to stand still.

The shuffle mode of listening to music was once such a revelation that Steven Levy wrote a whole book about it.

To me, one of the most interesting parts of the shuffle revolution was people complaining when their iPods played two or more songs by one artist, one right after another. “I just heard a Phil Collins song. Why am I getting another one? Did the shuffle break?”

This is the same kind of a reasoning that has my Mom scoff when I tell her she should go for “1 2 3 4 5 6 7” when betting in the national lottery. Apple could not fix that, but it addressed people’s complaints by adjusting the shuffle function: they made their sorting less random in order for it to feel more random.

Typography works the same way. Type is aligned when it feels aligned, not when it actually is aligned.

Here, the tops of the curved letters stick outside the line established by the straight letters, just so they all feel perfectly aligned:

Or, the lowercase y has to go underneath T in order to feel as close as the uppercase Y, which is comparatively farther away:

This goes deeper. The superscript 2 is no more a normal 2 made smaller, than a kitten would be a regular cat simply shrunk down:

2 to the power of 2 · Superscript 2 blown up to the size of regular 2 · Two of them overlapping

In order for the two digits to feel compatible at different sizes, they need to be physically different. Likewise, bold text is not just regular letterforms made naïvely thicker:

The second line above — the fake, gross, synthesized bold — is one of the biggest crimes against typography one can commit. The same would be true for italics, or narrower/wider versions of fonts. They’re not simply slanted or stretched regular fonts; they are all new shapes, redrawn so that they feel, optically, like they’re slanted, stretched, or made fatter:

The second line is the same as the first line, just compressed horizontally. I need to wash my hands.

This, so far, is the domain of the type designer: a person creating the font and painstakingly drawing its shapes. As a deputized typesetter, you can’t usually get inside the font and mess with its letterforms — you have to trust the designer’s done a good job. There is, however, stuff you will have control over and responsibility for: values for font size, letter spacing, and line height.

And within those, you’ll find the same theme repeated. All of those numbers will have to change in order for type to feel the same.

Here’s text in two font sizes: 50 and 500 pixels, with letter spacing adjusted so it feels roughly the same. For the smaller text, the letter spacing is –30. For the bigger text, it is –60:

Letter spacing: –30 at the top, –60 at the bottom

The kicker is: the letter spacing value already takes into consideration the font size. –30 at a smaller font size is proportionally smaller than –30 at a larger font size. If it needs to become –60 to feel right, it means one thing: letter spacing gets tighter much faster than the font size gets bigger.

If you use the same value for letter spacing for both font sizes, they will start feeling very, very different:

Letter spacing at –30 in both cases. The larger text feels much more spread than the smaller one.

It’s something of a theme. As fonts get bigger, letter spacing will need to get tighter, and line heights will need to get closer faster to feel right. As line lengths get longer, line height will have to get larger too, to compensate. Sometimes, you might have to adjust line height even if you just change font weight (for example from light to bold), and nothing else.

What does it all mean for me?

• Values should be reused with caution. You can’t usually copy/paste parameters for letter spacing or line height for one situation and use them elsewhere verbatim. This is true even for values in units that grow/shrink with the font size (for example em in CSS).
• Make sure you have proper fonts for all the flavours of type you need. If your site doesn’t serve bold or italic font files, or the glyphs for superscripts or small caps, your browser or operating system will create synthesized, fake ones instead. (If you do that, I hope you like your eternity spent in typographical hell. I know one thing: it will be justified.)
• In native iOS… Letter spacing and kerning are different things. For some reason, iOS calls the equivalent of letter spacing NSKernAttributeName. It’s maddening. Just something to be aware of.

4. Type doesn’t know any limits.

Did you ever wonder why, on a bigger screen, some text feels harder to read? Why this page, for example, doesn’t feel quite right?

Text, left to its own devices, behaves like gas: it will expand to fill its container. Sure, it will sometimes stick out, and rarely align, but otherwise it will behave like a really, really fast typewriter — it’ll go from left to right, letter by letter, until it hits the other margin, then start again on the next line.

This, sometimes, results in a disaster.

If you imagine the text flowing into a container like a really fast typewriter, imagine an eye on the other side, reading the text, as its equivalent. No, eyes don’t move quite as precisely as a typewriter would, but they move nevertheless. And, contrary to typewriters, our eyes get tired.

There is a point where a line becomes too long for comfortable reading. This is exactly what happened in the screenshot above. The lines stretched very long and, as a result, it became too tiring for our eyes to read comfortably.

And when I said “a point” above… you should know, by now, that there will be no single number that I could give you because typography just doesn’t work this way. It will all depend on the font you choose, line height, etc. And yet, there is at least a range: we know that a line of 45–75 characters, with 65 being roughly optimal, is perfect for our eyes when it comes to western typography.

The screenshot above seems to have about 130–140 characters per line, which is far too much, resulting in eye fatigue. The page you’re looking at right now is, instead, limited in width. Even on a huge screen it will never go above 70-something characters per line, despite seemingly wasted space on both its sides.

You might say “this doesn’t matter any more, we’re all doing our reading on small screens, anyway.” But this is where we can get in trouble too, since the lines can also get too short for comfortable viewing. Here, a picture on the side of text might result in lines too narrow for comfort:

And, if one of your words is rather long, the end effect could be simply embarrassing, since the word — like incredibly below — will just wait until there’s enough room on a line:

It gets worse. Small screens or small boxes are also where “type doesn’t like to be cropped” meets “type doesn’t know any limits,” and the two edge cases intersect in a really insidious corner.

As a typesetter, you should get to know other typesetters. Among them, one famous example is a German fellow, born in 1904. His typesetting contributions are less than clear, since they were overshadowed by his impossibly long name. Are you ready for it? Here we go:

Hubert Blaine Wolfe­schlegel­stein­hausen­berger­dorff, Sr.

Psych! That’s not even close to Hubert’s full name. His given name was basically 26 first names (each for each letter of the alphabet), followed by an enormously long single-word surname. Here it goes, set in a smaller font because those pixels ain’t cheap:

Adolph Blaine Charles David Earl Frederick Gerald Hubert Irvin John Kenneth Lloyd Martin Nero Oliver Paul Quincy Randolph Sherman Thomas Uncas Victor William Xerxes Yancy Zeus Wolfe­schlegel­stein­hausen­berger­dorff­welche­vor­altern­waren­gewissen­haft­schafers­wessen­schafe­waren­wohl­gepflege­und­sorg­faltig­keit­be­schutzen­vor­an­greifen­durch­ihr­raub­gierig­feinde­welche­vor­altern­zwolf­hundert­tausend­jah­res­voran­die­er­scheinen­von­der­erste­erde­mensch­der­raum­schiff­genacht­mit­tung­stein­und­sieben­iridium­elek­trisch­motors­ge­brauch­licht­als­sein­ur­sprung­von­kraft­ge­start­sein­lange­fahrt­hin­zwischen­stern­artig­raum­auf­der­suchen­nach­bar­schaft­der­stern­welche­ge­habt­be­wohn­bar­planeten­kreise­drehen­sich­und­wo­hin­der­neue­rasse­von­ver­stand­ig­mensch­lich­keit­konnte­fort­pflanzen­und­sicher­freuen­an­lebens­lang­lich­freude­und­ru­he­mit­nicht­ein­furcht­vor­an­greifen­vor­anderer­intelligent­ge­schopfs­von­hin­zwischen­stern­art­ig­raum, Senior.

You can read more about Hubert B. Wolfe + 666, Sr. (not kidding) on his Wikipedia page, and among many anecdotes is one about a 1960’s IBM computer at John Hancock Mutual Life Insurance, which simply could not handle a name of that length — Hubert’s policy was the only one that had to be done manually.

More than half a century later, if you take Hubert’s name and plug it into a website, things might not go very smoothly either. Sure, absurdly-long names are not likely to happen to you, right? But imagine something joint together with a few slashes, or perhaps a naked URL, and the situation becomes a bit more real:

It’s not hard to ask the word to break in the middle, but you have to remember to do it. Otherwise, words can just keep on going, and going, and going… (In the above examples, they just go off screen. On a larger device, they might actually start overlapping other content!)

What does it all mean for me?

• Lines need maximum lengths. They should be relatively easy to calculate, and they don’t need to be very precise — but make sure your text is not allowed to just stretch as far as the eye can’t see.
• Lines need minimum lengths, too. Small screens mean it’s easier to run out of room. If you have stuff on the side of text, or indentation, test extreme cases and put things on top of one another rather than side by side.
• Words need to be told to break. Otherwise, by default, they might just run over. (This is especially important when you create containers for others to fill out with text you’ll have no control over.)
• In HTML… you can manually insert soft hyphens, zero-width spaces, or <wbr> tags that will be inert — except for when the word nears the right margin, allowed to break at this point. You can also use the CSS property word-break: break-all (although this will give you less control) or, if you’re okay with losing some text instead of wrapping it, text-overflow will come to the rescue. There’s also automatic hyphenation, but it’s not supported very well. (And, line clamping.)
• In native iOS… Luckily, iOS behaves between when it comes to slashes and long words by default. Look up hyphenation. You can use e.g. zero-width spaces and soft hyphens in strings, but you have to escape them this way: \u200B and \u00AD. For labels, instead of text views, NSLineBreakMode can help.
• On native Android… Lollipop introduced new hyphenation options: hyphenationFrequency and breakStrategy. Special characters can be inserted, escaped just like in iOS above.

So, there you have it. Welcome to the world of typesetting, where numbers cannot be trusted, rulers only pretend to align to things, and boundaries feel like those in post-Schengen Europe. (Too soon?)

A lot of the above might seem arbitrary, but that’s typography for you, too: some of it is not things that are objectively better, just things we’ve gotten used to over the last few centuries.

But I hope after reading the four commandments above, some of the mysteries of typesetting will feel more under control. And, by all means, put “typesetter” in your Twitter bio. Trust me. It’ll feel really good. Even if your name happens to have fewer than 666 characters.

Thanks to Nina Liong, Tyler Howarth, Nick Santos, and Bram Stein for reviewing this article.

My other articles in practical typography: Space yourself · Using system UI fonts in web design.

And, if you want to dig even deeper, check out those links:

1. Type doesn’t like to be cropped. Space yourself · A photo essay of physical typesetting · Hanging punctuation
2. Type doesn’t like to be measured. Difference between kerning, letter spacing, and sidebearings · On em, rem, and ch CSS units
3. Type doesn’t like to stand still. On optical adjustments · What is kerning · How to choose the right line height · Say no to faux bold · Why distorting type is a crime
4. Type doesn’t know any limits. Type measure · Space yourself