Applying good typography to the Web (part 2)

One of the tricks that make text readable in Web is the vertical rhythm. It is about the empty (negative) space between the lines of text in paragraphs, headings, lists etc.

When defining a rhythm a designer can be pretty sure that text is going to act as a real part of a website, not a way to fill the space between images or columns.

What we are talking about

The following images include the same text with the same title. Their only difference has to do with the vertical rythm.

In this case both the title and the paragraph have not been edited as long as it regards the vertical rhythm.

Here we have the same text with some rules applied on it. The result is much more pleasant and readable.

Let’s suppose we want to achieve something like this. What does it take?

The (x)HTML part

Apparently, (x)HTML includes the text and only the text. The rythm and each of the rules to be applied have to do with the CSS.

The text above could require this markup:

<h1>Gutenberg (ca. 1450-1480) & The Impact of Printing>/h1>
<p>Before the printing press…</p>
<p>This remained true…</p>

Setting default browsers’ values to zero via CSS

Before applying any rule a designer should control typography. Most of the browsers set the font-size to 16pixels. If we want our font size to be equal to 10 pixels we should declare it. This can be done with two ways. The first requires setting a percent like this:

body {
font-size: 62.5%;
}

(62.5% is the number provided by dividing 10 with 16.)

The code above states that the font size will be equal to 10px. Why not define the same size straight forward in pixels? Why using percents? Because percents enable the magnifying or reducing the size of the fonts (by using Ctrl+ or Ctrl-) in a browser, even if the browser is an old version of Internet Explorer.

Instead of using percents, one can define the size of fonts in ems. Em Calculator can do this at once. This time the CSS file would be the following:

body {
font-size: .63em;
}

Now we have set the font size. We have to do the same for the padding and the margin selectors. This is a quick reminder about margins and paddings. The next image was made by the design wizard,
Jon Hicks.

Setting margins and paddings to zero is pretty easy:

body, h1, p {
margin: 0;
padding: 0;
}

Now everything has been reset.

Time for some harmony

In order to achieve harmony we should increase the negative space

• between lines of text
• between paragraphs
• between headings (titles) and paragraphs

The first two can be done in one block of our CSS file:

p {
font-size: 1em;
line-height: 1.5em;
margin: 1em 0 2em 0;
}

What does this block says? First of all that the font size in paragraphs will be equal to 1em or 10px.

Then we increase the white space between lines to 1.5em. This number is enough to ensure us that our lines “breathe” and the text is readable. If we wanted to do the same thing by using pixels we would have written: line-height: 15px for font size equal to 10px.

Last, we increase the distance between paragraphs. Now it is 3em. margin: 1em 0 2em 0 means that a paragraph is 1em away from the previous one, 0 from the right margin, 2em away from the next one and 0 the left margin (values are read clockwise). Of course these numbers might be good for an instance but not effective another.

What has been left is the distance between headings and paragraphs. Things are easier now:

h1 {
font-size: 1.5em;
line-height: 1.5em;
margin: 1.5em 0 2.5em 0;
}

Our title has change size and now is 1.5em, that is 15px. Same is the distance between titles. The relevant margins are 15px, 0, 25px, 0 (given in pixels). Obviously the values margins follow the size of the title (h1).

Closing the issue

The previous example is not dogmatic. Everyone can find his own rhythm and he must take into account a specific font may act differently each time. Vertical rhythm can be also applied to lists which can be much more beautiful if a designer wants so.

This post was written after reading the excellent article by Richard Rutter for 24 ways (it may seem as a reproduction, but I think it isn’t because this one is simpler). A similar article, Setting Type on the Web to a Baseline Grid, was written for A List Apart and it is equally good too.

That’s all for this time. The next episode will cover some handy ways to use not system fonts in Web in order to achieve a beautiful optical result. Until then you can take a look at the previous episode.