Stuff & Nonsense Home

Where you’ll find designer, author and speaker Andy Clarke. The bastard.

Blogging And All That Malarkey

Typography is poetry (More on Typesetting The Waste Land)

Judging from the response from the people who attended, our first Visual Web Design Masterclass in London this month was a huge success. As a large part of the day was spent learning about typography, both relating to type and to layouts devised from typographic principles, I chose to illustrate the lessons by typesetting The Waste Land, a poem by TS. Eliot. If you weren't able to attend, now is your chance to take a look at the results of my experiments.

My self-set challenges were:

Start by learning about the poem or jump straight to each part below.

The Burial of the Dead

The Burial of the Dead The Burial of the Dead

A two-column layout based an archetypal, classical double-page spread. This design also demonstrates RGBa colour and opacity and the background image is from one of Eliot's hand-written drafts of the poem.

A Game of Chess

A Game of Chess A Game of Chess

This layout created from a Fibonacci squares based grid. I will be writing soon about my thoughts on why experimenting with different sources of inspiration for designing grids can produce distinctive designs. In the meantime, I intended A Game of Chess to be dark and mysterious. After-all, it is Where the dead men lost their bones..

The Fire Sermon

The Fire Sermon The Fire Sermon

A newspaper inspired approach where the column width was based on the measure and the number of columns was dictated by the measure and the layout width. For this design I intentionally chose to break from the author's layout of the type and allow the pre-formatted verse to wrap. Note how the various different sizes of text relate to the baseline.

Death by Water

Death by Water Death by Water

A simple, striking, elastic layout based on the measure. If you look closely at the left edge of the title you will see how I used negative text-indenting to draw the text to the left to deal with the typographical optical illusion created by the lowercase letter 'd'.

What the Thunder Said

What the Thunder Said What the Thunder Said

An unusual combination of two grids with perspective and scale, inspired by an architectural photograph. Who said that you can't use more than one grid on the same page?

Set yourself a creative challenge over the Christmas break?

I hope that you enjoy looking at these designs as much as I did making them. If you are short of inspiration, or you would like to set yourself a creative challenge over the Christmas break, why not typeset your own version of The Waste Land? Or if you prefer, a different poem? I would love to see the results.

Leave your comment

prisca

December 18 2008 @ 10:37am #

Andy :-) Wonderful to see these go online - and yes, your Masterclass was huge success! Seeing these designs again brings it all back :)

Sam

December 18 2008 @ 07:59pm #

Ace, I’m especially impressed by the use of the <pre> tag to preserve line breaks. I’m sure some of the standards fundamentalists will object, but it’s a neat trick. Thanks for sharing.

Andy Clarke

December 18 2008 @ 08:16pm #

@Sam: Using <pre> is completely appropriate for marking up verse as the visual layout of the text is often as important to a poet as the words themselves.

Matt Wilcox

December 19 2008 @ 12:20am #

@sam Nothing wrong with pre - it’s perfectly semantic. It’s used in situations where it is understood that the presentation itself has meaning - exactly as Andy says. It’s not just important, but actually holds meaning.

Ryan Merrill

December 19 2008 @ 12:51am #

Great job typesetting each section, Andy.

I’ll be looking forward to your post on grids. I’d be interested to see the grid overlay on each section of this exercise, especially on What the Thunder Said, where you mentioned using multiple grids.

Thanks for the insights.

Bridget Stewart

December 19 2008 @ 12:54am #

Just a question because I am less familiar with the pre tag than I would like:

It’s not obvious to me why there is a span tag inside the pre tag for The Burial of the Dead. Is it necessary inside a pre tag? (A la blockquote and p tags.) Is there some styling being applied to the span that I’m not realizing?

Thanks for indulging me. :)

Andy Clarke

December 19 2008 @ 01:15am #

Bridget Stewart: Good question. The additional <span> element is a workaround for Internet Explorer to help that browser cope with centering verse based on the longest line, common with poetry.

“Verse is usually set flush left and ragged right, and verse quotations within prose should not be deprived of their chosen form. But to distinguish verse quotations from surrounding prose, they should be indented or centered on the longest line.”

The technique comes from The Elements of Typographic Style Applied to the Web

The preferred way to center pre-formatted text is margin:0 auto; but margin:0 auto; will not center elements in Internet Explorer 6 or 7, without a width being set.

So the <span> is a workaround. For a more detailed explanation, go to the source.

Bridget Stewart

December 19 2008 @ 02:19am #

Aha! Internet Explorer. I should have guessed. That’s what I get for viewing the source and looking at the CSS in firebug only prior to ingesting my full morning dose of caffeine.

Thank you for the explanation and the links for more detailed info.

Erik Vorhes

December 19 2008 @ 12:23pm #

Poetry is a beautiful, wonderful thing to play with on the web, and these examples are incredible!

I’ll be glad to take up your challenge (expect something announced via Twitter not too long into 2009). :·)

Commenting is not available in this channel entry.
Hardboiled Web Design

Hardboiled Web Design by Andy Clarke

How the latest technologies and techniques will make your websites more creative, flexible and adaptable. Get hardboiled in all formats from Five Simple Steps. Digital formats also available at Amazon.com, Amazon.co.uk and the iBooks store.

We’ve deconstructed this site to focus on content while we restyle. Expect wonkiness during the transition.