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.

The relevance of the baseline grid

Posted on 24 August 2011 17 comments

Article illustration for The relevance of the baseline grid

In the talk I’ve been giving at conferences this year, With Great Power Comes Great Responsibility, there’s a section where I mention baseline grids; specifically, what I’ve learned from doing a large-scale print project like 8 Faces. However, until now, I haven’t really covered the subject on this blog.

This morning I was interviewed about typography for an upcoming issue of Computer Arts and I prepared some screenshots for them. In doing so, I realised that one example was even more thorough than the one I’ve been showing in the talk, and that the example deserved a blog post. So here we are.

Some context

I’d never really done print projects that were that big prior to 8 Faces, so I was — shamefully — a little lazy when it came to setting up and following baseline grids. The same was even more true on the web, since adhering to a baseline grid is considerably more difficult online, especially when dealing with ems and adaptive layouts (although not impossible).

Because of that, one of the original aims of 8 Faces was to give myself a much-needed kick up the bum, and I’m happy to say that it served that purpose remarkably well. Even better than I’d hoped, in fact, because upon returning to web design work, I found myself with a new-found appreciation for baseline alignment and have tried to carry over a lot of the principles from the 8 Faces design into my online projects.

The example

To actually see what I’m talking about, here’s a page from the latest issue of the magazine. If you hover over the image, you’ll see the baseline grid.

The body type (at 7.5pt / 11pt) dictates the baseline grid and then everything else aligns to it. The small red text uses incremental leading to match every fifth line of its own type with every fourth line of the body type. The pullquote’s type is sized so that the x-height of each character takes up one baseline increment, as does the height of the borders above and below the quote. The images, too, follow the same baseline grid.

Hopefully this example demonstrates how important the baseline is: it literally informs the rest of the design, from other type’s size and leading, through to image placement, border height, and even padding between elements (set here, most of the time, at two baseline increments).

The lesson

So I can line things up. Yay for me. But the lesson here is not that we should use baseline grids (I think that was established many moons ago), but that their presence in a design is something rather more important.

You will have heard this before from people much smarter than me (like when Tim Brown said we need to design from the type outward, or when Mark Boulton said that we should take a content-out — not canvas-in — approach): when you consider that the baseline grid is derived from a combination of the typeface’s x-height and your desired leading, it proves one very important point: typography is at the centre of absolutely everything we do.

