9

I recently read some articles about the importance of good vertical rhythm/using a baseline grid for good typography in web design. I decided to try using a baseline grid, like the 960 grid pictured below, as the background image for a web design/WordPress theme I am currently working on.

960 grid

I am finding it very difficult to get everything lined up properly within the grid. I managed to get everything within the vertical grid at the default text-size(16px), but as I start messing with the size of headings, adding images, etc, items do not always stay aligned properly on the grid.

I would like to know how to improve my typography using vertical rhythm. Does anybody have any tips or techniques I should use?

Improve this question

3 Answers 3

Reset to default
7

The baseline grid in web design is a need academic puzzle but mostly impractical from a hard-coded mathematical standpoint. Since CSS has no concept of a baseline for type, it's technically impossible to get baselines to match.

You can come close to spacing things, but you eventually end up with something that may make sense when looking at the numbers, but likely is off visually and you end up straying from the formula to make sure things look right.

So, in summary, a visual rhythm is important, but build it from your gut, not some equations that will just drive you nuts implementing properly on the web.

As an aside, note that the concept of a baseline grid comes from the world of print design...specifically multi-column layouts such as in a newspaper where you want the type to line up from column to column as a preference. To make it easy to typeset that kind of publication, a baseline grid makes sense, and is relatively easy to implement in the world of DTP applications.

Improve this answer
6
  • 2
    Exactly -- you're mixing apples and orangutans. It's like trying to get the cover of a paperback book to play a Flash video. Unless you do everything as an image and your entire website is a JPG with image maps, it's just not going to happen.
    – Lauren-Clear-Monica-Ipsum
    Commented Sep 19, 2011 at 17:54
  • It is not that hard to make your css and html match the 960 grid. Afterall, coding is simply math. Besides that, basicly all the designers on (eg) themeforest.net use it. It is not as hard as you say it is. And yes.... the grid concept comes from the print world. However, the 960 grid system is converted for the web to match a minimum resolution of 1024x768.
    – Luuk
    Commented Sep 20, 2011 at 7:48
  • 2
    the 960 grid is primarily for creating horizontal grids and something I highly recommend on sites of even moderate sizes. It's a very useful tool. However, we're talking about a vertical type baseline. Yes, coding is math. Alas, browsers and the CSS spec made no particular accommodation for figuring out baselines of letterforms. You can ballpark it with your math, but you're at the mercy of individual browsers, operating systems, installed fonts and user preferences, so it's not at all 'simple math' to get the baseline type grid aspect of it working.
    – DA01
    Commented Sep 20, 2011 at 13:20
  • On top of that, design isn't always pure math. In fact, it's rarely pure math. Math gets us to a point, but beyond that, the aesthetic judgement of the eye has to come into place. I've built sites using a baseline grid system both for myself and other designers and more often than not, we have to scrap the baseline grid at the end to make it 'feel' right. I've decided that because of that, it's usually a wasted effort to get the baseline grid working as it's usually an arbitrary thing.
    – DA01
    Commented Sep 20, 2011 at 13:23
  • 1
    Hmm, my lack of reading ;) I did not notice it is only about the vertical rythem. I have to agree that i too not really use the 960gs for vertical rythem. Only for horizontal. The only thing i use vertically is "the fold". The rest i align (once again vertically) by "the eye".
    – Luuk
    Commented Sep 20, 2011 at 15:06
4

The vertical rhythm isn't hard to implement, especially if you start with a CSS reset. I stumbled upon this link http://24ways.org/2006/compose-to-a-vertical-rhythm some time ago, and have since been using the technique in all of my designs.

What I've found is that after working with a "canned" set of type declarations in my CSS file (h1 - h6, p, etc. - specifically, size, line-height, bottom margins) it's very easy to deploy.

Here's a background image that has helped me see things a little clearer...especially, when I was first using the vert rhythm.

enter image description here

It's may be tough to see, but when it's repeated as a background-image: you'll see a 20x20 grid.

HTH

Note: I like the typography in the sites that have used this technique better than those that have not. In both cases however, there always seems to be an element or two that have to "cheat the system" to look "right". I've also found that paying attention to the overall line-height (say 18px for a 12px font base) makes setting margins and padding around images, graphical headers, and the like pretty straight forward (18px). Also...the urge to calculate everything goes away...you'll start to notice a "vertical rhythm" about the layout, and be able to pull the right padding/margin/line-height from a very short list of values in your head.

Improve this answer
2

This very nice article on Smashing Magazine about baseline and vertical rhythm gives you some insight into both the importance of baselines in webdesign and how to implement them in your css. It uses font-size, line-height, padding and margin on default html elements to have everyting line up with your baseline grid.

To help match everything to the grid, a background image is very useful, as Dawson suggests.

I have been following this technique for my latest few designs, and I think it really pays off.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.