“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.” So says the typographer Robert Bringhurst, and just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost.
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 or padding. 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, be it heading, body copy or sidenote, is the key to a solid dependable vertical rhythm, which will engage and guide the reader down the page. To see this in action, I’ve created an example with headings, footnotes and sidenotes.
Establishing a suitable line height
The easiest place to begin determining a basic line height unit is with the font size of the body copy. For the example I’ve chosen 12px. 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.5em would give 6px spacing between the lines of body copy. 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 {
%;
}
html>body {
px;
}
p {
line-height 1.5em;
}
- Source: /code/compose-to-a-vertical-rhythm/1.txt
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. By way of explanation, the first font-size
reduces the body text from the 16px default (common to most browsers and OS set-ups) 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.
Spacing between paragraphs
With our rhythmic unit set at 18px we need to ensure that it is maintained throughout the body copy. 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 top- and 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 top- and bottom-margins equal to the line height.
In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.
p {
em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
- Source: /code/compose-to-a-vertical-rhythm/2.txt
Browsers set margins on all block-level elements (such as headings, lists and blockquotes) so a way of ensuring that typographic attention is paid to all such elements is to reset the margins at the beginning of your style sheet. You could use a rule such as:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
margin:0;
padding:0;
}
- Source: /code/compose-to-a-vertical-rhythm/3.txt
Alternatively you could look into using the Yahoo! UI Reset style sheet which removes most default styling, so providing a solid foundation upon which you can explicitly declare your design intentions.
Variations in text size
When there is a change in text size, perhaps with a heading or sidenotes, the differing text should also take up a multiple of the basic leading. This means that, in our example, every diversion from the basic text size should take up multiples of 18px. This can be accomplished by adjusting the line-height
and margin
accordingly, as described following.
Headings
Subheadings in the example page are set to 14px. In order that the height of each line is 18px, the line-height
should be set to 18 ÷ 14 = 1.286. Similarly the margins above and below the heading must be adjusted to fit. The temptation is to set heading margins to a simple 1em, but in order to maintain the rhythm, the top and bottom margins should be set at 1.286em so that the spacing is equal to the full 18px unit.
h2 {
.1667em;
line-.286em;
margin-top: 1.286em;
margin-bottom: 1.286em;
}
- Source: /code/compose-to-a-vertical-rhythm/4.txt
One can also set asymmetrical margins for headings, provided the margins combine to be multiples of the basic line height. In our example, a top margin of 1½ lines is combined with a bottom margin of half a line as follows:
h2 {
.1667em;
line-.286em;
margin-top: 1.929em;
margin-bottom: 0.643em;
}
- Source: /code/compose-to-a-vertical-rhythm/5.txt
Also in our example, the main heading is given a text size of 18px, therefore the line-height
has been set to 1em, as has the margin:
h1 {
.5em;
line-em;
margin-top: 0;
margin-bottom: 1em;
}
- Source: /code/compose-to-a-vertical-rhythm/6.txt
Sidenotes
Sidenotes (and other supplementary material) are often set at a smaller size to the basic text. To keep the rhythm, this smaller text should still line up with body copy, so a calculation similar to that for headings is required. In our example, the sidenotes are set at 10px and so their line-height must be increased to 18 ÷ 10 = 1.8.
.sidenote {
.8333em;
line-.8em;
}
- Source: /code/compose-to-a-vertical-rhythm/7.txt
Borders
One additional point where vertical rhythm is often lost is with the introduction of horizontal borders. These effectively act as shims pushing the subsequent text downwards, so a two pixel horizontal border will throw out the vertical rhythm by two pixels. A way around this is to specify horizontal lines using background images or, as in our example, specify the width of the border in ems and adjust the padding to take up the slack.
The design of the footnote in our example requires a 1px horizontal border. The footnote contains 12px text, so 1px in ems is 1 ÷ 12 = 0.0833. I have added a margin of 1½ lines above the border (1.5 × 18 ÷ 12 = 2.5ems), so to maintain the rhythm the border + padding must equal a ½ (9px). We know the border is set to 1px, so the padding must be set to 8px. To specify this in ems we use the familiar calculation: 8 ÷ 12 = 0.667.
Hit me with your rhythm stick
Composing to a vertical rhythm helps engage and guide the reader down the page, but it takes typographic discipline to do so. It may seem like a lot of fiddly maths is involved (a few divisions and multiplications never hurt anyone) but good type setting is all about numbers, and it is this attention to detail which is the key to success.
Like what you read?
- Tweet this article
- or
- Leave a comment
Comments
12/12/2006
Julian Bennett Holmes julianbh.com/
Wow this is a good article.
12/12/2006
Will
thanks so much, this is great.
12/12/2006
Peter Gasston www.css3.info/blog/
Interesting stuff. Also worth reading Eric Meyer’s post on unitless line-heights:
meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
12/12/2006
Jake Archibald www.jakearchibald.com
It’s worth mentioning that IE6 and below can go a bit extreme when resizing fonts set as ems.
You can fix this by applying % to html. Don’t know why this works, it just does.
Oh, if you’re working in quirks mode you’ll also need to apply it to thead, tbody and tfoot, beacuse the fix doesn’t inherit (don’t apply it to table unless you want table to inherit font-sizes). You don’t need thead, tbody or tfoot in your tables as tbody is implied.
Obviously, you can’t then apply your own font-sizes to html or tbody etc, else you’ll overwrite the fix, which is why I chose those particular elements as they’re rarely used for font-sizes.
Jake.
12/12/2006
Mike Stenhouse donotremove.co.uk
Hmmmmm, interesting! I’ve not tried this but I think there might be an easier way to set those heights… What if the line-height is set to, say, 1.5em on the body and 1 (unit-less – it’s valid!) on each descendant element? Or maybe some variation on that. It might force the 18px to inherit into the children without awkward calculations.
12/12/2006
Rob Weychert www.robweychert.com/
Great article, Richard! Web typography—like all typography—deserves this level of detailed thinking, and I hope to see more designers embracing it.
12/12/2006
michael h
Good introduction to typography theory, but I am convinced that the Owen Briggs method is the best approach to sizing.
thenoodleincident.com/tutorials/box_lesson/font/index.html
13/12/2006
Wilson Miner www.wilsonminer.com/
I’ve been working on something similar recently, and I’ve discovered that if you set the line-height in pixels, most browsers will still scale it proportionally along with the text. As IE6’s numbers fall off, I hope we can leave all this black magic scaling math behind and go back to setting font sizes in pixels and letting the browsers handle the scaling.
13/12/2006
Richard Rutter clagnut.com/
Mike – you’re right about being able to simplify the line-height specifications, but it doesn’t require setting unitless line-heights. In the example I use, I’ve set the font-size to be 12px on the body and calculated line-heights for all the subsequent elements. As I required one line height – 18px – for all elements I can remove the multiple statements and simply set line-.5em on the body. The calculated line-height of 18px is inherited by all elements on the page. I’ve modifed the example to show this (checked in Firefox, Safari and IE6):
webtypography.net/24ways2006/24ways-v2.html
However the maths would still need to be performed to calculate the correct margins, so while the extra line-height specifications are not strictly necessary (at least while the same line height for all text is required) you unfortunately don’t save much on the calculations.
13/12/2006
Richard Rutter clagnut.com/
Jake – the extreme text sizing in IE can be fixed by applying any percentage font size to the body – it doesn’t have to be 100% (hence my use of 75% fixed this too).
You’re right about the tables though. This rule does the job nicely to inherit the text size:
table, thead, tbody, tr, th, td {em}
13/12/2006
GreLI
In the article next rule is used to reset margins:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
margin:0;
padding:0;
}
I think it easier to use universal selector (* { margin: 0; padding: 0 }) instead.
To fix table font-size inheritance it’s enough to set
table { em }
Opera AFAIK don’t change font-size if it set in pixels, but it can zoom pages (so does IE7).
13/12/2006
Matthew Pennell www.thewatchmakerproject.com/
GreLI – using the universal selector like that to zero all margins and padding can cause unpredictable results in some form controls (e.g. SELECT elements) in certain browsers.
Rich – great article; now all someone needs to do is knock up a nice little app that spits out the right line-heights and margins for the elements you tell it… :)
13/12/2006
Theodore Rosendorf blogdorf.com
It’s unfortunate that pretty much no one composes with a scale when publishing for the web. Your article is a great step forward.
Also overlooked are line lengths. Since the beginning of the web, It has been a standard practice to expand the line lengths out with the width of the browser (like your site is currently :), causing line lengths to expand way too long. If an optimal line length for print is 66 characters, line lengths for web should be even smaller.
14/12/2006
Jeff L www.bogglethemind.com/
I don’t see it mentioned in the comments yet, but your quote above:
“...Firefox, Safari, IE7, Opera and other modern browsers which allow users to resize text sized in pixels.”
is not correct, as IE7 does not allow users to resize text sized in pixels. The layout can be zoomed, but the text can not be resized.
18/12/2006
Richard Rutter clagnut.com/
You’re right to mention line length as something that is overlooked, but on the screen it is not as simple as setting the measure in ems as their are more factors involved (screen size, liquid layouts, etc). Also I’d disagree that web line lengths should be shorter on the web. My personal preference would be for them to be longer – I find short line lengths on screen extremely hard work to read. That’s just my opinion though.
If you think of the reasons for changing text size then zooming a layout is just another form of resizing text and achieves the same goal.
20/12/2006
Steve C. www.stevecochrane.com
Theodore, I think you would enjoy Richard’s article entitled “Choose a comfortable measure” over at webtypography.net :)
webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
22/12/2006
Rachel Maxim
You’ve said in a few pages what has taken me years to figure out and refine :) – great info!
23/12/2006
Nate K nateklaiber.com
I really enjoyed this article. I have read your Elements of….for the web, as well as your blog about sizing text in ems. I have really been looking in to using this and getting the best ‘flow’ with my typography. I also ordered the book Elements of Typographic Style just to give a better understanding.
I think its a common misconception that text on the web will always look bland, and you have proved that it can have rhythm and style.
02/01/2007
Paul Bell www.boilerroomdigital.co.uk
I’ve just been using some of these techniques on a client’s site who needed 8 tabs all the same width, which fill the available space – I had it working fine in Firefox, but the tabs didn’t fill the space in Safari or IE. I found that you really have to do the maths, rather than just use trial and error – they all round the numbers slightly differently. Once I’d checked my calculations, rather than tinkered with the numbers, it works fine everywhere, at least at standard font size.
One other correction from someone’s comment earlier on – you can resize text in IE7 – click the page icon at top right. Why you need both this and the ability to zoom, I’m not sure, but it’s there at any rate.
03/01/2007
Ben G
Can you set the margin above or below headings or paragraphs to less than your 18px base measurement? Won’t margin collapsing cause whichever the largest margin is to take effect?
Ben
31/01/2009
Daniel
I’ve been using this article as the basis for designing my site with some “vertical rhythm”. Everything is going well except with forms (input, textarea, etc.). I just haven’t been able to use css to maintain the vertical rhythm (based on total line height of 18px).
Any advise or insight as to how to get forms to play nicely?
15/02/2009
Silver Firefly
I wanted to clarify something about the default browser text size and using the em unit. The article was a tad misleading when it covered the default browser text size and the em unit. A lot of designers have it in their heads that an em is equivalent to 16 pixels. An em is not equivalent to 16 pixels. It is equivalent to whatever is set in the user’s browser, which is commonly 16px but depending on the user, it can be 20px or 12px or whatever they have set in their browser’s settings. I hope after reading that statement, designers will start to realise that they have little control over how their website appears in other users’ browsers. The majority of the control lies in the user’s hands. Other than that, the article was very good.
17/04/2009
VardenRhode tr.im/VRdesign
Great article… and AWESOME site design. Inspirational!
27/04/2009
Adam www.finestfolkart.com
Typesetting for websites is the future, like all things content-related. The Google knows it :). Thank you for that useful post. You webdesigners take care of your text!
05/06/2009
bonfield
Inline bolding of elements (I’m using Helvetica, e.g.) seems to add a px of height on any line that uses it, and that subtly throws off the vertical rhythm for each line and it can add up depending — anybody else run into this and solve it?
18/06/2009
Anonymous
Does this truly keep the vertical rhythm? If you zoom in on the example, you’ll see that the descender of the letter g in the H1 header “New England” crosses your rhythm marker’s background line, while a lowercase g in the following paragraph does not. There appears to be some fudging going on.
08/07/2009
Wade voltagecreative.com
I find it humorous that this site itself does not compose to a vertical rhythm. I’ve seen very few online that do. It’s so difficult to implement across browsers it is usually brushed aside except for in the most simple design schemes.
03/08/2009
eric
I’ve yet to see any empirical evidence that “vertical rhythm” applied to this degree has any impact on how well a reader is able to extract signal from the noise of the page.
Meanwhile, I’ve seen many, many examples of mis-applied “vertical rhythms” resulting in squashed headings where the underlning on a link impinges on the text below. Which just looks clunky.
When you’ve got something other than an aesthetic opinion from the margins — maybe some actual data — then I’ll be interested in expending the effort needed to support real vertical rhythm. Until then, I just don’t see how it’s cost-effective.
02/09/2009
Darren Roberts www.pureandsimpleweb.co.uk/
Now, that was the kind of article I was looking for. That goes a lot deeper than I’ve been into the realms of line-spacing, leading (no kerning here though – can we do kerning with css?).
I love the analogy to musical rhythym > therefore probably following on to mathematics/geometry/proportion. That is a great lead-in. Is there any room for the ‘golden ratio’ in web design? Do graphic designers use it with/without realising it? Just that I haven’t seen it discussed in the myriad pages concerning page layout/design that I’ve read so far…
Thanks,
Darren
24/01/2010
owen O
this helps a lot, one question, could you base your gutter widths on the V rhythym, line height 18, gutter 18px?
tanx
19/02/2010
whatdoesitwant signedesign.nl
Thanks for your article. I have run into an interesting problem and am in search of further information.
I am trying to set my base css’s font-size / line-height to:
100%/1.618034em (phi).
When I do this (by defining the default in the body definition), I notice small 1px deviations between paragraph blocks but not within. Floating 2 sections next to one another betrays the difference when defining more paragraphs in one of the sections. My reset.css sets the vertical-align for relevant elements to baseline. The usual elements like padding, border and margin are set to 0 for all relevant elements.
No specific display properties are set for the paragraphs.
The problem is probably caused by rounding differences.
I could work around this if i knew the rounding algorithms for gecko and webkit. (Btw, webkit browsers show larger deviations. I have not yet tested with ie8).
Or i could avoid the problem altogether by setting a better roundable line-height or one for which no rounding is required. But again, i would have to know how specific i can be.
Do you know of sources where i can find more information? The Internet behaves like an oister on this subject.
22/04/2010
Berthold Barth www.berthold-barth.de
I’m wondering how many digits after the dot you really need. 1.667 rounds up to either 1.67 or even 1.7. At 12 pixels (which is, as I understand it, the way CSS interprets the em of a 12 px font) the errors amount to 0.04 and 0.4 pixels respectively, which in and of themselves can’t really exist. My LCD has no half-pixels.
Wouldn’t it be OK to just round up and be done with the whole fractions business? Surely, if there is any kind of rounding difference between engines, rounding ourselves eliminates errors.
(A late) thank you for this article.
21/12/2010
George www.glerner.com
Slight correction to the article. In the .footnote, 1.5 lines is 2.25ems. I would clarify what the ½ is:
“I have added a margin of 1½ lines above the border (1.5 × 18 ÷ 12 = 2.25ems), so to maintain the rhythm the border + padding must equal a ½ line (9px)”
Impress us
Be friendly / use Textile