Typography Is Impossible” by Marcin Wichary via Medium

This was an interesting post on digital typography and, although a lot of it presented quirks and peculiarities I am already familiar with, I wanted to document a few notes I found novel.

Type and Boxes

Digital type lives in boxes. That’s how the software works. But the box is really just a suggestion. Not everything will fit all the time. On the web you don’t have to worry about this unless you start using overflow: hidden:

by default, browsers allow stuff to stick out, unless the container or one of its parents use overflow: hidden instead of overflow: 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.

So how much space do you need to allot a box of type being cut off by overflow: hidden?

A rough suggestion would be to add horizontal padding that’s ⅓ of the font size.

Type and Sizing

Type sizing is different. Sure, you say font-size: 50px, but you’ve probably noticed that a defined font size in one typefaces can take up a significantly different amount of space than the same size font of another typeface.

I’ve seen the results of this problem many times on the web. For example, you’ve got a big H1 on your website where you use a third-party web font service to display that big headline in a traditionally unavailable system font. When it loads, it looks like this:

Innovation Is Our
  Middle Name
  

But if that particular font doesn’t load correctly (or perhaps for a split second while the font is actually downloading to the client) you see it displayed in a fallback system font. It’s quiet possible it now takes up a different amount of space and the word wrapping is different:

Innovation Is Our Middle
  Name
  

This could end up being a problem because often you intentionally design your type to fit a certain way, like when wrapping words around a certain part of an image or deliberately putting words on separate lines to add a punch. Differences in type sizing between font families can so easily break your design.

Font sizes are different. Some quite drastically from one another. That’s because font size is a measure of the type’s containing box, not the type itself:

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

This can result in even more problems than the ones just outlined above. For example, not all fonts sit on the same baseline, which can cause alignment issues if you use a fallback. It’s definitely something to be cognizant of when designing for the web where your font choices, though we would like to believe otherwise, are never truly bulletproof.

Type simply doesn’t abide by the rules of static, pixel images:

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.

This means that often you have to feel your way through type layout and spacing (while being aware of possible font fallbacks). You won’t find a purely mathematical, bullet-proof approach to beautiful typography. As the author goes on to state:

Type is aligned when it feels aligned, not when it actually is aligned.

And this goes deeper in typography. Superscripts aren’t just the same glyphs shrunk down. Bold characters aren’t just the same letters with a stroke or two on them. Italic words aren’t just the normal versions slanted ten degrees. Type designers optimize these variations with subtle differences. They are all new shapes, redrawn from the “regular” ones so that they feel and appear optically correct.

At the end of the day, lots of these typographic guidelines are here because that’s what we’ve grown used to. And because we’ve grown used to it, it’s best to follow those norms because it sets up expectations between you and the reader.

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

If you’re going to break those norms, do it for a reason. Design intentionally.