The Elements of Typographic Style Applied to the Web

Introduction

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be a must for everybody in the graphic arts, and especially for our new friends entering the field.

In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.

At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time. You can subscribe to an RSS feed for notification of new additions.

I am excluding those principles which are not relevant to the Web or that do not require a technical explanation. Unfortunately this excludes the entire opening chapter, the Grand Design, which I heartily recommend you read as it lays down the foundations, philosophy and approach to good typography in any medium. If you were to take any working principle from the Grand Design, it would be this: Give full typographical attention even to incidental details.

Now start with Rhythm & Proportion or dip into the Table of Contents and enjoy pushing a few boundaries to create websites of real typographical worth.

— Richard Rutter, Brighton, 2005.

This looks like a fabulous read. It's one I wish teachers and administrators who manage school websites would read. Underline and bold and italics do not go together, but they are used with purpose, individually. Sorry, my pet peeve coming out, there...

Learn how to use fonts better and people will take you more seriously

For those who know me I'm an absolute maniac about design. I love good design, and well, can leave the other stuff behind. With so many publishing tools out there in the world people are creating more and more content. Do yourself a favor and learn some design basics. People will take your work more seriously. This article is a great start.

Elegantly designed modern-day furniture

Wow, the team that designed the new New York City subway cars and JetBlue's touch-screen terminals now comes out with furniture for the modern office. Designs that are about creating warm, workable, interactive spaces. I love the aesthetics. Read more at FastCompany.

How do you create an effective workspace? Does furniture matter? I think about this a lot when looking at classrooms. Some people are really pushing how aesthetics of a space impact performance. Just think about the average classroom where all desks face the blackboard. It suggests that the info is at the front and is being delivered to the kids - that's not necessarily bad, it is just what the room creates. Do we need to change that? I'd argue generally, yes.

How NAU designed their elegant new travel bag

I'm a huge fan of NAU, an environmentally responsible, future-design oriented clothier. I enjoyed reading how their designers came up with the new travel bag concept. Thoughtful and meaningful design is important to me. And so is NAU's choice of natural fibers (no dead animals here). If you want to buy the new bag, it's on their shopping site.

For travel, I personally use the Patagonia MLC, and I love it.

"Data in, Brilliance Out" - graphing how it should be

I've been playing with Tableau's graphing program and it really takes data analysis + elegance to the next level. I'd love to use this with students and teachers, but need to do some more playing myself.

It seems incredibly powerful, and the colors/design, well, they're just plain fantastic. Microsoft will have to take heed, because what's coming out of smaller groups like Tableau will give Excel a run for it's money. That being said, if you're doing serious number crunching/financial analysis, this isn't the tool for you. But if you need to present data in a visually compelling way, this is a winner.