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
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:
What about 16px? Bam:
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.
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)