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('');

What about 16px? Bam:

background: url('');

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!

Em and ens

Use spaced en dashes – rather than em dashes or hyphens – to set off phrases.

Standard computer keyboards and typewriters include only one dash, but a normal font of roman or italic type includes as least three. These are the hyphen and two sizes of long dash: the en dash – which is one en (half an em, M/2) in width – and the em dash—which is one em (two ens) wide.

In typescript, a double hyphen (- -) is often used for a long dash. Double hyphens in a typeset document are a sure sign that the type was set by a typist, not a typographer. A typographer will use an em dash, three-quarter em, or en dash, depending on the contest or personal style. The em dash in the nineteenth-century standard, still prescribed in many editorial style books, but the em dash is too long for use with the best text faces. Like the oversized space between sentences, it belongs to the padded and corseted aesthetic of Victorian typography.

Used as a phrase marker – thus – the en dash is set with a normal word space either side.

Use the em dash to introduce speakers in narrative dialogue.

The em dash, following by a thin space (M/5) or word space, is the normal European method of marking dialogue, and it is much less fussy than quotation marks:

— So this is a French novel? she said.
— No, he said, it’s Manitoban.

(via Robert Bringhust, The Elements of Typographic Style)

Near the top of the list (most unsuitable for letterspacing) would be Renaissance italics, such as Arrighi, whose structure strongly implies an actual linkage between one letter and the next. A little farther along would be Renaissance romans. Still farther along, we would find faces like Syntax, which echo the forms of Renaissance roman but lack the serifs. Around the middle of the list, we would find other unserifed faces, such as Helvetica, in which nothing more than wishful thinking bonds the letters to each other. — Robert Bringhurst, The Elements of Typographic Style