Web Typography for the Newcomer (Rhythm)

Posted by David Estes on Jan 22, 2013

When designing a website, taking the time to integrate good typography can mean the difference between a good site, and a GREAT site. Typography is a fascinating topic, of which I am still learning a great deal, that requires you to be picky, and focus on even the small details. There are many aspects to typography, as well as limitations when translating these practices to the web. Let's talk about some good practices to follow when designing a website.

Typographic Rhythm

Typographic Rhythm is the vertical spacing of lines of text. By being consistent about our vertical line spacing (using a standard line height or multiple) we create a rhythmic pattern. This pattern makes the reading of text more pleasing to the eye (not to mention easier).

In web design, this idea of rhythmic flow is often overlooked, resulting in jarring affects when transitioning between body styles, or in multi-column layouts that don't line up. Adding these flows to your web design is not too difficult and can be done fairly quickly using the CSS line-height property as well as margins.

For example, lets say we have a web design with a baseline font-size of 14px and line-height of 18px (1.286em). This is what the start of our CSS might look like:

body {
 font-size:14px;
}

p {
 font-size: 1em;
 line-height: 1.286em;
}

So far so good right? Well there are a few more things we need to take into consideration. For one thing, browsers like to setup some default margins when using p tags. In most cases the default margin is set to margin: 1em 0;. But, that wouldn't line up with our typographic rhythm, since our baseline is 18px instead of 14px. A good rule of thumb, when it comes to setting up margins between blocks of text, is to set the margin either to line height, or a multiple thereof.

p {
 font-size: 1em;
 line-height: 1.286em;
 margin: 1.286em auto;
}

Now we're getting somewhere. We have made our body text easier to read by incorporating a rhythm! But what about those larger headlines, or even the ones that are of a larger font-size than our base line-height (18px)?

Let's look at an h3 element and assume we want it to render at 18px:

h3 {
 font-size: 1.286em; //18px as determined by our body font at 14px*1.286
 line-height: 1em;   //relative to font size of current element (18px)
 margin: 1em 0;
}

Well that seemed pretty straightforward when the font size matches our base line. But what if its 20px or larger for that matter? The answer is to use multiples:

h2 {
 font-size: 1.429em; //20px as determined by our body font at 14px*1.429
 line-height:1.8em;  //36px (a multiple of 18) 20px*1.8
 margin: 1.8em 0;
}

Might want to keep a calculator handy, as dealing with all these em units can get intense. It is also worth noting that I could make the line-height less than the font-size (in some cases) down to 18px to maintain rythm (i.e. line-height: 0.9em;). This can work great for short, single line headlines, but I wouldn't recommend it for headlines that have the potential to span multiple lines or wrap.

Now you have the basics to give your design some typographic polish. Go give it a shot and see what you come up with. There are many more facets to typographic styles you can use on your website, and I will touch more on those in the future.