Are Baseline Grids Useful In The Flexible Canvas Of The Web?

Posted: 03 Dec 2012 05:30 AM PST

Do you use baseline grids? A modular scale? Do you do anything to create vertical rhythm in your design? About a year ago I started adding baseline grids to most designs and more recently have looked into modular scales. I like the results, but also know the challenges. Are baseline grids appropriate for the web?

Recently I came across a thread on Branch that asks, Baseline grid or modular scale? Both? Neither? The discussion was led by people more knowledge about type and vertical rhythm than myself, so naturally I paid attention to what they said.

The letters b and g drawn by hand — FF Suhmo In Progress

Baseline Grids and Modular Scales

You probably know what both are, but let me offer a review.

You set up a baseline grid by choosing a baseline unit, typically your line-height (leading) and then setting other vertical measurements as some multiple of this baseline unit. The goal is to have all of your design elements sit directly on a baseline of the grid. The result:

adds vertical rhythm to your design
adds order to your design
is easier to read text
looks great, especially when text in columns lines up

The downside is they take time and effort. It’s not too difficult to set up a baseline grid for textual elements, but it becomes increasingly challenging when non-textual elements like images and forms are introduced. It’s even harder to maintain as future images need to be cropped precisely.

It gets even more difficult when we consider responsive design. The image you cropped so it would sit on on the baseline when the browser is open to 1200px is no longer on that baseline when the browser width is reduced or expanded.

Modular scales are a little more flexible. You choose a set of values based on proportions like the golden mean or a musical 4th and you use those values to set typographic properties like font-size, line-height, and margins. A modular scale is more flexible because we aren’t trying to set everything on a rigid grid. Instead we’re using pleasing and meaningful proportions that add harmony and rhythm.

Working with a modular scale isn’t necessarily the easiest thing in the world to do either. Getting the numbers from the scale is pretty easy, especially when we have a calculator to do it for us, but figuring out where and when to use all those numbers still requires effort, knowledge, and an eye for type.

Advice from People Smarter than Me

Baseline grids and modular scales are relatively new to me. I’m still feeling my way around with both. That isn’t the case for the designers in the Branch thread.

I found the thread via a post by Jason Santa Maria that pointed me there. The post, Baseline Grids on the Web was Jason’t response to the discussion. He isn’t a fan of baseline grids on the web and offered some reasons why. You should definitely read his post, but here’s the gist

All grids, baselines included, are tools to improvise with, not formulas for success.
Baseline grids are difficult to maintain on the web and easy to mess up.
Current design tools lack the control necessary to work with baseline grids.
The rhythm of a baseline grid is only apparent under certain circumstances.
Ratios and baseline grids can be too rigid for a fluid and flexible web.
Baseline grids are more useful in print where you can sometimes see the text on one page lining up with text on another page.

The theme behind most of the argument against baseline grids (and perhaps modular scales) is they’re hard to maintain and the effort might not be worth the reward. I’d agree they’re hard to maintain 100% of the time, but relatively easy much of the time. The question is does it need to be all or nothing. Can we skip the last few % to avoid much of the effort. while still reaping most of the benefit.

Some like Joni Korpi suggested we could.

Again, on the web these grids are all about the rhythm, not the baselines. It doesn’t even matter if you break the rhythm at some point, as long as you pick it up again.

He further suggested they aren’t as hard to set up as others claim and offered some advice for how he develops a baseline grid and incorporates a modular scale.

He also offered the following

When deciding the dimensions, margins or paddings of any element, try lines(1), lines(x) or lines(1/x) first. If none of them work — which rarely happens — try something else. It doesn’t have to be any more complicated than that.

And if the main stumbling block is indeed the difficulty in setting them up and maintaining them perhaps some Compass mixins could help alleviate the difficulty.

I’d encourage you to read through the thread. It won’t take more than a few minutes and there are some interesting thoughts on both sides of the discussion.

It’s All About the Rhythm

Again, the idea behind both baseline grids and modular scale is to give vertical rhythm to your design. I like what rhythm does for a design. As soon as I started adding baseline grids to my work, I thought my work improved immensely.

Type does need to be judged optically, but it takes time to develop an eye. In the meantime a baseline grid can be a useful guide.

At the same time I agree baseline grids and to a lesser extent modular scale can be difficult to work with. Once or twice I did try to create a perfect baseline grid, but that perfectionism didn’t last long. The reality is in the flexible canvas we work in, elements are going to fall off the grid and break the rhythm you so painstakingly tried to perfectly control.

With that realization, my approach has become to work with baseline grids more flexibly and drop the perfectionism.

On this site the baseline grid is most apparent at the top of each page/post where the meta information on the left lines up with the text on the right. Further down the page it’s mostly a single column of text. If an image throws things off the grid, so what?

The basics are set on the text and if an image breaks that rhythm every so often I’m not going to worry too much about it. The rhythm is back after the image what’s really lost. It’s quite easy to keep everything on the baseline in the one place in the design where’s it really noticeable.

The pull quote just above is another example where the rhythm is broken. Again, so what? I’m breaking the rhythm by pulling it slightly out of the text anyway.

A quote from Chris Armstrong probably sums up best what I think after taking another look at the discussion.

Type does need to be judged optically, but it takes time to develop an 'eye' for this, and in the meantime I think a baseline grid can be a useful guide when choosing line heights and margins. Fair enough it’s probably not worth spending several hours making sure everything lines up to a baseline (since it probably won’t anyway), but it can still be useful to *aim* for it.

While I learn to develop my eye, I’ll continue to aim for the baseline, but I’ll be fine if my arrows land in the circle just outside the bullseye, instead of hitting the target dead center. Perhaps in a few years and with a better eye for type my thoughts about baseline grids will change. For now I’ll aim in their direction.

Summary

Baseline grids and modular scale are good things. Both add vertical rhythm to a design and I’ve personally found working with them has improved the quality of my work. At the same time I acknowledge they can be more difficult to work with than they seem. Given the fluid nature of the medium, it’s inevitable that elements are going to fall off the grid.

Is it worth all the effort to make them perfect? Probably not, but do you need to worry if some elements fall off the grid? Again, probably not. A rhythm that’s broken here and there isn’t necessarily a bad thing. It might even be a good thing as it adds surprise and interest.

Choosing a modular scale and generating the values and proportions from that scale is relatively easy. Picking a number from the scale as your line-height and using it as a baseline unit is also fairly simple. Setting a few base styles in your css aiming for a baseline grid is also less than difficult.

Until my eye tells me otherwise, I’ll continue to use them, albeit in a relaxed way without the attempts at perfectionism. How about you? Where do you stand on using baseline grids and modular scales when working on the web?

The post Are Baseline Grids Useful In The Flexible Canvas Of The Web? appeared first on Vanseo Design.