How to Set Up a Baseline Grid

How to Set Up a Baseline Grid

Online tool

This post will take 3 minutes to read.

Firstly, when talking about typography, what is a baseline? Wikipedia gives us this definition: ‘In typography and penmanship, the baseline is the line upon which most letters “sit” and below which descenders extend.’

Ok great, but why would I give two hoots about that? Well hopefully because you are passionate about designing great looking websites. In my humble opinion, the foundation of an amazing site is its typography and this is where a baseline grid comes in. The basic premise behind a baseline grid is to align all text on a website so that it flows smoothly. A baseline will ensure appropriate leading (line-height) and is invaluable in any layout that uses columns.

Lets get stuck into it! As I will be creating a responsive baseline, built using ems, setting a default font-size on the body element (or html element) ensures that all browsers will render the fonts consistently:

body {
    font-size: 100%;
}

Using 100% will result in browsers rendering font that is equal to their default font-size (16px). Next we need to create a typographic scale, this is the hierarchy that will define the font-sizes for our typographic elements. I like to use the following scale: 16, 18, 21, 24, 36, 48. Let’s write that up:

h1 {
    font-size: 3em; /* 48 / 16 */
}
h2 {
    font-size: 2.25em; /* 36 / 16 */
}
h3 {
    font-size: 1.5em; /* 24 / 16 */
}
h4 {
    font-size: 1.3125em; /* 21 / 16 */
}
h5 {
    font-size: 1.125em; /* 18 / 16 */
}
h6 {
    font-size: 1em; /* 16 / 16 */
}
p {
    font-size: 1em; /* 16 / 16 */
}

Here is where the mathematics can get confusing. An em is a relative unit, 1em is one times the current font-size and 3em is three times the current font-size (remembering that our current font size is 100% or 16px). To convert our typographic scale to ems we use a simple formula: target font-size divided by current font-size. If I wanted my h1 to have a default font-size of 32px then I would divide 32px by 16px to get 2em. I like to add my mathematics as a comment to prevent any confusion down the line.

Now that we have our typographic scale in ems we need to set up an appropriate line-height. It is this line-height, along with the bottom margin of our elements, that is going to uniformly align our different typographic elements, creating our baseline. The general rule of thumb for readable text is that your line-height should be 1.4 to 1.5 times that of your font-size. I use 1.5 times myself; it is an easier number to work with mathematically and I don’t mind giving my lines of text a little bit more breathing room. Given that our base font-size is 16px our line-height will be 24px (16px times 1.5).

Remember that little formula we used to work out our font-sizes in ems? Well we are going to use it again for our line-height; target line-height divided by current font-size. Here’s how it looks in code:

h1 {
    font-size: 3em; /* 48 / 16 */
    line-height: 1em; /* 48 / 48 */
}
h2 {
    font-size: 2.25em; /* 36 / 16 */
    line-height: 1.333333333333333em; /* 48 / 36 */
}
h3 {
    font-size: 1.5em; /* 24 / 16 */
    line-height: 1em; /* 24 / 24 */
}
h4 {
    font-size: 1.3125em; /* 21 / 16 */
    line-height: 1.142857142857143em; /* 24 / 21 */
}
h5 {
    font-size: 1.125em; /* 18 / 16 */
    line-height: 1.333333333333333em; /* 24 / 18 */
}
h6 {
    font-size: 1em; /* 16 / 16 */
    line-height: 1.5em; /* 24 / 16 */
}
p {
    font-size: 1em; /* 16 / 16 */
    line-height: 1.5em; /* 24 / 16 */
}

As you can see I have doubled the line-height for h1 and h2 as the font-size is larger.

The only thing left to do now is to add some spacing to each of these elements. I like to use the value of the line-height for my margin-bottom, that way our vertical rhythm looks nice and uniform. Here is our completed baseline:

h1 {
    font-size: 3em; /* 48 / 16 */
    line-height: 1em; /* 48 / 48 */
    margin-bottom: .5em; /* 24 / 48 */
}
h2 {
    font-size: 2.25em; /* 36 / 16 */
    line-height: 1.333333333333333em; /* 48 / 36 */
    margin-bottom: .6666666666666667em; /* 24 / 36 */
}
h3 {
    font-size: 1.5em; /* 24 / 16 */
    line-height: 1em; /* 24 / 24 */
    margin-bottom: 1em; /* 24 / 24 */
}
h4 {
    font-size: 1.3125em; /* 21 / 16 */
    line-height: 1.142857142857143em; /* 24 / 21 */
    margin-bottom: 1.142857142857143em; /* 24 / 21 */
}
h5 {
    font-size: 1.125em; /* 18 / 16 */
    line-height: 1.333333333333333em; /* 24 / 18 */
    margin-bottom: 1.333333333333333em; /* 24 / 18 */
}
h6 {
    font-size: 1em; /* 16 / 16 */
    line-height: 1.5em; /* 24 / 16 */
    margin-bottom: 1.5em; /* 24 / 16 */
}
p {
    font-size: 1em; /* 16 / 16 */
    line-height: 1.5em; /* 24 / 16 */
    margin-bottom: 1.5em; /* 24 / 16 */
}

And just like that we have a foundation for beautiful typography. It can be quite a challenge working with ems but the pay-off is a well coded, accessible and responsive site. Your visitors will appreciate the time and effort you have put in!

Tweet this