Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities. — Robert Bringhurst. This post will be explaining the techniques used to achieve these neat proportional intervals.
This article has quotations from 24ways and A List apart.
Just as regular use of time provides rhythm in music, regular use of space provides rhythm in typography. Without rhythm the listener or the reader becomes disorientated, lost or totally bored.
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. All of these factors must calculated with care in order that the rhythm is maintained.
The basic unit of vertical space is line height. Establishing a suitable line height that can be applied to all text on the page is the key to a solid dependable vertical rhythm which will engage and guide the reader down the page.
Establishing a suitable line height
Before we start you have to know that the default setting of a browser (yep, all of them!) is 96dpi with a basic font size of 16px. So 1em would be 16px. The easiest place to begin determining a basic line height unit is with the font size of the body.
I almost always go for 12px. That is because the table of 12 is divisible by 1, 2, 3, 4 and 6. So it is easy to switch to 24, 36 or even 18. To ensure readability the body text will almost certainly need some leading, that is to say spacing between the lines. A line-height of 1.5 times 12 would give 6px spacing between the lines of the body text. This will create a total line height of 18px, which becomes our basic unit.
Here’s the CSS to get us to this point:
body {
font-size: 75%;
}
html>body {
font-size: 12px;
line-height: 18px;
}
There are many ways to size text in CSS and the above approach provides and accessible method of achieving the pixel-precision solid typography requires. The first font-size in the example reduces the body text from the 16px default down to the 12px we require.
This rule is primarily there for Internet Explorer 6 and below on Windows: the percentage value means that the text will scale predictably should a user bump the text size up or down. The second font-size sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera and other modern browsers which allow users to resize text sized in pixels.
As you can see I have used pixels as measurement here. Further down below I explain why.
Spacing between paragraphs
With our rhythmic unit set at 18px we need to ensure that it is maintained throughout the body. A common place to lose the rhythm is the gaps set between margins. The default treatment by web browsers of paragraphs is to insert a bottom-margin of 1em. In our case this would give a spacing between the paragraphs of 12px and hence throw the text out of rhythm.
If the rhythm of the page is to be maintained, the spacing of paragraphs should be related to the basic line height unit. This is achieved simply by setting bottom-margins equal to the line height.
p {
font-size: 12px;
line-height: 18px;
margin: 0 0 18px 0;
}
Don't fear the pixel!
As you can see I code in pixels. Let me explain this before you guys hit me! At Mediamatic Lab we mainly build websites that are designed around and by typography. After many attempts we came to the conclusion that building a website that is based on typography gets easier using pixels. When designing a practical system like this, it’s important that it’s relatively easy (for yourself and others) to use and maintain.
With pixels, I can set one base line height for the entire document and I don’t have to recalculate it whenever I use a smaller or bigger font size. If you wanted to make your font a bit bigger, just up it one pixel and leave your line height the same.
An easy example to show the difference between relative sizes and pixels:
p {
font-size: 14px;
line-height: 18px;
margin: 0 0 18px 0;
}
p {
font-size: 1.1667em;
line-height: 1.286;
margin: 0 0 1.286em 0;
}
You can use relative sizes, but it quickly becomes a lot more difficult to maintain as the math becomes more complicated. As you can see in the example, the line height had to be recalculated to make sure it would still be 18px with a font of 14px. If I would have kept it 1.5 like you would want, it becomes 1.5 times 14 which becomes: 21 instead of 18. If you have a big page with a lot of elements and you make a small miscalculation, your whole rhythm could be gone and predicting how browsers are going to round your values makes it hard to be exact.
In the end, it's a tradeoff
Most browsers will scale pixel-based line-heights proportionally along with the text. Of course, the margins don't scale, and neither do the images. But is it worth making the system more complicated just to make the margins scale if the images don't?
Consider the amount of people that use ie6 is becoming less and less. And for that percentage of the ie6 users, how many scale websites? If they really need bigger fonts, they need that on their whole computer and they have probably set their screen to 120dpi.
There you have two other reasons then technique to just use pixels.
At some point as designers we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones. When you get down to it, resizable text is primarily an accessibility feature, not a design feature. Ideally it’s something that should be provided by the browser, no matter how the page is built, and in modern browsers it is. As long as all your content is readable and accessible at all sizes, it’s not necessarily true that the design must maintain integrity as you scale.
Comments