Image for post
Image for post
The Van de Graaf Canon, a harmonious grid system used by typographers during the middle ages

Harmonious Typography and Grids

Zac Halbert
Nov 10, 2016 · 20 min read

Why it’s important

The sequence

Image for post
Image for post

1. Define Your Goals

Image for post
Image for post
A few pieces of inspiration (from talented illustrators, letterers, and designers on Dribbble), paired with some brand adjectives.

2. Content hierarchy

Avoid Lorem Ipsum, if you can help it

Lay out all content types

Image for post
Image for post
I prefer to set this initial list in something garish, like Monaco or Courier, which forces me to make intentional decisions rather than leaning on defaults. Get more example text to set from the Gutenberg Project: https://www.gutenberg.org/

3. Pick typefaces

What is your budget?

Where will this be used?

Choose a style for your headings

Image for post
Image for post
In order from the top: Kabel, Raleway, Source Serif, Abril Titling

Pick a pairing for your body copy

Image for post
Image for post
In order from the top: Source Serif, Open Sans, Abril Text

Test it out with an artboard matrix

Image for post
Image for post

Decide

Image for post
Image for post
Heading: Abril Titling Narrow; Body: Source Serif Regular

4. Base font size and line height (ratio)

Image for post
Image for post

Picking a base font size

Image for post
Image for post
Left: 20px body copy; Right: 18px body copy

Picking a base line height

Image for post
Image for post

Use whole numbers

Image for post
Image for post
It still doesn’t look great, but it’s definitely better than what we had when we started.

5. Typographic scale

Image for post
Image for post

Map your type scale to your content hierarchy

Image for post
Image for post
Image for post
Image for post

6. Horizontal spacing (typographic measure)

Image for post
Image for post

7. Vertical spacing (vertical rhythm)

Image for post
Image for post
Traditional typographer’s notation shows the font size in the numerator position, and the line height in the denominator position (bolded in the example above)

8. Horizontal grid system

Image for post
Image for post

Mobile layout grid

Image for post
Image for post

9. Vertical grid system

Image for post
Image for post
Your gutter height can optionally be the same as your gutter width (24px in this example), but that will limit the fine-grained control you have by halving that number.

Layout

Image for post
Image for post

Law of Proximity

Image for post
Image for post
I drew red boxes over the text blocks to demonstrate the proximity relationships

Wrapping up

Image for post
Image for post
Image for post
Image for post
A simple wireframe, based on the 18px/24px grid system we established earlier

Can you make this better?

Want more?

Tradecraft

Stories about startups, technology, traction, and design…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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