g

Scale & Rhythm

This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in 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 are about to play upon it.

Typographical Music

Don't compose without a scale. These words were written not in reference to choosing notes of music, but rather, to selecting a harmonious series of type 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 is something more than selecting a series of sizes, just as music consists of something more than well-chosen notes. Rhythm, in particular, enables a sequence of notes to beat with musical life, and 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.

g

g

box '2
Experience Design — Futures Thinking — Interdisciplinarity
box 4

Example Images

Several semi-standardized class have been given to the images below: alignleft, alignright, and center. The first three images are thumbnails and the last one is 800px wide, which is important to consider.

Lorem ipsum sensibus eleifend reprehendunt ex nam, vocent recusabo omittantur ei nam. Cum te altera numquam, in dicta corpora mel. Verear iisque theophrastus ex vix, volutpat evertitur disputando eu mel. Sed at lorem legere electram. Id duo fabellas ullamcorper consectetuer, vel quot malorum no! Has eu mollis iracundia.

Image Number One

Partem evertitur has ex. In vix hinc munere oportere, vel in dicunt intellegebat. Puto soluta at sed. An vim ignota eirmod, no vulputate intellegebat vix! At urbanitas suscipiantur sea, dicant legimus mei et, maiorum propriae intellegat at sed!

Eos ex tractatos definitiones. Choro timeam sed ut, te qui cibo semper phaedrum, appetere delicata cu eos. Periculis dignissim ex per. Duo in odio aliquam, sit aliquam comprehensam eu. Liber virtute detraxit ei vix! Ex eam wisi aliquam adipisci. An usu platonem qualisque, ex platonem maluisset constituam sea.

Eam latine conclusionemque ne. Et cibo veritus dissentiet eum, sed legendos qualisque evertitur te. Eu facete perfecto nec, libris doming eos ex, tota omnium electram ius ad. Has eu vituperatoribus mediocrem. Eam aliquid deserunt mandamus eu, vituperatoribus nonummy iudico pro no, eos dicam aeterno at.

Image Number One

Ea has vocent aliquid dolorem, te utinam discere eripuit cum! Id cum epicuri evertitur, cu summo nullam mucius vim? Quo an iuvaret invenire disputationi, cu vim commune suavitate, assum libris per id? Ius probatus rationibus id. Novum utinam democritum ad vim! Illud fabellas imperdiet vis et, et stet essent appareat quo!

Eum error accommodare ea! Cu nam modo iusto! His in quot paulo efficiendi, in aliquip nostrum eam! Cu sea dicunt intellegam consequuntur, omnis adipiscing id est?

Image Number One

An reque illum audiam nam, aeterno consulatu argumentum quo id, soluta mandamus ei vix? Eu qui alii nobis propriae, has dolor molestiae ut. His aliquid pertinax in, alterum facilis takimata in mea. Nec mazim aeque an. Ius ad errem saperet postulant, equidem perpetua mediocrem est at.

Et mea elit perpetua torquatos, id qui aeque albucius instructior? Te eum quis doctus delicata. Vim alia erant salutatus ad. Ius etiam scriptorem ne? Iracundia appellantur vix at, ut debitis vituperatoribus mea! The following image is linked to a page. This may have to be updated.

Image Number Two

Magna everti diceret no qui, id discere urbanitas definitiones quo? Dicant recusabo interesset ne vim, in mei ignota deterruisset! Ferri graece prompta ex duo, latine scribentur eu cum, nam voluptua oportere definitiones id. Lorem inermis cotidieque usu no, delenit scripserit reprehendunt qui ad. Ne eum recteque splendide. Qui possim menandri referrentur ea, assentior theophrastus id vis, id feugiat persecuti est!

Nec te audiam euripidis, ut assum takimata eloquentiam mel. Usu libris albucius cu, kasd contentiones no eos, ius ex oratio prompta dignissim. Duo probo velit te, pro eu fugit oblique indoctum, vis eu velit graecis! Vis at graece recteque, putant vidisse mei ut. At mnesarchum intellegam pri, eam latine nonummy id, at has dico duis prodesset.

Et errem quando usu, ullum mazim dissentiunt ad nec, mea quot animal nostrum at. Molestie percipit iudicabit sea cu, et sea nonumy fabulas inimicus. Sed ei fugit abhorreant contentiones, no altera quaestio vel! Tamquam discere mentitum et est, discere conceptam id nec, mea at fabulas comprehensam? Assum quidam senserit usu ut. Diceret facilisis posidonium eu sea, latine dolorum nec ne?

Image Number One

Ea qui dolorem vivendum democritum, ius veri nostro vivendum id! Perfecto repudiandae ea per, an sea nihil vituperata! Qui in oratio invenire erroribus? No eam ubique adipisci, cu commodo labores cum! Aperiri takimata delicata pro no, ea rebum adipisci consequuntur sit.