Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, co-founder of lifestyle magazine Lagom, founder of typography magazine 8 Faces, and an electronic musician.

Digest’s typography & grids (part 1)

Posted on 07 August 2013 Comments

Article illustration for Digest’s typography & grids (part 1)

Ahead of Digest’s release next Wednesday, I wanted to talk a bit about the typography and grids I used to design the debut issue, which will in turn form the templates for our future issues.

Way back in February I dribbbled a teaser of the page grid, and very little changed from that early work. Here’s the final grid, along with a few guides:

Digest

The red diagonal guides represent the Van de Graaf Canon, which dictates the ideal placement of text blocks on the page. It also happens to correspond to Rosarivo’s Gutenberg Canon — indicated here by the cyan horizontal and vertical guides — which splits the page into ninths. For a concise yet thorough overview of these tried and tested grids, I can thoroughly recommend Alexander Ross Charchar’s article ‘The Secret Law of Page Harmony’. It’s a fantastic topic and Alex explains it beautifully. Never before has the medium of the animated GIF been put to such educational uses.

I chose a baseline of 12pt, which gives me eleven lines per one-ninth unit. Actually, the baseline doesn’t correspond to the guides exactly, but the ‘slippage’ is so slight, it’s not worth worrying about (in my opinion).

Digest At the top of the page, the baseline corresponds exactly to the one-ninth Gutenberg divisions; by the bottom of the page, the correlation has gradually slipped.

I’m always expounding the benefits of designing from the type out and designing Digest was no exception. Although I picked my baseline first to correspond with the overall grid, deciding on the actual leading was simply a case of changing the font size until the balance felt right. In the end, the body type was set in Tabac Slab Light at 7.5pt over 12pt.

For smaller type, like the 6pt footnotes, I used an incremental leading of 8pt to align the type with the main 12pt baseline every three lines.

Digest Body type at 7.5pt/12pt and footnote at 6pt/8pt, aligned every three lines.

However, before I delve too deeply into the nuances of the type, let’s return to the grid. Originally I’d planned on swapping between a two-column and three-column layout within the main content area, but during production it became clear that a three-column layout would allow for much more freedom once I started inserting headings and images. So every article in Digest uses a three-column layout except for the messages from us, the editors, which use two wider columns.

Digest The three-column layout used for articles (left) vs. the two-column layout used for messages from the editors (right).

So, let’s talk type. I won’t go into the various typefaces I considered for Digest, other than to say that there weren’t really that many: I’d been wanting to use Tomáš Brousil’s Tabac ( serif / slab / sans / mono) superfamily since I submitted the Slab as my contribution to Typographica’s favourite typefaces of 2012 and I’m always fond of superfamilies, because it means combining typefaces is a much easier task: the serif, slab, and sans (I didn’t use the mono) each perform different roles, and the generous spectrum of weights within each typeface give you pretty much every flavour you could ask for.

In fact, the variety available in the serif alone is incredible: Tabac’s styles are divided over four grades, with G1 offering the highest contrast and suitability for display sizes, through to G4, with lower contrast and better suitability as body type. The highest contrast available — Tabac G1 Bold — is used in Digest for (most of) the primary headings, page numbers, and drop-caps. It’s not a Bodoni, of course, but has the same sort of authoritative elegance that Bodonis have in high-end fashion publications, and which we wanted as well.

Digest Tabac G1 Bold for headings, Tabac Sans (Bold and Light) for credits, and Tabac G4 Italic for intros.

Tabac G4 Italic is used for article intros, while various weights of Tabac Sans are used for the credits, running footer, footnotes, and interview questions.

The main body text is set entirely in Tabac Slab Light. I’m partial to slabs anyway — and they’re almost always more legible at body sizes than a serif or sans — but this really is a beautiful typeface. For Digest, it sets our serious-but-not-too-serious tone perfectly.

Digest

With the main typography styles set, and with the grids and columns in place, the next step was to start mapping out some of the more detailed placements, defining how text blocks and images might interact; how different scenarios or lengths of content might require adjustments to the rules. Personally, that’s where I find things get a bit more fun, and that’s what I’ll be covering in part two.

I’ll also be going into more detail about the typography, including the decisions that went into solving some of Digest’s trickier typesetting problems, and some of the techniques that set this new magazine apart from my previous print projects like 8 Faces and Insites: The Book. Stay tuned!

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Siteleaf and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.