Goudy Old Style Italic

Chapter 2: Rhythm & Proportion

—Robert Bringhurst, The Elements of Typographic Style

Pop quiz: What CSS property do you use to set the color of a text block? If you said color you were … wrong! Don’t take it too hard, though. It was a trick question.

In typographic parlance, “color” refers to the optical density and texture of a block of text, and after legibility, the successful typesetter’s chief aim to achieve an evenness of color. The second chapter of Robert Bringhurst’s The Elements of Typographic Style is chock-full of specific guidelines you can easily apply. You’ll also learn the one thing that totally changed the way I think about ems, and why Frederic Goudy was the Madonna of early 20th-century type design. Read on!

Word spacing, or How I Learned to Stop Worrying and Love the Em

The em is a typographic skeuomorph that trips up a lot of web developers. Because the em is a relative measurement, it’s been adopted widely and enthusiastically for responsive design — but what are ems relative to, precisely? The lowercase letter m, of all things. And not some abstract constant ideal of the letter m, but the literal specific letters you are styling. You can fall into a cascading rabbit hole: if you set a parent <div>, child <p>, and a <span> all at 1.5em, suddenly you could find yourself looking at something very odd.

Like many of you, I just accepted the em’s eccentricities and became proficient in using it to set font-size, padding, margins, and even min- and max-widths. But there was always a little voice in the back of my mind that whispered, “there’s something kind of hacky going on here.” That’s why I literally exclaimed out loud when I read this:

“Type is normally measured in picas and points, but horizontal spacing is measured in ems.”

Did you feel that? Chills.

Typesetters use ems for one very specific purpose: to control horizontal whitespace within the text. The em is generally split into fractions and used to set space between letters and words. Does that mean that you can’t use ems for layout and font-sizing? I’m certainly not going to stop you. (But you might want to check out the em’s born-digital baby sister: the root em, or rem.)

Rules of Thumb

The standard space between words is 1/4 em

The heavier the text, the greater the word space required

Larger text requires less word space

Justified text reflows within the column, and so word space becomes elastic. Aim for a minimum of 1/5 ems, and a max of 1/2

Use a single word space between sentences! Tapping the spacebar twice after a period is a weird relic and not good practice. Your browser ignores the extra word space anyhow when it renders your HTML. Hug your browser

Tracking

“A man who would letterspace lower case would steal sheep” —Frederic Goudy

Illustration by Frederic Goudy via Period Paper

Goudy’s Wikipedia page is worth a read, and not only for gems like the one above. At the age of 40 he was working for a Chicago realtor and considered himself a failure. Then over the course of the second half of his life he underwent a total reinvention and became one of the most successful and prolific typographers of all time. He set 113 fonts, quarrelled with seemingly every foundry he collaborated with, and lost an entire body of work in a fire. He also designed my favourite ampersand.

It’s not totally clear to me what stealing sheep has to do with typography, but I’m pretty sure Goudy thinks it’s pretty bad, because I know he doesn’t approve of letterspacing lower case.

If you add extra spacing to body text, it’s generally pretty hard to read. However, letterspacing (also known as tracking) can be very elegant when applied in places where the text is very heavy (bold text or all-caps) or where the letters or numerals are meant to be read individually. Well-placed letter spacing can really make it look like you know what you’re doing. Check out this example:

Via Practical Typography, which has another take on that sheep thing

Rules of Thumb

Letterspace all-caps, small caps, and long strings of numbers by 5–10%. If you’re really serious, you might start digging into how you can achieve this in your body text with grep

Experiment with adding extra letterspace to headings. Remember that expanded letterspace should be balanced with more generous line heights

Consider letterspacing anywhere the individual letters or digits are what’s important to read separately

Be wary of letterspacing words

Kerning

Kerning is the practice of adjusting the space between individual characters. It’s different from tracking, because tracking is applied evenly across all the characters in a section of text. Kerning, meanwhile, is applied manually by a practiced hand in order to optimize the visual appeal of the word. There’s a bit of magic in it, but as a general guide, letters that are round or slanted (o, v, and e, for example) will look farther away from adjacent letters, and letters that are blocky and/or straight (M, l, N) will look closer to the letters beside them.

