Vertical Rhythm – Making Type Sing

Posted on by KrooKedUK

Up until recently I hadn’t been giving any attention to the vertical rythym of my designs. That’s not to say that I never altered the line-height or margins of my type, but what I did not do was calculate these, instead using my own instinct and how much spacing I thought there should be. This didn’t result in some disastrous piece of work, but now that I am setting my type to a baseline grid I notice it creates a different feel and flow to the content, one that is pleasing, but it’s hard to say why. It could be because we are creating content which does not change unexpectedly, we are creatures of habit after all.

Below is an explanation of what Vertical Rhythm is from the 24 Ways article – Compose to a Vertical Rhythm.

On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained.
Richard Rutter

So we can see that it boils down to spacing, which is true of everything in design, essentially we are just moving and spacing elements around. OK, so vertical rhythm is important, but how do we achieve this? Simple, by creating and utilising a baseline grid. This involves some Math; saying I’m not fond of Math would be a great understatement but I don’t find this task tedious at all, it’s very easy.

Next I’ll cover the process I took when creating a Baseline Grid for my blog.

Setting type to a Baseline Grid

The blog post – How to Set Up a Baseline Grid by Joshua Hibbert is excellent at explaining this and is where I learned how to create a baseline grid instead of relying on Baseline grid calculators.

I will be using ems as I believe setting type with pixels isn’t a good practice, but I do include the pixel values as a reference to help with the calculations. You will see what I mean when you read on.

body {
    font-size: 100%;
}

Setting the font-size to 100% means we are using the browser’s default size which is 16px. If you wanted 12px you would set the font-size to 75%. To work this out you take the base size (16px) and divide it by the target size (12px) and multiply it by 100 to get the percentage: 12 / 16 = 0.75 * 100 = 75. Next I chose the font sizes I would like to use, which are 16, 18, 21, 24, 36 and using the same formula as above created these values in ems and ended up with the following:

h1 {
    font-size: 2.25em; /* 36 / 16 */
}

h2 {
    font-size: 1.5em; /* 24 / 16 */
}

h3 {
    font-size: 1.3125em; /* 21 / 16 */
}

h4 {
    font-size: 1.125em; /* 18 / 16 */
}

h5, h6 {
    font-size: 1em; /* 16 / 16 */
}

Adding the pixel values in comments helps serve as a quick reference if you need to change things in the future. So that’s the font sizes sorted, but you can’t just declare any old line-height or margins or you will break the vertical rhythm, instead you must use the same formula again to calculate these values.

For most text the line-height should be roughly 1.5 times the font-size for optimal readability, so we perform the following calculation: 16 * 1.5 = 24. Now we have our line-height we want to convert it to an em value. Using the same formula as we did to convert or pixel values to ems we can see the line-height is 1em. We can do the same to work out the margins. You’ll notice I have doubled up the line-height for the h1, this is just to give it a little more room to breathe.

h1 {
    font-size: 2.25em; /* 36 / 16 */
    line-height: 1.333333333333333em; /* 48 / 36 */
    margin-bottom: .6666666666666667em; /* 24 / 36 */
}

h2 {
    font-size: 1.5em; /* 24 / 16 */
    line-height: 1em; /* 24 / 24 */
    margin-bottom: 1em; /* 24 / 24 */
}

h3 {
    font-size: 1.3125em; /* 21 / 16 */
    line-height: 1.142857142857143em; /* 24 / 21 */
    margin-bottom: 1.142857142857143em; /* 24 / 21 */
}

h4 {
    font-size: 1.125em; /* 18 / 16 */
    line-height: 1.333333333333333em; /* 24 / 18 */
    margin-bottom: 1.333333333333333em; /* 24 / 18 */
}

h5, h6 {
    font-size: 1em; /* 16 / 16 */
    line-height: 1.5em; /* 24 / 16 */
    margin-bottom: 1.5em; /* 24 / 16 */
}

Setting type to a baseline grid isn’t at all hard and the small amount of work you have to do results in content which has a nice flow and is made easier and more enjoyable to read. I would say that’s worthwhile to do that little extra bit.

Of course it doesn’t stop with the type, all other elements on the page will affect the vertical rhythm. Robert Bringhurst puts this well in his book – The Elements of Typographic Style when he writes:

Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines.
These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase. This means the total amount of vertical space consumed by each departure from the main text should be an even multiple of the basic leading. If the main text runs 11/13, intrusions to the text should equal some multiple of 13 points: 26, 39, 52, 65, 78, 91, 104 and so on.

If we adhere to these principles we can create type which takes on the characteristics of music, we can almost make it sing to the reader.

References

This entry was posted in Design. Bookmark the permalink.