RWD – Vertical Rhythm Part 2

Posted on: December 15th, 2014 by alemieux

Last time, we looked at a method using the Golden Ratio to arrive at a vertical rhythm in our designs. This time, we’ll look at a few other methods for arriving at a vertical rhythm.

Typographic Scale

Another method utilizes a Typographic Scale. The Golden Ratio we used last week on modularscale.com, could’ve been replaced with a musical scale, like a Major or Minor third. Finding a scale, we need to use that value for the line height throughout. This consistent value then balances everything on the page.

In this example, our body text is set to 1.063em or 17px. In order to get a comfortable measure, the Line Height was set to 1.25 or 20px. Remember that the Line Height value can be unitless, which is a unique characteristic of this CSS property.

A formula to get to the Typographic Scale in this example, is to multiply the Font Size by the Line Height:

1.063 x 1.25 = 1.32875

We can then round this down to 1.3 and this becomes the Typographic Scale. This value then becomes the unit by which we space everything out on our page. This Typographic Scale can then be subdivided for smaller increments to add to margin or padding values:

3/4 Scale .975
1/2 Scale .65
1/4 Scale .325

Since 1.3 is the scale, we can revisit the Line Height value. In order to define the Line Height with the typographic scale, we divide the Line Height by the Typographic Scale, so 1.25 / 1.3 = 1.223, a slight difference from 1.25, but more accurate to the scale.

Using the scale, we can find the font size and line height of other elements on the page. For example, an H3 on the page needs to be larger than the body font size, but smaller than an H2. To find the font size, multiply the body font size by the scale:

1.063 x 1.3 = 1.382em

To get the line height of the H3, divide the font size with the scale:

1.382 / 1.3 = 0.94

Since this may be too tight, we can use the subdivisions we calculated before and add them to the line height. We could add a half value to the line height, which would be:

0.94 + .65 = 1.59

We still need to do the math to get the line height right, so divide the font size by the scale again to get the line height:

1.59 / 1.3 = 1.22307692

If this is too much space for you, you can try another calculation with another sub-value.

The important takeaway with this method is that once you find the typographic scale, you consistently use it for all of your font size, line height, margin, and padding values. Here’s an example of this method in use:

See the Pen yyYdbj by Al Lemieux (@alemieux) on CodePen.

Base Unit

This method comes from using a baseline grid in print for vertical rhythm and again its central component is the line height. The first thing to do is find a comfortable font size and line measure. In finding the measure, you’ll need to find the proper line height value that offers enough space between lines – not too much and not too little.

Let’s say for example, that we come up with 22px for the line height and 18px is the font size. To utilize this method, we will need to use multiples of the line height value, so to find a better increment, we can use half of 22px which gives us 11px. If our font sizes and line heights are multiples of 11px, our base unit will work to give us the vertical rhythm we’re looking for. Here’s a sample style sheet with this method at work

body { font-size: 18px;
line-height: 22px;
}
h1 { font-size: 66px;
line-height: 66px;
margin-bottom: 22px;
}
h2 { font-size: 44px;
line-height: 44px;
margin-bottom: 22px;
}
p { margin: 22px 0; }

Of course all of this needs to be converted to ems to work and you know that formula already. In order to arrive at the appropriate line height though, we need to take the font size and divide it by the line height. In this case, since the values for font size and line height are identical, they’ll always equal to 1. Why do we do it this way? Our context has changed. We don’t divide by our base font size of 16px, we divide by the font size of the element we’re working on.

You can see an example of this method at work here:

See the Pen Typographic Scale by Al Lemieux (@alemieux) on CodePen.

Summary

This series on Typography has really opened my eyes to design and text treatments everywhere. I find that I’m looking at menus, posters, brochures, and websites with a more critical eye now. I can see where type works and where it doesn’t. I think the genius in these methods is in finding that consistency that works throughout a project that really holds well.

I want to thank Jeremy Osborn, Val Head, Tim Brown, Eric Meyer, and others for hashing out these topics and making them understandable and usable to all. I’m not done with this topic, but for time, we’ll start in on Media Queries.

Tweet this! | Bookmark at Delicious

Comments are closed.