typography test

This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it.

Choosing sizes

Don’t compose without a scale. Out of context, most would probably assume this quote recommends a rather straightforward approach to choosing a sequence of musical notes. But actually, in this case, the author’s subject centers around how to go about selecting a harmonious set of typeface sizes. In The Elements of Typographic Style, author robert bringhurst includes this principle as one of the old, well-traveled roads at the core of the tradition. Of course, good typesetting requires something more than selecting a series of font sizes, just as music consists of something more than choosing notes. Rhythm, in particular, enables a sequence of notes to beat with musical life; tempo sustains their wit. It is much the same for the world of letters.

Vertical tempo

Most pages of continuous prose pulse with a particular vertical rhythm, established by the lines of its main words, sentences, and paragraphs. If a subheading is set in a different size than the rest of the main text, it needs to be offset in a way that flows with the page’s intrinsic rhythm. For this, Bringhurst suggests another rule of thumb: Add and delete vertical space in measured intervals. When sized correctly, the vertical spacing around a chunk of larger text can act like the rests in a musical score, allowing the main text to resume on beat. Size and rhythm make each other interesting. Now it’s time to explore how to weave them into web pages. Bear in mind these words are meant to be chewed on more as appetizers than something like a final course. They offer a path, trampled in the hopes of offering passage – not to an automatic destination, but to places for possible, conscious, even mischievous departure.

Sizing up the BODY

The first step: establish the size of the main text. This becomes the base against which all other variations in type size will be chosen and defined. Here, it pays to work with the grain. Rather than styling everything from scratch, start out by carefully considering what the browser offers by default. Write the css from there, as a minimal expression of differences from the default style. This approach gets the job done using the least amount of code, yielding a positive impact on page download speed and the ease with which changes can be made in the future (assuming less code means there is less to understand, maintain, and edit).

The text is gathered from http://lamb.cc/typograph/