RWD – Vertical Rhythm – Part 1

Posted on: December 8th, 2014 by alemieux 1 Comment

Last time, we talked about the Em unit as being flexible when the body is set to 100%. Now, we’ll turn our attention to vertical rhythm and the typographic scale.

“Don’t compose without a scale” – Robert Bringhurst1

Typographic Scale

I once attended a Photoshop seminar in Boston. A local photographer was going through what she termed a Mathematically solid way of correcting images. She touted the formula as the best way to correct images. She started in with the Histograms in the Levels dialog and showed how adjusting for the 3 separate channels produced better results. She talked about the Gamma levels and what to look for when making adjustments. The crowd was in rapt attention. As she finished up her final adjustment in the Blue channel, she finished off by doing something very unformulaic, something very unmathematical, she adjusted the midtone gamma level range to either lighten or darken the photo to taste, describing this last option as something that would be different for everyone and to trust your eye.

“It’s not about knowing all the gimmicks and photo tricks. If you haven’t got the eye, no program will give it to you.” — David Carson

It turns out that trusting your eye when it comes to Typography is a skill that once attained, will serve well in crafting type both for print and on the web.

“Anyone can use typefaces, some can choose good typefaces, but only a few master typography” – Information Architects

Line Length & Legibility

When the internet was in its infancy, text ran from one side of the viewport to the other. At that time, screen resolutions were pretty low, 800 x 600, but the text on some sites was difficult to read because of something we call a measure or the line length in typography. This is a comfortable distance that the eye travels across the text and is able to get to the next line to continue the story. A wider measure tires the eye as it has to read a longer distance and then attach to the next line. A short measure makes for quick reading, but too short and the text starts to hyphenate more quickly and presents other challenges.

The measure can be an arbitrary value and there are some guidelines out there, but in the end the measure is largely governed by the font that’s being used. A bolder font can hold up well with a wider measure, whereas an italic face or a thin serif needs a shorter measure. Robert Bringhurst, author of The Elements of Typographic Style has this advice on the measure:

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters.”2

He goes on to make suggestion for what the measure might be in shorter or wider situations, but he at least gives us a baseline. This is especially important in the context of Responsive design. Say for example, you have text on a page that looks great on a desktop at 1024 x 768, but then if you look at that same page at a higher resolution, say 1440 x 900, the measure will increase ruining the legibility. This is where max-width might come in handy:

section {
max-width: 45em;
}

On smaller devices, the measure may be fine, but now your text flow is more compact, invariably tighter. You might need to adjust for the smallest screen size in your media queries.

In beginning a practical exercise, you should have your fonts picked out for the body and headlines, subheads and whatever applications are needed. You may even have just one font with variations in weights and styles. When you have the type set, adjust the width of the container to find a comfortable measure. I’ve found that with 16px (100%) font size, a 32em – 34em (somewhere between 480 – 420 pixels) seems to be a good measure.

Line Height

The next thing we’ll need to do is find a good leading value, but on the web that’s more difficult than in print.3 The problem on the web is that there is no concept of a baseline and the CSS line-height property doesn’t behave like prints counterpart leading. Each line of text is placed roughly in the middle of the elements total height. This is contrary to the basic principle of a baseline grid: the bottom of every line of text falls on a vertical grid set in even increments all the way down the page.

This is relatively easy to accomplish in InDesign or QuarkXPress, where we can enforce text to adhere to the baseline grid. It’s a little harder to do on the web though. The 3 factors that we need to control are font size, line height and margins (although some argue that padding is a better control mechanism4).

Baseline Grid

InDesign (left) and Quark (right) allow you to snap the text to the baseline grid.

Line height is a key value to determine though and there are many schools of thought on how to achieve the appropriate balance. Assuming a 16px (100%) font size for our body text, most desktop publishing applications will enforce a general leading rule of 120%. That would give us a leading value of 19.2. That appears to be a healthy amount of space between lines, but you may prefer a tighter or looser leading depending on the font you’ve chosen.

Font Sizing With a Typographic Scale

