Setting Type on the Web to a Baseline Grid

by Wilson Miner

51 Reader Comments

Back to the Article
  1. Really? I’d love to see some stats on that”¦ :)

    Heh. I wish. I admit that I’m just making an edcated guess. We have no way of now how many of those IE6 users actually need to resize their text. But, it’s safe to assume it’s a pretty small number, isn’t it? If we, as good designers, are choosing reasonable font sizes to begin with, then it ought to only be people with low vision and no glasses to accomodate for it that really need to resize text, right?

    I have no supporting stats, but I can’t see how this could possibly be a very big number.

    Copy & paste the code below to embed this comment.
  2. John, I basically agree with everything yo’ve said. The bototm line on text resizing is that it boils down to the same thing every design decision does: know your audience, know your product, and know it’s goals. Not every site needs perfect text resizing. Not every site has only about 35% of it’s users on IE6 (although, our newspaper sites serve a very general audience, so I’d expect that’s a typical-ish number). And so forth.

    To prove that I believe that it depends on the siuation, i’d point to BoomerGirl.com, a site I recently designed using all ems (both for type and layout) to ensure great text resizability. Why? Because that site is aimed at an older user, who is more likely to have low vision.

    “Lazy” is a pretty touchy word to use, though. It’s not about personal work eithic, it’s about business decisions. If I decide that text resizability it’s a priority, it’s because the extra time put into making it happen doesn’t warrant the benefit. There are only so many resources to go around, and if it’s determined by the project manager than there’s a minimal need for text resizing, and a very large need for some whizzy flash widget that is going to directly bring in dollars, then the flash widget will oten win. This is pure business. It’s not personal, it’s not lazy, it’s not insensitive. It’s just about business. For that reason, I’d avoid calling any web designer “lazy” when you don’t know what the limitations and demands they were working under was.

    But, overall, I agree with you. :)

    Copy & paste the code below to embed this comment.
  3. Kevin’s illustration for this piece is freaking awesome. Great work, Cornell.

    Copy & paste the code below to embed this comment.
  4. I sort of hate to admit it, but I like the way IE handles text sizing. Since IE will resize text set in EMs and not in PX, it allows the savvy designer to make some text on the page resizable by the user, and force other text to remain fixed.

    This allows you to let the user scale up the body copy to a more readable size without blowing out your navigation or causing fragile UI elements to look broken. If a user absolutely has to resize all the text on the screen they can do that (as mentioned in comment #14).

    Because it is much easier to set fonts in pixels, it would be ideal if IE would allow fonts set in pixels to be resized AND there were also a CSS property that would dis-allow font resizing when and where the designer desires it.

    Copy & paste the code below to embed this comment.
  5. Great article. It helped me a lot. Designing in pixels helps maintain the baseline grid. As a matter of which measuring unit to use for font-size, it is what works well for the design. Accessibility can be achieved in many ways. Every project does not have to be px the same goes for ems. I agree with Jeff Croft. Good lesson Wilson, Thanks.

    Copy & paste the code below to embed this comment.
  6. I think giving the text sizes in pixels is just OK. Anyway when designing a layout for the web i design in pixels (photoshop, fireworks), i set up rules in pixels.

    Unless i design something really basic that does not get messed up when scaling, i think using pixels for text sizing is just better (and easier) to get closer to that layout i designed in photoshop. If you don’t use stylsheets you don’t use font sizes, so it doesn’t matter if you gave them in ems or pxs.

    I think in some way a layout is about pixelperfection, when designing you have to make decisions, it is all about decisions. You put down exact sizes, spaces etc. and you design to see exactly the same – as much as possible -  result in the browser. So why not use pixels?

    But maybe i am not right.

    Copy & paste the code below to embed this comment.
  7. Hey, thanks for the great article. It inspired me to write “TypoGridder”, it’s a little javascript you can use on your sites to display a grid overlay.

    Have a look on: http://milianw.de/projects/typogridder

    Also note that I wrote a bookmarklet version (see link above).

    Hope it helps the one or the other of you.

    Greatings

    Copy & paste the code below to embed this comment.
  8. Is it fair to suggest that for some sites its reasonable that anything less than modern will not have the same quality of typographical rhythms as those that are modern? At what point does settiing our type to the grid become a point of usability (readability) that might appeal to accessability (I’m going bility bility bility crazy!). Progressive enhancement right? I’m still working out where to draw the line on these things – which of course is always dependent on a myriad of other factors, but nonetheless, what thinks you folks?

    Copy & paste the code below to embed this comment.
  9. Matthew, I think your question is a good one. For those that are in IE-mac or IE-5.5 or lower, I think they are used to a less than stellar experience online (not that they are necessarily even aware of it). The extra mile of adjusting the baseline can be appreciated by those with more modern browsers, and for the time-being also for the 800-pound (but shrinking) gorilla, IE6. For older browser users, I think they’re happy if a site doesn’t have a broken layout; but they’re certainly used to many visual quirks and shortcoming in their browsers. A baseline grid is probably the last thing to worry about in those browsers to get perfect.

    Copy & paste the code below to embed this comment.
  10. I find that typographers look at me with a certain kind of hatred.

    I annoy them be telling them they can’t use the Font they want to and that because of flexible font sizes the can’t position every word exactly where they want it. I now finally have something I can offer them as a token of peace :)

    Thanks for a good read Wilson, and an eminently useful technique. Good stuff.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.