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

Category Archives: Generic Category

This is a generic category that could be used for anything. The user could simply change “category1″ to whatever their category actually is.

Fantastic, forgotten elements

This post has closed comments, but open trackbacks. Lorem ipsum sensibus eleifend reprehendunt ex nam, vocent recusabo omittantur ei nam, Chicago Manual of Style and the Merriam-Webster's Collegiate Dictionary cum te altera numquam, in dicta corpora mel. Verear iisque theophrastus ex vix, volutpat evertitur disputando eu mel. Sed at lorem legere electram. Magna everti diceret [...]

Structured with headings

This post has closed trackbacks and comments. Sorry.  Headings should follow a logical progression, e.g., h1 › h2 › h3 › h4 › h3 › h3 › h4 …. There should not be two h1-level headings on a single page. Since post and page titles are h2-level, the only headings that should be used in [...]

Post with blockquotes

This post has comments, but now they are closed. 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! Ea qui dolorem vivendum democritum, ius veri nostro vivendum id! Perfecto repudiandae ea [...]

Duis prodesset

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 [...]

Lists: Ordered and unordered

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! Unordered list example item first Magna everti diceret no qui d discere urbanitas definitiones quo aeterno consulatu argumentum quo id takimata eloquentiam Usu [...]

Photos as attachments

Several semi-standardized class have been given to the images below: alignleft, alignright, and center. The first three images are thumbnails linking to the attachment page. Lorem ipsum sensibus eleifend reprehendunt ex nam, vocent recusabo omittantur ei nam. Partem evertitur has ex. In vix hinc munere oportere, vel in dicunt intellegebat. Puto soluta at sed. An [...]

Welcome: Blog dummy text

This is the dummy blog for the Sandbox Designs Competition. All content, categories, etc., have been optimized for use in developing themes for WordPress. Uses of common and less common XHTML elements will be found throughout the blog with the element name. So if you search for “code” you will get results with the code [...]

Elements with special classes

Lorem ipsum sensibus eleifend reprehendunt ex nam, an caps class 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. Partem evertitur has ex. [...]