CSS & The Baseline Grid


Many aspects of good typography are often overlooked when it comes to designing web sites. I’m not just talking about what fonts to choose, but also about typesetting to create a fluid body of text. While it may be tempting to leave type rules at their default values and let the browser sort it out (which is probably what most of us do, myself included until recently), this isn’t always the best solution. — Enter the baseline grid.

The baseline grid is a horizontal grid supporting the font characters within a document (in our case, a web page). Proper implementation of the baseline grid leads to an automatic horizontal alignment of text in different columns, creating a sense of harmony and vertical rhythm.

The baseline grid can also serve to position other elements such as photos, illustrations, tables, etc.

Need a visual example? Me too. Let’s take a look at text rendered using the browser’s default settings vs. text on a baseline grid. I think you’ll quickly be able to see the difference (and why the grid is better).

Fig 1. – Default text rendering.
CSS & The Baseline Grid - Fig. 1

Fig. 2. – Text aligned to a baseline grid.
CSS & The Baseline Grid - Fig. 2

Notice the difference? In the first example, the default font rendering is cramped, crowded, and there’s no proper flow of text between the two columns. Nothing lines up. In the second example, with the use of the baseline grid, the text is all evenly and proportionally spaced, easy to read, and lines up across both columns.

“Ok, I’m convinced. It looks better. So now what?” Now let’s make it happen.

Let’s start by defining an overall font size for the body copy. I’m going to use 12px. It’s a good size, easily readable by most users, so that’s where I’ll begin. You’re free to change this, of course, once you understand the formulas and principles involved, but for now, 12px it is. In addition, we want a little spacing between our lines of text, to make things more legible, so we’ll make our line-height 1.5 times our text height, or 18px.

Let’s also set our default font to Arial (or Helvetica) and get rid of the default margin and padding values that the browser applies (in practical application, you may want to only remove margins and padding from block-level text elements, but for now, I’m just going to get rid of them entirely)

[css]
* {
font-family:arial, helvetica, sans-serif;
margin:0;
padding:0;
}
body {
margin:3em;
font-size: 75%;
}
html>body {
font-size: 12px;
}
[/css]

Now that we’ve established our default font size of 12px, we want to reference everything in EMs so our users can still resize text. Let’s look at our paragraph text. If our font size is 12px, or 1em, and we want a 6px leading between lines, then our line height needs to be 1.5em, or 18px, just as we worked out above. Keep in mind that our margins should also be in multiples of our line height.

[css]
p {
line-height:1.5em;
font-size:1em;
margin: 0 0 1.5em 0;
}
[/css]

Headings get a little tricker. I want our H1 tags to be nice and large, let’s say, twice our line height, or 36px. In this instance, it’s pretty straightforward. Our line height needs to double, and our text size needs to match our line height. I don’t want to add any extra margins or padding.

[css]
h1 {
line-height: 3em;
font-size:3em;
}
[/css]

What happens if we want our heading to be, let’s say, 22px? Well, there are a few formulas we can use to determine line height, font size (in em) and margins.

CSS & The Baseline Grid - Fig. 3

In our case, this works out to 36px / 22px = 1.6363em (because 22 is larger than 18, we need to span 2 lines, or 36px (or 3em)). This is the value for our line height. We can also apply this value to our top and bottom margins. For asymmetrical margins, just make sure that the value adds up to 1.6363em or multiples thereof. Of course, you can also leave the margins at 0.

To determine the font size in em of 22px text, we would then use the following formula:

CSS & The Baseline Grid - Fig. 4

So for our example, this would be 22px / 12px = 1.8333em.

Therefore, the CSS for our H2 tag would look like this:

[css]
h2 {
line-height: 1.6363em;
font-size:1.8333em;
margin:1em 0 0.6363em 0;
}
[/css]

See our margins? They’re not symmetrical, but they add up to equal the value of our line height, so it keeps with the flow of the grid and doesn’t break the text.

That’s it. We’re done. With these two simple formulas, you can maintain the vertical flow of text on your web site and keep a harmonious balance that’s easy to read and just feels right.

In closing, I’d like to say that I hope you found this article useful. I know I’m not the first person out there to cover this topic, but wrapping my head around the math took some time. I hope that the diagrams and formulas listed above make that easier for somebody, because once you understand the concepts, the final results are defintely worth the effort.

Also, special thanks to Curt over at Murderfly Multimedia for helping me get my brain sorted out on this one.

Blogging

{ 6 comments… add one }

8 comments on “CSS & The Baseline Grid

  1. Very nice typography tutorial! Your tutorials are very good.

  2. Ritwik on said:

    Hey!

    Really nice tutorial, although I knew it, I’m sure it’ll help loads of people.

    Keep it uP!

  3. mowgli on said:

    It seems much easier to make the webpage in CSS coding..thanks for the tutorial…!!!

  4. software_ghost on said:

    clean and simple tip.. thank you.

  5. Seth on said:

    One small point on this, the amount of digits after the decimal place for your em sizes aren’t supported, the max the works is two digits after the decimal which Firefox and other browsers that work correctly, the somewhat more pathetic browsers like Internet Exploder do support two but only support the first digit correctly, e.g. if you have font-size: 0.85em this will render correctly in Firefox and IE, changing the value to 0.9em will cause Firefox to correctly resize the text however IE won’t. Not so much an issue, just no real use in the recurring 3′s and 63′s in the em values.

  6. Seth on said:

    Correction, em sizing supports 3 decimals however I would still limit to two simply due to browser support.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment