running words around
design education and visual communication
authored by chris m hughes

You Can Be Serious

Friday, 9 October 2015

Amongst other descriptive terms, 'wonderous' and 'frustrating' sums up John McEnroe's famous performance during Wimbledon in 1980, when he yelled the immortal line 'You cannot be serious!'. Twice.  SuperMac clearly wasn't happy with the referee, but his real problem was with the baseline. The chalk flew up. It was right on the line. It was right on the line. Which fits nicely with the subject at hand.

Scale, units and measures may differ for print and digital design, but the essential basics of alignment, proportion, balance, whitespace and contrast - remain the same. One of most wonderous tools at your disposal to achieve these things across every format is the baseline grid.  This is a series of equally-spaced horizontal lines upon which text sits, to enable vertical rhythm as one reads down the page (and across it, if there are facing pages or multiple columns).

Using a baseline grid is the point at which you start to take layout seriously. But what can make it frustrating is that there is still no single shared method to create a baseline grid across all the standard tools in which you might design your layouts, namely Illustrator, InDesign, Photoshop.  One route that many designers are now taking is to bypass the standard tools altogether, and design for digital directly in the browser, where there are lots of grid tools, such as the grid extensions in Chrome.  But whatever tool the work is done in, its important to have a reliable way to set up an accurate and robust baseline grid.

The Baseline Grid

The baseline is the imaginary line along which typographic elements sit. Letters and words. But also sometimes, objects and symbols.  Setting up a baseline grid for various formats in a variety of tools requires different  techniques, so its worth examining how this is best achieved in each tool, and what the wonders and frustrations are of each technique.

InDesign has the most flexible set of tools to create any kind of grid. You can set up the document intent for print, digital publishing and web, and the margin, columns and gutter controls are very robust. These can be set up right at the start of a document, or added and adjusted later using the Layout and Create Guides options to create any combination of columns, gutters and rows.  The grid can be proportioned to the page or the margin, and toggled on and off.

The baseline grid is created separately through InDesign's preferences.  You can set the leading increment, control the positioning of the grid vertically, and arrange the layer options - grids in back, or grids on top. If you want to make changes, you just alter the increment.  The view threshold option gives you added control over the visibility of the grid at low zoom magnifications. 

In the paragraph tools you can then align text to the baseline grid, or free it up from snap.  The only thing you can't do with an InDesign baseline grid is rotate it to angles other than 90deg.

InDesign grid setup for Digital Publishing, with 3 columns, 30px gutters, 66px margins and 21px baseline grid.

With its multiple artboards, powerful vector shapes and alignment tools, the ability to use both layers and the arrange stacks in each layer, and both 300ppi and 72ppi canvas options, Illustrator is great for print and digital layout. You can quickly set up the columns for your grid by drawing a rectangle, using the Path > Split Into Grid option, and setting the width, gutter and column count values -


For the baseline grid, we draw a horizontal line with the line segment tool, at the width we want, and then use the Distort& Transform > Transform tool to duplicate that line with the move value (i.e. the leading in pixels or points that we require), and the number of copies - 

This combination is really powerful. The columns can be made opaque and locked in a layer, the baselines can be moved around, started anywhere on the canvas, replicated instantly across multiple artboards, and the increment can be edited easily in the Appearance panel.  Plus you can rotate the baselines to any angle. 

The one proviso is that because you can't convert the transformed line to a guide, you therefore can't snap to it, so make sure you use Illustrator's powerful zoom to get things done accurately.

Photoshop, up until now at least, has been a bit more problematic. Adobe CC is the first version of Photoshop to allow you to create multiple rows and columns in its guide options (an exact analog of the create guides tool which InDesign has had since CS3).

But in CS6 and below, all sorts of workarounds have been used to generate grids in Photoshop, from using the document grid, or painstakingly creating each guide, to using pattern-repeated transparent .pngs, and downloading .png grids generated by browser plugins.  And that's just for the columns.

Thankfully, there's a really useful free tool, the Guideguide plugin.  You can set up complex grids quickly, and edit, share, save and customise them very easily -

GuideGuide 12 column 960 grid with 18px baseline grid in Photoshop

The one drawback perversely enough, as you can see above, is that Guideguide creates guides. It can't create solid columns, so that your canvas can look daunting to work in with so many criss-crossing guides. A better option is the combination of solid vertical columns and horizontal lines, a lot like the combination used in Illustrator.

But Photoshop can't generate the column grid with the same tools as Illustrator. There is a tedious way to fill in the columns between each guide, but you'll use a lot of layers and waste valuable time. A quicker solution is to make the column grid in Illustrator, then export it as a transparent PNG and place it in the top layer of your Photoshop file. Then set up the GuideGuide rows. With this combination, as well as something that's easier to look at, you can lock and toggle the columns and the baseline grid separately.


Grid combination - 940px 12-column PNG and GuideGuide baseline.

If you do want to be serious without getting frustrated, once you have the grid combinations you like, keep them saved as templates, or set up your own actions in Illustrator and Photoshop to automate the main steps.