Introducing BaselineMe

Web designers, do you lay out your sites using a baseline grid? Do you love the sweet, sweet smell of vertical rhythm in the morning? Do you hate blog posts written to sound like marketing text?

So do I. I also hate having to open Photoshop just to make a one pixel wide image every time I want guides for my baseline grid. That’s why I made BaselineMe.

BaselineMe is a little experimental web app that generates a vector image to use when establishing a typographic baseline grid.

How To Use It

Type set consistently on a baseline grid creates a beautiful vertical rhythm. Cue Bringhurst:

Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.

The metering of horizontal space is accomplished almost unconsciously in typography. You choose and prepare a font, and you choose a measure (the width of the column). When you set the type, the measure fills with the varied rhythm of repeating letter shapes, which are music to the eye.

Vertical space is metered in a different way. You must choose not only the overall measure ā€“ the depth of the column or page ā€“ but also a basical rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

When setting text with HTML and CSS, this rhythmical unit is determined by the line-height property.

If you have a line-height of 24 pixels, you’re going to want all vertical measurements to be multiples of 24 pixels. Therefore if you have headings, blockquotes, lists, or even images (including padding and margins) your text always ends up following the same cadence.

In order to check the math and ensure that the text is lining up properly, most designers create an image to use as a guide. Typically, this image has a width of 1px and a height of the line-height.

Then, they repeat the image vertically on the page using CSS. The declaration looks something like this:

background: url('img/line-height-guide.png') center top repeat;

And the result:

BaselineMe allows you to do the same thing, but you don’t have to create the image. You can just use a URL in the CSS declaration.

If you have a line-height of 24px, just use this:

background: url('http://www.baselineme.com/24');

What about 16px? Bam:

background: url('http://www.baselineme.com/16');

Easy, peasy, lemon-squeezy.

And if you want to save the file for local use, you can paste the URL into your browser. Save the page as an SVG and you’re all set.

For more details about setting type on a baseline grid, see this A List Apart article or this tutorial on Webdesign Tuts+.

To Any Programmers Out There

BaselineMe is a really simple application. Basically, it’s just an SVG file with a little bit of PHP in it to grab the URL. Pretty cool, right?

Anyway, I’m sure the are better ways to do it and more options that would be useful to people. If anybody out there is interested in improving BaselineMe, please email me!