Asymmetric Typography Book Notes

“Every effort of the compositor must be directed to transferring the words smoothly to the reader.”

I recently read Asymmetric Typography by Jan Tschichold and absolutely loved it. Seriously, the book’s only 90 pages long and it’s still the most annotated book in my library. It was impossible to read more than a few pages without sticking in another Post-it note. If you’re into opinionated type advice from the 1930s, I highly recommend checking it out.

It seems like more and more people have been talking about Tschichold on the web lately. A couple months ago, Robin Rendle wrote an excellent essay The New Web Typography and now you’re reading this. Who knows? Maybe you’ll wrap up here and want to study Tschichold, too.

Anyway, I’m trying this new thing where I take notes, build examples, and publish them all on the web. Let’s get that started.

Capitalizing display type

“Words should rarely be set in capitals. In the new typography display lines are set in bold, rather than capitals.”

Tschichold gives a few reasons for this:

  • Capitals are “pretentious and uncontemporary.”
  • Capitals are harder to read than upper and lower case.
  • It’s easier to set type in upper and lower case than it is to set type in all caps. Capitals require faultless letterspacing, so not using them is the more practical decision.

To address his reasons one by one, here’s what I think:

  • There’s a lot of uppercase type in old typography. Tschichold wanted to distance himself from earlier styles because he thought they valued form over function.
  • Generally, I think capitals are harder to read than upper and lower case, but short lines of display text in all caps are a-okay.
  • Regarding the practicality of capitals, remember that Tschichold wrote the book in the 1930s when all type had to be set physically. Nowadays, I think digital fonts with built-in spacing probably solve a lot of the problems he used to come across. You’ll still have to do some fine-tuning here and there, but it’s not nearly as much of a hassle.

Also, don’t get caught up on the bold part. I can see an argument for using only bold in titles (Make them big and bold because they’re important.), but when it comes to headings and other display text, I don’t see any reason you wouldn’t be able to use italics or what have you.

Changing font weights

“A slightly greater word space is required at the points of change-over from roman to bold.”

This was something I’d never seen before. I knew about tweaking the spacing around dashes and parentheses, but I’d never considered doing it when switching from one font weight to another. There’s no explanation why in the book — just the one-sentence marooned on its own paragraph island. Let me know if you’re reading this and have some insight.

Letterspacing bold type

“Semi-bold and bold types must never be letter-spaced since this contradicts their purpose.”

I’m pretty sure Tschichold was talking only about letterspacing type farther apart. Physical typesetting wouldn’t have allowed moving type closer together. You should be okay to reduce tracking on semi-bold and bold type.

Either way, this is some fantastic advice that I’ve encountered at least twice now. The first time was in Carolina de Bartolo’s talk Typography Matters where she says you’re at “cross-purposes” if you tighten tracking on bold type. Before, I was never sure when or why to letterspace, so I had an epiphany when I heard her say that.

One of the trends going around right now is setting display text in a bold sans-serif and letterspacing it way far apart. The style looks cool, but it breaks Tschichold’s rule and the result is pretty hard to read. Though I’m guessing that the poor readability has more to do with saccades and fixations over distance than it does font weight.

Line height

“Sans serif particularly gains by strong leading and is difficult to read when set solid.”

This is what I think. Feel free to educate me on this one if you know better. Here goes.

Most of the serifs in a typeface run parallel to the baseline, guiding movement horizontally across lines of text. Sans-serifs don’t have these horizontal cues, so their shapes can confuse your eyes and cause them to accidentally wander from line to line. Increasing line height when using sans-serifs makes each line more distinct, making it easier to stay on track.

Sans-serifs usually need a line height around 1.35–1.6, depending on the x-height and measure.

Indenting paragraphs

“Usually the indentation should be one em. An exception would be with very long lines which are heavily leaded; here greater indentation is permissible.”

In The Elements of Typographic Style, Robert Bringhurst recommends a minimum of one em or one lead (the unit of line height) for most texts, with 0.5–3 ems being the acceptable range for everything else. It’s reassuring to see that Tschichold’s recommendation is largely similar.

“Indentation is superfluous when there is a blank line between paragraphs, or when there is only one paragraph.”

Oooh — this! I’m so glad to see this addressed for once. I always assumed that web designers set paragraphs flush left with bottom margins because of technological constraints on the web, but it looks like there might be a typographic precedent for not indenting consecutive blocks of texts.

Font sizes

“Too many sizes in one job are unpractical and seldom give good results. The number used should generally be limited to three. Two will suffice for short jobs and four will be used in complicated matter.”

On most web pages, I find that four type sizes is usually a good constraint. That gives you one for body text, one for small text, one for headings, and one for display text. It’s not an inflexible rule, but anything that falls into a design system should stick to the predetermined sizes unless there’s a good argument against it. More UI-focused text, like buttons or table headings, can usually change a pixel or two in either direction without throwing things off. But for paragraphs and headings, stick to a limited set of sizes.

Cutting down on type styles can be pretty helpful when trying to simplify an interface. If you have four type sizes and then use light, normal, and bold weights along with roman and italic styles, you end up with 24 different type styles. Add a grayed-out color and a link color, and that’s 72 options. Way too many to use across a website. Pick the most useful combinations from the bunch, then document and stick to them.

“There must be a clear difference between the type sizes used together.”

Modular Scale is a great tool for visualizing this. When the ratio drops below a certain point, typographic hierarchy starts to fall apart. Too many type sizes exist and the differences between them get lost. The scale becomes meaningless as a result. Stick to a handful of distinct sizes for much better clarity throughout a design.