Don’t try this at home. Via The Quietus

If you’ve heard the way people talk about kerning, you know that folks have opinions. Maybe you’ve been wondering if you should be doing it. But I have some good news for you: kerning is best left to print designers. The best way to kern for the web is to do nothing at all. In fact, the fonts you are using have built-in kerning tables that a type designer has already carefully formatted. If the spacing of your type selection looks wonky, it may be better to use a different font than to struggle with a poor design.

Rules of Thumb

Don’t attempt kerning in your web design unless you want people on the keming subreddit to laugh at you

Leading

Leading, the spacing between lines of text, is named after the literal bands of lead typesetters once used to design the page. With font size being measured from the top of the “d” to the bottom of the “p,” standard typesetting proportions for leading are 9/11, 10/12, 11/13, and 12/15.

Rules of Thumb

Standard leading is about 20% (or line-height: 1.2;)

Add more leading to increase legibility for wider columns of text and heavier fonts

Sans-serif fonts require more leading than serif fonts

It’s nice to set all typographic features with multiples of the same line height. This is especially true if you’re working with multiple columns. They look tidier if the line-height is proportionally consistent and the text will fall neatly onto the same horizontal line

Layout and Proportion

One very easy mistake to make in web design is allowing columns of text to be too wide, especially on desktop views. When lines get very long, it becomes difficult for the reader to find their way from line to line across the page. As a guide, the average book page text block is 30 times the size of the type. Applied to web design, that would mean a 480 px column for the average 16px font. Medium does this very nicely; if you’re reading this on a desktop computer right now, you’re looking at 20px font set in 690px columns. Feels good, doesn’t it?

Within your text blocks, there are two ways you can lay out your paragraphs. Block paragraphs are set flush left with a white space between. This is the browser default, and how the paragraphs you are reading now are set. Block paragraphs are also common for business documents. For short documents, block paragraphs “suggest precision crispness and speed,” but in a long sequence, Bringhurst warns that they can appear “soulless and uninviting.”

The other option is to set paragraphs to run together vertically, with a first-line indent to separate them visually. This is a very nice way to set long reads, and is common in novels and magazines. If you take this approach, set opening paragraphs flush left, then indent subsequent paragraphs. (The pseudo-selector :first-child is your friend!) Text indentation should be at least 1/2 em, and 1 em is most common in typesetting. In my opinion, Microsoft Word’s default intent is way too much. Bringhurst is more generous, and allows for up to 3 ems.

Rules of Thumb

Aim for 45–75 characters (including spaces & punctuation) per line of text. Bringhurst says that 66 characters per line is ideal

In multi-column layouts, aim for 40–50 characters per line

To cheat the line a little longer (90 characters, tops!) increase line height

Save yourself a headache and don’t go below 40 characters per justified line of text; set short lines of text ragged-right

In Bringhurst’s estimation, sans-serif & monospace fonts should always be set ragged-right

Hyphenation

Did you know you can set hyphenation rules in CSS? If you find yourself needing to save space on the page, a solution can be to set your text in multiple paragraphs. Hyphenation allows justified text to space nicely and evenly. For the web it’s recommended that you use hyphenation sparingly, however.

In type design, there is a long list of rules for ensuring that hyphenated text is beautiful and legible. Typesetters and proofreaders feed their families making sure that these rules are followed faithfully. But because of the re-flowable, responsive nature of the web, it’s nearly impossible to follow even one of them in web design. Have a look:

Leave at least two characters behind and take at least three forward in a hyphenation

Avoid leaving the stub-end of a hyphenated word or any word less than 4 characters as the last line in a paragraph

Avoid more than 3 consecutive hyphenated lines. (Typesetters call these “pig bristles”)

Avoid breaking two consecutive lines with the same word

Never begin a page with the last line of a multi-line paragraph. (This sad, lonely little line is called a widow)

Balance facing pages by moving individual lines

If you do decide to use hyphens, here are some guidelines to follow:

Rules of Thumb