Setting Type on the Web to a Baseline Grid

by Wilson Miner

51 Reader Comments

Back to the Article
  1. I’ve been out of the web design loop for a while, having been mired in programming work, but I’m surprised how much debate can flare up over the simple use of px units.  Wilson predicted it and took measures to head it off right in the article, but still people obsess over it.

    I’ll be honest here.  I use px quite a bit.  I’m lazy, I admit it.  There are a lot of CSS techniques I want to develop and work with, but in the world of client work most of these ideas go on the extremely long list of nice-to-haves.  Even clueful clients are not likely to be impressed by immaculate code.  They would rather have their project done a week sooner and $1000 cheaper.

    So even though em over a bit clearer advantage than other types of pedantry (think b vs strong), I’m not interested in using it as some kind of litmus test.  This article was interesting to me because it’s a novel idea (on the web anyway).  I welcome discussion of the merits of the article, but I could do without the endless debates over a tangential issue.

    Copy & paste the code below to embed this comment.
  2. I’m a very occasional css user (thank God) and tried to use this design for a banal little site I’m working on. I have a list that wraps round a callout box and it won’t align in IE. If anybody’s got a solution to this I’d be pleased to hear it, but meanwhile can someone tell my why CSS has to be so hard? Every time I come back to it I seem to waste a day trying to do something that any reasonable person would consider trivial…

    Copy & paste the code below to embed this comment.
  3. 1. That person you’re shutting out of your site is one of the biggest taggers on del.icio.us, and their personal blog has a high Google page rank.  Wouldn’t you like a link from them?
    2. Your competition doesn’t use px on their site.

    Actually, I note the example page in this article with the grid showing doesn’t line up on the grid once you get a certain part of the way down the page.  Firefox 2.0.0.3, default font Verdana 16, minimum font Verdana 14.

    Copy & paste the code below to embed this comment.
  4. I wrote some “Javascript”:http://societe-electronique.de/javascripts/theme/setting_type_on_the_web_to_a_baseline_grid.js to auto-adjust image padding to fit the image to the grid. Adding some background and border; viola. (No example though; that blog is to new..)

    Copy & paste the code below to embed this comment.
  5. I have been working with a baseline grid ever since I read this article. I have found a few things I don’t care about, and have had some problems finding a work-a-round, but all that aside, I like the way it looks on a page, and have kept it.

    I’m still new to the EM world, so I have been using pixels for a long time now. 

    One question… why can’t font sizes in px be resized? And why can’t the line-height be adjusted upon resizing on of the text?

    I don’t have IE6 installed these days, so I have no idea of the problems px fonts cause. I guess I should up my reading knowledge!

    Anyways, great work. It was a good read!

    Copy & paste the code below to embed this comment.
  6. Nice article, but thought I’d mention that there’s a small but almost humorous spelling error in the title tag for the link to “Compose to a Vertical Rhythm”. The title tag says “Compost to a Vertical Rhythm”. I hope the author of that article is not offended. :o)

    Copy & paste the code below to embed this comment.
  7. i am trying to set up a baseline grid for myself. i have to say it’s pretty easy if you take only block elements like headings and paragraphs into account, and if you don’t care if at some font-size/font-family combinations you won’t get a pixel-precise baseline grid. what really gives me headaches are forms and tables. is there any example of anybody doing this pixel-perfect?

    Copy & paste the code below to embed this comment.
  8. I do agree with Mandy, the sidebar type should be set to a leading that is appropriate to it’s size and face and this can vary on each page, not the size and face of the paragraph it sits next to. This is a common mistake I have seen.

    Copy & paste the code below to embed this comment.
  9. You could add the gridbg.gif to all your pages, or make custom ones if your baseline is not always 18px—OR you could try this handy JavaScript bookmark link (follow url below to find it) and have it dynamically overlay grids for you on top of any page you visit:

    http://github.com/mikesmullin/Text-Gridder

    Enjoy! :)

    Copy & paste the code below to embed this comment.
  10. As much as the choice of type is important, the appropriate use of typographic measurements and white-space is an important tool of the trade when “setting type for the web”:http://www.sccc.premiumdw.com/web112/setting-type-for-the-web/.

    Copy & paste the code below to embed this comment.
  11. Thanks for bringing a favorite print topic of mine to the web design table!

    To help with the calculation of baselines, and picture heights, I use InDesign to do my early mockups. It might seem unheard of in the web world, but I have found that it helps me test the look and feel of my grids in advance before committing to a single grid, and the time and investment needed to calculate each individual piece of the site.

    And once I’m in the implementation phase, I always keep a post-it note full of grid multiples (18, 36, 54, … and way up) on my screen for resizing pictures, and setting CSS info on the fly.

    Copy & paste the code below to embed this comment.