Whitney, Designed by H&FJ

Design By Numbers: Typography

A Web Designer’s Primer to Typography

Voice and Tone

Before beginning any project, I tend to establish a voice and tone. How do we want this website to sound? How friendly is this poster? You might think questions like this are best reserved for designer hippies, but answering them early helps to establish a reference point against which all your typographic choices can be tested.

Hoefler Text, a serifed typeface, and Whitney, a sans-serif typeface.
Freight Sans, seen here on Smith Goodfellow’s website

Form and Function

After deciding the overall tone of the project, I work on a 75-20-5 basis for the typesetting: 75% of the text is going to be body copy, 20% will be titles and headings, and 5% will be captions and other miscellaneous typographic elements.

Body Copy

Starting at the body copy level, there a few industry-tested “rules” that we ought to follow. We need the body copy to be highly readable, and these rules will help us achieve the readability we need. On screen devices, body copy ought to be no smaller than 16px. Luckily, this is the default font size in pretty much all web browsers, but I tend to bump up to around 18-20px. I can’t speak much for print design, but in my little experience, I tend to go for around 10pt or smaller.

Hoefler Text (left) has a significantly smaller x-height compared to Georgia (right).
Leading values of 1, 1.6, and 1.375, respectively.

Titles and Headings

Now for our 20% – titles and headings. Like I mentioned earlier, with a superfamily, you should get enough weights and styles to happily style all your typographic elements. That said, there’s absolutely no reason you can’t use more than one typeface.

Miscellaneous Elements

Now for that last 5%. Captions, side notes, blockquotes. For captions, I tend to go for smaller font sizes; somewhere between 75% and 87.5% of the body copy size. I also like to switch to a typeface better suited to small sizes. If I’m using a serif face, this usually means switching to a sans-serif with a taller x-height and more uniform strokes. A smaller font size means we’re probably going to need a larger line height. Be sure to give captions space, too — you don’t want them cramping the body copy.

Unlisted

--

--

Design Manager at Facebook. Erstwhile Designer and Engineer at Dropbox.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel Eden

Design Manager at Facebook. Erstwhile Designer and Engineer at Dropbox.