We have our body text set, but what about our headlines, subheads or callouts? We certainly can put a lot of guesswork and trial and error into selecting appropriate font sizes for these, but we can also rely on a typographic scale. Musicians, architects and artists have similar systems that continue to work in delivering pleasing work that’s balanced and harmonious. Musicians have musical scales with specific characteristics that are tonally pleasing to the ear. A half step off and the dissonance is quite noticeable. Architects use proportion and physics to create spaces that are inviting and dynamic, otherwise we’d all be living and working in boxes. The typographic scale is just one of many modular scales that can mathematically relay specific intervals that are harmonious and pleasing to the eye.

One such modular scale is the Golden Section. The mathematical ratio is 1:1.618. If we take that and apply it to typography, we can come up with a range of values that give us possibilities to choose from for font sizes:

16 x 1.618 = 25.888
25.888 x 1.618 = 41.886
41.886 x 1.618 = 67.772

And so on. If we need smaller values, we can divide to get them:

16 / 1.618 = 9.88
9.88 / 1.618 = 6.11

If you want an easier way to create a system like this, use Tim Brown’s Modular Scale. Input a value and then choose a scale and then click Submit Query.

Modularscale.com

Finding a Typographic Scale with Modularscale.com

So we might apply styles to our headings in the following manner:

h1 { font-size: 67.772px;
line-height: 67.772px;
color: #DC3522;
}
h2 { font-size: 41.886px;
line-height: 41.886px;
color: #374140;
}
h3 { font-size: 1em;
line-height: 1.2;
text-transform: uppercase;
color: #7D7D7D;
}

The heading is dramatic and the subhead feels like the right size, just twice the size of the body text. These are pixel values, but they can be converted to ems. For the font size, we use the standard RWD formula: target / context = result. If our body text is 16px, we would divide by that.

67.772 / 16 = 4.23575
41.886 / 16 = 2.617875
25.888 / 16 = 1.618

What about the leading values? Because the context changes, we take the line height and divide it by the font size. In the case of our heading and subhead, the font size and line height are equal values and when you divide them, you’ll get 1. So our styles now look like this:

h1 { font-size: 4.23575em;
line-height: 1;
color: #DC3522;
}
h2 { font-size: 2.617875em;
line-height: 1;
color: #374140;
}
h3 { font-size: 1em;
line-height: 1.2;
text-transform: uppercase;
color: #7D7D7D;
}

If you inspect the h1 element in Chrome or Firefox, you’ll see that the computed style shows the pixel values that we previously input for the font size and line height. Here’s what we have so far:

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

There’s a wonderful site that you can use to explore vertical rhythm. At Typecast.com, you can copy and paste all of your text into an interface that lets you play with your body text, headlines, and any other element you put on the page. You can then view and even export all of the CSS so that you can use it in your own project. You can even get a style guide that is created as you develop the page. You can try typecast for free, but then there are monthly payment plans for full usage.

Another tool you can use to find vertical rhythm is at drewish.com. Not as elegant as modularscale, but you can get some basic guidance on setting body text, headings, and subheadings.

There are other methods for arriving at vertical rhythm, which we’ll take a look at next time. This method is pretty sound, but not very practical. As you’ll see, there’s quite a bit of math involved and one thing will persist: pixel values will need to be converted to ems. So break out and dust off that calculator.

About Codepen

Some of you may already know about Codepen, which I’ve been using for the past couple of posts. It’s a great playground where you can play with HTML, CSS, and JavaScript in a browser environment and get instant feedback. Instead of flipping back and forth between an editor and a browser, you can do all of the work within one browser window. Sure, there are other playgrounds out there, but I just love the way things work in Codepen. You can check out some other experiments that I’m working at codepen here: http://codepen.io/alemieux/public/

Footnotes

  1. The Elements of Typographic Style. Robert Bringhurst. p. 26.
  2. Ibid. p. 45.
  3. Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students (Design Briefs), by Ellen Lupton – May 2014
  4. Scale & Rhythm. Ian Lamb. 2009. http://lamb.cc/typograph/

Tweet this! | Bookmark at Delicious

Tags: ,

One Response

  1. […] 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. […]