Vertical Rhythm and sub/sub Tags
Published in Blog, Design, Typography
“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 is the key to a solid dependable vertical rhythm. It will engage and guide the reader down the page.
Unfortunately, many sites using the sup or sub tags do not instruct the browser how to display them. Frankly, the default display is limp. A vertical rhythm in text with these tags can be ruined since sup or sub tag can throw off the line-spacing of a text block:
Disappointedly, even Wikipedia did not style them as well! Look on picture below, awkward white spaces marked with red arrows, that is especially visible on selected text (blue field).
The solution of this issue is easy and elegant:
sup { vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { vertical-align: baseline;
position: relative;
bottom: -0.4em;
}
Using vertical-align we are fixing line heights and slightly shifting blocks using relative position. Please, note the value 0.4em should be adjusted to the particular site. Lat’s magic work:
Certainly, I have added this hack to the CSS on this site as well. Please visit my research projects for the real life example.
Example files and enchanced pdf copy of this article are coming. Stay tuned!
29th May, 2008