1 Great piece!

Great article, Wilson. Love it.

I will add one point: if you take the time to get all this working one, you should be able to reuse it over and over again. Yes, getting the baseline grid right on the web is a bit tricker than it should be, but once you’d done it, it’s pretty easy to maintain.

Consider building a CSS typography framework that you can reuse from project to project. We’ve recently done this at my day job, and it’s been really, really handy. Every project overrides certain aspects of the framework, but having a great starting point that already establishes a nice baseline grid is a huge time saver.

Great work, my friend.

posted at 04:12 am on April 10, 2007 by Jeff Croft

2 About EM's

Thank you for another few reasons to use pixels instead of EMs or percents. It is very interesting question: should we use pixels or not.

My opinion: using EM it is not so complicated as it seems. You can compose vertical rythm with assimetric margins (real beaty!) and it will work even in IE6 (with JS of course). Calculating – it is not real problem for real typography fanatic :) Please check this test page: http://warmrobot.com/lab/vertical_rythm/test7.html But one BIG PROBLEM: round-up errors in… Opera. Even in the last version. Test pages for Opera: http://www.brunildo.org/test/emarg.pl http://steve.pugh.net/articles/opera-bug-compfntsize-rounding.html So, this is the only reason why I think about using pixels in the future works.

posted at 06:06 am on April 10, 2007 by Igor Frolov

3 About EMs

I have used EMs on my site and it can get quite complicated; however, if you do most of the maths before hand it doesn’t have to be. I.e. know your base font size, margins and padding with borders and without, etc.

posted at 06:51 am on April 10, 2007 by Andrew Rickmann

4 About readibility

On some project, it might a good thing not to clear out the grid. Meaning, keep—some of—it visible.

Having a thin, barely visible but there, line under each line of a long and complex text help some people to read it, and to do so faster and more easily. It might even be an Accessibility improvement.

posted at 07:37 am on April 10, 2007 by Jérémie Bouillon

5 Untitled

Steve Marshall has used the idea of a baseline grid to good effect on a recent redesign of his site which also includes optional visible baseline and layout grids.

posted at 11:02 am on April 10, 2007 by Matthew Pennell

6 Line heights in sidebar

Sidebars shouldn’t really be set on the same line height as body text. They should be set with the same ‘color’, that is their line height should be calculated using the same multiplier as body text. Then the first line of the sidebar should be aligned to the baseline grid with the rest hanging. How easy this is to do in html I’m not sure.

posted at 11:47 am on April 10, 2007 by Peter Brown

7 Steve Marshall site is broken in IE6

Perfect example of poor supporting of CSS by IE6. There is no vertical rythm in IE6!

Of course, we can fix it by JS. But there still problem with Opera and round-up errors.

I don’t want to use em, but I have to, if I think about IE6 and IE7

posted at 01:19 pm on April 10, 2007 by Igor Frolov

8 Untitled

Speaking of EM, great little site for pixel to em sizes. Really handy if you know your base font size.

http://riddle.pl/emcalc/

posted at 01:25 pm on April 10, 2007 by Matt Hobbs

9 Untitled

Peter is totally right saying the sidebar does not have to be vertical aligned to the main text. If you do so you are implementing a connection that is not there. Things are different htough in a multi column layout with equal columns, e.g. the main text is in columns (not readable in the web, but it’s just an example). There between equals the alignment is good, as you will also have everything else the same (text height and so on). But a sidebar can have different text shapes and therefore should be unaligned.

posted at 02:19 pm on April 10, 2007 by Handy Andy

10 A bit of history

Just wanted to add a bit about why aligning to the baseline grid became the custom in book (i.e., print) design. Most book papers have some amount of transparancy to them, meaning you can see the text from the back of the page through to the side you’re reading. If all the lines of text line up (or “back up”) to each other, then the text on the back of the page doesn’t interfere with your reading. If some lines are off the grid, you would see the text from the back of the page as a darkening of the space between the lines you’re trying to read, reducing legibility.

I think it’s nice that we can do this on the web now; it certainly helps you make decisions about spacing that could otherwise feel arbitrary. But it completely misses the point of why the baseline grid developed in the first place.

And there’s absolutely no reason (nor is it a good idea in most cases) to force a sidebar to the same grid, unless it’s the same face and size. Since sidebar type is usually smaller or a different face (or both), it should be set to a leading that is appropriate to it’s size and face, not the size and face of the paragraph it sits next to. (In a really strict grid, you would edit the sidebar copy so that the first and last lines align to the baseline grid of the main text. But that’s neither achievable nor really beneficial on the screen.)

posted at 02:36 pm on April 10, 2007 by mandy brown