“Space in typog­ra­phy is like time in music. It is infi­nitely divis­i­ble, but a few pro­por­tional inter­vals can be much more use­ful than a lim­it­less choice of arbi­trary quan­ti­ties.” So says the typog­ra­pher Robert Bringhurst, and just as reg­u­lar use of time pro­vides rhythm in music, so reg­u­lar use of space pro­vides rhythm in typog­ra­phy, and with­out rhythm the lis­tener, or the reader, becomes dis­ori­en­tated and lost.

On the Web, ver­ti­cal rhythm — the spac­ing and arrange­ment of text as the reader descends the page — is con­tributed to by three fac­tors: font size, line height and mar­gin or padding. All of these fac­tors must cal­cu­lated with care in order that the rhythm is main­tained. The basic unit of ver­ti­cal space is line height. Estab­lish­ing a suit­able line height that can be applied to all text on the page is the key to a solid depend­able ver­ti­cal rhythm. It will engage and guide the reader down the page.

Unfor­tu­nately, many sites using the sup or sub tags do not instruct the browser how to dis­play them. Frankly, the default dis­play is limp. A ver­ti­cal rhythm in text with these tags can be ruined since sup or sub tag can throw off the line-spacing of a text block:

Dis­ap­point­edly, even Wikipedia did not style them as well! Look on pic­ture below, awk­ward white spaces marked with red arrows, that is espe­cially vis­i­ble on selected text (blue field).

The solu­tion of this issue is easy and elegant:

Using vertical-align we are fix­ing line heights and slightly shift­ing blocks using rel­a­tive position. Please, note the value 0.4em should be adjusted to the par­tic­u­lar site. Lat’s magic work:

Cer­tainly, I have added this hack to the CSS on this site as well. Please visit my research projects for the real life example.

Exam­ple files and enchanced pdf copy of this arti­cle are com­ing. Stay tuned!

29th May, 2008