17 comments

  1. Andrew Newhouse

    Andrew Newhouse

    24 August 2011 @ 04:31PM #

    Very well said. I find that establishing any kind of grid system will make breaking from it (when appropriate) all the more powerful.

  2. abdusfauzi

    abdusfauzi

    24 August 2011 @ 03:34PM #

    the example was awesome! i never knew that you’re up to that level of detail.
    i’m amazed.

  3. Andy

    Andy

    24 August 2011 @ 03:41PM #

    Good stuff.

    I suspect the use of ems / % for font-sizes and line-heights and some simple yet consistent CSS would make this actually not too hard to achieve in the browser too.

    Thanks for pushing my typography education along Elliot :)

  4. Sharat B

    Sharat B

    24 August 2011 @ 03:43PM #

    That spread is really beautiful! It also serves a double purpose of making those who haven’t bought 8 faces feel guilty. Almost like everything was plann…HEY! You are a sneaky one, Mr. Stocks.

  5. Elliot Jay Stocks

    Elliot Jay Stocks

    24 August 2011 @ 05:09PM #

    Thanks guys. Glad it proved useful!

    @ Sharat: Well, there are still some copies available… nudge nudge, wink wink… ;)

  6. Arik Jones

    Arik Jones

    24 August 2011 @ 05:09PM #

    When you only have content to deal with in a design, using a baseline grid is simple enough. But you get into trouble when ads enter the picture and unforeseen inline image sizes come into play.

  7.  Jeff Adams

    Jeff Adams

    24 August 2011 @ 06:11PM #

    Grids are awesome. Mark Boulton’s posts are the king of grid post though, but since yours is shorter and you have a beard – you get a thumbs up.

  8. Chris Armstrong

    Chris Armstrong

    24 August 2011 @ 11:38PM #

    Great explanation. I’ve found that sticking to a baseline rhythm also helps with responsive layouts, since modules are more likely to line up when you move them about (since their height will always be a multiple of the baseline).

    Would love it if there were a way to force images to crop themselves to a height that’s a multiple of the baseline, would save the rhythm getting screwed up everytime you add an image to content :)

  9. Stewart Knapman

    Stewart Knapman

    25 August 2011 @ 02:30AM #

    Im curious to know how the incremental approach would work with font sizes larger than the baseline, or whether its better to work from the largest font size down.

  10. Kai

    Kai

    25 August 2011 @ 12:20PM #

    Hey Elliot,

    I find baseline grids in print absolutely helpful in guiding me around the page and from column to column. On the web, however, I think baseline grids are not only useless but can even have a negative impact on readability.

    Firstly, we usually don’t read longer texts across different columns on the web, which is one of the main reasons for using BLGs. Secondly, and this goes especially for content heavy sites with more complex layouts, we use too many different graphical elements, containers and font-sizes/styles (teaser boxes, banners, headlines in images etc.) to make good and consistent use of the BLG.

    I’ve been doing contract-based work on a site called www.theconversation.edu.au – a news website for academic opinion and research. The lead designers believe that baseline grids are helpful in guiding the users experience. In my opinion, this website is a good example why BLG do NOT work online (unless we are talking about extremely simple article pages with almost no accompanying content on the side). IMO the grid works against the whitespace that is necessary to separate certain elements visually. (see headline, byline, teaser text)

    About 1-2 years ago when Mark Boulton and a few other designer started taking the BLG online (and someone, I forgot who, came up with a Javascript solution to force-lock text into a BLG), there was a bit of a trend for portfolio sites to feature BLGs. I’m glad this trend didn’t prevail. For me, BLG do not fit into the flexible and responsive nature of content presented on a screen.

    Would love to hear your/everyone else’s thoughts on this. :)

    Kai

  11. Simon

    Simon

    25 August 2011 @ 03:51PM #

    I’m obsessed with the grid. I find LESS has been amazing In helping to automatically calculate line heights and padding and using variables makes it easy to change from site to site. I absolutely think it can be used in responsive layouts. Ems and percentages work very well together.

    @chris I have a LESS calculation that can set heights on elements—feed it an integer and it calculates the height based on that integer multipled by the line height to make elements fit the grid. Set the width to auto and it should scale the images down (might need a little JS to get it working in IE8 and down, haven’t tested that, but works in the good browsers.

    @Kai You can use as much whitespace as you’d like with the grid—just calculate the top/bottom padding as a multiple of the line height on the heading/byline element in question and everything underneath will fall straight back in line.

  12. Tim Brown

    Tim Brown

    25 August 2011 @ 08:34PM #

    Elliot, I’m not that smart. Case in point: I still haven’t made up my mind about how relevant baseline grids are to web content. I can see them making some sense for multi-column layouts, so that lines of the same text align. And part of me is a little too comfortable with the rigor of a baseline grid system.

    I think that once a typeface is chosen, achieving balanced text blocks is about deciding on type size, line length, and line height — in that order. Sometimes cascading typesetting decisions contradict the grid, which in my experience has proven acceptable.

  13. Jamie Neely

    Jamie Neely

    26 August 2011 @ 09:24AM #

    @Elliot @Tim @Kai In my experience the Baseline Grid has usefulness that ratchets, depending on where you are in the design life-cycle. Overall this makes it more good, than bad.

    Where I’ve found it a positive influence:

    1. When developing a ‘look and feel’ or broad visual direction

    The Baseline can help harmonise key typography styles so that they feel connected, regardless of the distance between those objects. Long before decisions have been made on layout.

    2. Making sweeping decisions about layout, scale and positioning

    The grid can act like a blueprint to scribble on-top of. Being a fixed structure, it helps cut down on deliberation about whether an element needs to move a few pixels north or south. It can also help vertical sizing of arbitrary groups of objects that aren’t built around typography (Adverts,video players etc).

    3. Baking it in to the design

    Basing the grid on Module height and literally building everything on-top (probably most applicable for newspaper-style web layouts like www.guardian.co.uk). This requires strong will and the experience to know when you should break away from the grid to get certain details just right. Mark Boulton did a great job of explaining a lot of this http://www.markboulton.co.uk/journal/comments/rethinking-css-grids

    4. After the main work is done

    A comfort blanket as part of a post-design/build checklist. Although I’m not generally keen on retro-fitting, I have found the grid handy for last minute tidy-ups on designs (even those that were developed without it). Think of it like quality assurance.

    5. For teams of more than one, after the website has launched

    Most websites are designed, built and maintained by more than one person. Teams change over time, and good handover isn’t always feasible. The grid can be one part of a number of clues to where design decisions came from, and how they should be made in the future.

  14. Kristine

    Kristine

    25 August 2011 @ 11:44AM #

    Thank you for sharing your thoughts!It was nice to read this post!

  15. Chris Cox

    Chris Cox

    29 August 2011 @ 10:32PM #

    @Stewart: Sizes larger than the baseline follow the same principle in reverse – just flip the ratio.

  16. rafael

    rafael

    07 September 2011 @ 08:10AM #

    thanks!!!

  17. Luke Jones

    Luke Jones

    22 September 2011 @ 12:45PM #

    I, like you, had neglected to utilise the baseline grid until recently. I read Khoi Vin’s fantastic book – Ordering Disorder: Grid Principles in Web Design – and started to apply the principles to my design for the web. He only touches upon it lightly in his book, but it’s still extremely useful.

    Since reading it, I’ve spent a lot more time coming up with body type sizes and concentrating on the baseline grid and the result has been a huge improvement on the vertical rhythm of the site.

© 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.