Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Digest’s typography & grids (part 1)

Posted on 07 August 2013 18 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!

18 comments

  1. Daniel Eden

    Daniel Eden

    08 August 2013 @ 08:32AM #

    Great working piecing this together. It’s always fascinating to hear about the grid & type stuff that goes into a publication like this. I’m excited to get my hands on it.

  2. Jon Reader

    Jon Reader

    08 August 2013 @ 08:59AM #

    Great article.

    It’s nice to read about print mediums, especially when it’s not theory but actual practice. Looking forward to reading more on the subject.

  3. Benjamin Fritz

    Benjamin Fritz

    08 August 2013 @ 09:22AM #

    Thanks for the insight. Enjoyed reading it.

  4. Michel

    Michel

    08 August 2013 @ 10:12AM #

    Wow, amazing article! Will wait for Part 2 impatiently!

    Btw, the Alex Charchar’s article (The Secret Law of Page Harmony) is also an amazing piece! I’m reading it right now, and enjoy every word (and every illustration) of it! :-)

  5. Martin

    Martin

    08 August 2013 @ 10:17AM #

    Posts about what you did are so much more useful than posts about what everyone else should do. Nice one, let’s see more of these everyone.

  6. James Rice

    James Rice

    08 August 2013 @ 10:46AM #

    Thanks for sharing this Elliot. Always nice to see a bit of behind-the-scenes.

  7. James Fenton

    James Fenton

    08 August 2013 @ 01:10PM #

    Really interesting stuff. I often get caught up in getting my baseline grid and structural grid to align perfectly, and usually end up breaking one or the other and relying a little more on instinct, so its nice to read others do the same.

    All the best with the release next week :)

  8. Elliot Jay Stocks

    Elliot Jay Stocks

    08 August 2013 @ 02:26PM #

    Thanks for the kind words of encouragement, guys! Really glad you found this useful. I’m looking forward to writing part two!

  9. Jason Bradberry

    Jason Bradberry

    08 August 2013 @ 03:26PM #

    Thumbs up! Look forward to part two.

  10. Joseph Blunden

    Joseph Blunden

    08 August 2013 @ 04:08PM #

    This is wonderful, looking forward to part two. Have you considered writing a short book on the subject?

  11. Leban Hyde

    Leban Hyde

    09 August 2013 @ 01:49AM #

    Thank you for sharing your typography and grid with the rest of us. Always interesting to read about other designers’ grids. That’s something I think one could spend a lifetime on experimenting, adjusting, and tweaking. And I share your love for the super families (or work horses). Always nice to mix and match to give diversity to the layout while maintaining unity within the overall system.

    Cheers!

  12. David Hickox

    David Hickox

    10 August 2013 @ 07:57PM #

    Very cool to get a peek behind the curtain and to see the thought process that went into creating Digest. And thanks for the introduction to Tabac. It’s a gorgeous typeface.

  13. Conor MacNeill

    Conor MacNeill

    12 August 2013 @ 10:36AM #

    Very nicely done! These types of grids can also easily be used in photography to good effect.

  14. Sebish

    Sebish

    20 August 2013 @ 06:43PM #

    Very good post. I like this kind of post “behind the scene”. This is interesting. Thank for share it !

  15. Adam Wilson

    Adam Wilson

    22 August 2013 @ 04:09PM #

    I can honestly say in 9 years of editorial design (newspapers and magazines) I’ve never seen the Van de Graaf Canon, but each to their own. Looks nuts!

    Do you not use margins between the columns Elliot? I’ve always started with 16 or 12 column grids but tend to play with the inner and outer margins depending on publications thickness.

    Made for good reading though, thanks for sharing.

  16. Patrick Burtchaell

    Patrick Burtchaell

    29 August 2013 @ 01:15AM #

    Very nice work—I love reading about concepts like this. It would be interesting to put a grid concept like this put to use on a responsive web design.

  17. Sigurdur Armannsson

    Sigurdur Armannsson

    01 September 2013 @ 10:06PM #

    Thanks for this article. I love this kind of case stories.

    About the „slipage“ of the baseline. You could use http://font.is/EasyGrid/EasyGridCalculator.htm to calculate the baselines to fit exactly to the page height.

    Regards,

  18. Kevin Lorenz

    Kevin Lorenz

    05 September 2013 @ 01:46PM #

    Enjoyed reading it a lot!

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