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 talk­ing about typo­graphy, what is a baseline? Wikipedia gives us this defin­i­tion: ‘In typo­graphy and pen­man­ship, the baseline is the line upon which most let­ters “sit” and below which des­cend­ers extend.’

Ok great, but why would I give two hoots about that? Well hope­fully because you are pas­sion­ate about design­ing great look­ing web­sites. In my humble opin­ion, the found­a­tion of an amaz­ing site is its typo­graphy and this is where a baseline grid comes in. The basic premise behind a baseline grid is to align all text on a web­site so that it flows smoothly. A baseline will ensure appro­pri­ate lead­ing (line-height) and is invalu­able in any lay­out that uses columns.

Lets get stuck into it! As I will be cre­at­ing a respons­ive baseline, built using ems, set­ting a default font-size on the body ele­ment (or html ele­ment) ensures that all browsers will render the fonts con­sist­ently:

body {
    font-size: 100%;
}

Using 100% will res­ult in browsers ren­der­ing font that is equal to their default font-size (16px). Next we need to cre­ate a typo­graph­ic scale, this is the hier­archy that will define the font-sizes for our typo­graph­ic ele­ments. I like to use the fol­low­ing 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 math­em­at­ics can get con­fus­ing. An em is a rel­at­ive unit, 1em is one times the cur­rent font-size and 3em is three times the cur­rent font-size (remem­ber­ing that our cur­rent font size is 100% or 16px). To con­vert our typo­graph­ic scale to ems we use a simple for­mula: tar­get font-size divided by cur­rent 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 math­em­at­ics as a com­ment to pre­vent any con­fu­sion down the line.

Now that we have our typo­graph­ic scale in ems we need to set up an appro­pri­ate line-height. It is this line-height, along with the bot­tom mar­gin of our ele­ments, that is going to uni­formly align our dif­fer­ent typo­graph­ic ele­ments, cre­at­ing our baseline. The gen­er­al rule of thumb for read­able 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 easi­er num­ber to work with math­em­at­ic­ally and I don’t mind giv­ing my lines of text a little bit more breath­ing room. Given that our base font-size is 16px our line-height will be 24px (16px times 1.5).

Remember that little for­mula we used to work out our font-sizes in ems? Well we are going to use it again for our line-height; tar­get line-height divided by cur­rent 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 lar­ger.

The only thing left to do now is to add some spa­cing to each of these ele­ments. I like to use the value of the line-height for my mar­gin-bot­tom, that way our ver­tic­al rhythm looks nice and uni­form. Here is our com­pleted 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 found­a­tion for beau­ti­ful typo­graphy. It can be quite a chal­lenge work­ing with ems but the pay-off is a well coded, access­ible and respons­ive site. Your vis­it­ors will appre­ci­ate the time and effort you have put in!

Tweet this