October 18th, 2009
Web Directions & Typographic Structure
Last week I presented at Web Directions South 09 here in Sydney, Australia on Font Embedding and Typography. It’s a talk I gave at @media 09 in London over the summer. I enjoyed giving the presentation — despite AV problems which resulted in a ten minute reduction in time allowed and having to give the presentation without notes. But the show went on.
But despite that single hitch, Web Directions was quite possibly the best web conference I’ve been to. I was congratulating John and Maxine at a speakers BBQ on the Sunday following the conference, and it became evident it was down to their undying attention to every, single little detail, from the moment you register to the food you are served (which was excellent by the way). But the lasting memory for me was the buzz of the Australian web industry. It was very refreshing to visit a country not in recession and see an industry thriving on creativity rather than suffocating beneath a blanket of uncertainty.
But anyway, before this turns into a rant about politics, back to the presentation…
This was not a practical presentation full of hints and tips or a presentation about fonts. Or font embedding. Even though I touched on these two subjects briefly, this was a talk about typographic design and all of the aspects of the craft that I find important and how I relate to them in particular to this medium.
A core part of the presentation describes my understanding of typographic design and why font choice is only one of nine aspects that need to be considered when designing with type on the web. This is the third model of typographic design I’ve been working through now, and not only is it sticking, but as I’m beginning to explain it to other people, I’m not having to change it too much. It has almost passed the mother-in-law test. For me, it’s working as a way to explain what I do and I’d like to share it to get your thoughts.
Typographic Structure
Typographic design, as I understand it, involves nine elements:
Language
Language is entwined with typography. Type can be defined as the display and arrangement of language. As designers, we should care about this.
Typesetting
Typesetting is the process of taking raw text and marking it up. Making headings, lists, emphasised text etc.
Grid
The typographic grid is a foundation upon which layouts can be built.
Hierarchy
Conceptually, content has levels of importance. Typographically, Hierarchy visualises this.
Font
The font used to display the content.
Rhythm
How the arrangement and layout of the type aids reading.
Layout
Combining type with other graphic elements such as photographs, illustrations, video or other UI elements.
Colour
Colour, when discussed in typographic terms, can mean two things: red, green, blue etc. or dark or light typographic colour. Dark typographic colour is dense type–tight leading or line height, tight whitespace. Light typographic colour is the opposite.
Content
One of the unfortunate things on the web is that, generally, we’re designing not knowing what the content is. We have an idea of what the content might be, but when dealing with content management systems and the flow of data, it’s very difficult to know. But content is an important part of typographic design and this connection is one of the casualties of the web standards mantra of separating content and presentation. When we do that, it’s very difficult to tell stories with design.
Here’s a diagram:
As you can see, your choice of font only plays a small part in the overall typographic considerations. Of course, on the web, we’ve had our choices here limited to the point of almost removing the element of choice. And don’t forget that a number of these elements are also completely in the hands of the user to change at their will.
My point is this: font choice is only part of what makes good typographic design. The limitations that have been imposed on us–with only a hand full of fonts guaranteed on user’s machines–have nurtured fairly good typographic craft on the web. Generally, we care about the content; we mark it up with the correct intended hierarchy; some us care about typesetting ampersands, or bulleted lists. I’m not sure that the same level of care and attention is employed by some of our print cousins (and I say this having spent quite a few years on that side of the fence). Why is this? Well, designers are like magpies; we get distracted by the shiny.
When I was in university, I sent off for every type specimen sheet I could get my hands on. I pestered everyone from Monotype to Emigré. Receiving the canvas bags stuffed with font supplements from T26 was certainly a highlight of my first year. Why? Well, firstly, type supplements are normally beautiful things. They didn’t necessarily make me look at type any differently, but they made me want to collect type. I’m sure that mindset isn’t that rare in anyone who cares about type, but it’s a mindset that leads to a shallow understanding of the broader craft. You get distracted by the next beautiful typeface. You’re constantly on the search for the typeface that is just right.
Font choice is not the most important decision you make when designing with type. On the web, currently, it is way down on the list because of the constraints of the medium. With commercial font embedding just around the corner, we stand on the edge of an incredibly exciting time for the typographic web. In eighteen months time, I think the web will be starting to look very different. And about time too, but let’s not get distracted by the shiny.
Aren’t layout and rhythm one and the same? How are they different?
If I understand correctly, rhythm speaks to the layout of type exclusively — line height, letter spacing, the vertical rhythm between paragraphs and headers, etc.
Whereas layout, as he mentions above, refers to the layout of the type and other others elements on the page.
Nice article Mark, wish I had been there for the presentation.
I have followed with interest your articles and commentaries by long time, fodder that you realise an interesting work, I would like to know if you’ve thought about making video book where the theory is taken to practices, especially for those who can not attend their conferences
I’m a little confused by the rhythm concept. Font choices are imperative in good design.
Good article (as always)
Orlando Web Design
Well, thank you for the information you’ve provided as it was useful for me. I understood your concept as it made logical sense to me.
“Receiv ing the can vas bags stuffed with font sup ple ments from T26 was cer tainly a high light of my first year” (pasted sic):
You mean you were one of the select few to receive the “T-bag.” On request, I can spokesmodel this event and deliver that term in a specific voice.
In response to Andy Walpole’s question about layout and rhythm. My understanding of rhythm is that its informed by the layout which is informed by the grid, and is also a product of the typography as well. The interplay grid, layout and typography creates a beat that the design marches to. Regularly repeating—not merely there to facilitate ease of reading—it becomes the constant, living in the background, that makes good design a joy to behold, just as it does with music and architecture and this lovely site.
Nice work Mr. Boulton.
Thanks for another great article. The notion of ‘rhythm’ is something that is becoming increasingly understood, I think. Having heard Malarkey speak recently, reading this article and also following some of the work from Jason Santa Maria, it’s become clearer and clearer. I tend to think of it in terms of it’s musical relations … remove the rhythm section from music and what’s left is hard to make head or tail of … sure, you can pull out some of the details and you might be able to discern other patterns coming through, but way in which you are hoping to interpret the music is fundamentally changed for the worse. The same with the rhythm of the page. Give it some thought and the results will be impressive — leave it alone and you get something that is either completely flat, or difficult to interpret.
Great summary of what typographic design is. I couldn’t have said it better myself.
“Content” should be #1 though. The overall goal of typographic design (in my mind) is attract the right amount of attention to a certain element and then get out of the way. If the design choices are too distracting, the viewer will have a hard time concentrating on the content.
Content is going to help them accomplish their goal (whether they’re trying to get information or perform a task). Typographic design can help emphasize the right content, but it isn’t going to make up for bad content.
Thanks for sharing such nice info. I loved visiting this blog as I get huge know whenever I visit, thanks
At first read, the idea that a font doesn’t necessarily make typography is quite appalling. That is, until you realize it is true.
There are a number of sites that are simply beautiful and use only one font.
Thanks for posting this great post, very useful!
[…] Web Directions & Typographic Structure | Mark Boulton “Font choice is not the most important decision you make when designing with type. On the web, currently, it is way down on the list because of the constraints of the medium. With commercial font embedding just around the corner, we stand on the edge of an incredibly exciting time for the typographic web. In eighteen months time, I think the web will be starting to look very different. And about time too, but let’s not get distracted by the shiny.” I’m with this. (tags: typography deisgn webdesign css @font-face typeface) […]
I am actually a little worried about where online typography will go after embedding becomes common-place. I am sure it will bring more positives than negatives but the potential for illegibility is frightening.
I guess it will just be one more thing that sets apart a good designer from the flock.
\\ Great Post!
Thank you for the article. You kicked off a new dimension in my thinking. Fonts make a big difference even thought the layman doesn’t agree sometimes
“The limitations that have been imposed on us–with only a hand full of fonts guaranteed on user’s machines—have nurtured fairly good typographic craft on the web.”
This is very true, and it relates to another article I just saw about embracing constraints: sometimes the less details you have to distract you the better the overall result.
There have also been times when I’ve managed to “save” a design from the client’s penchant for fiddling, by telling them that the font they requested simply isn’t available on their users’ machines… I won’t be able to get away with that for much longer!
Goood day!
Sorry, but:
Free java casino no download
casino
List flash no download casino
casino
Virtual casino birthday welcome bonus
casino
Flash no download casino without deposit
casino
Internet poker web sites
thanks buddy. its very useful.