Journal

Type in Berlin

Since Sunday evening, I’ve been in Berlin attending—and speaking at—the Web 2.0 Expo. I presented earlier today on the very ‘un-web 2.0’ topic of Typography. I think it may have surprised a few people as to how relevant typography is to designing UI—even to applications. As usual, I talked about type as being more than just choosing typefaces, which is where most designers, unfortunately, see typography begin and end.

On closing, I gave a URL which would link to a section of this site with the slides, notes etc. You can download the slides here.

Apologies for the delay, but the up-speed of the conference wifi was incredibly poor, so I’ve only just got around to doing it.

I’ve also decided to embed the slides here from Slideshare. I don’t normally do this, so apologies if Slideshare clogs things up, but I thought it might be nice to have the slides here whilst I break-down the topics I presented.

The slides

What was said

I’ll give you a quick run-down of some of the main points of the talk.

I started off with a quick introduction of placing typography within Web 2.0. Where does typographic design as a practice fit with designing applications and platforms for the ‘web of data’. The rest of the talk was then split into four main section: Structure, Process, Macro typography and Micro typography.

I presented the following points:

Structure

  • Typography is presenting information.
  • Information is language and language has structure.
  • Documents have a conceptual model and these need to be matched to the reader’s conceptual model of the content.
  • It’s the designer’s job to bridge this gap and present the content which fits both models. Incidentally, I feel this is one of the problems facing designers who want to art direct on the web.
  • Content and presentation.

Process

  • Jesse James Garrett’s ‘Elements of User Experience’.
  • Wrongly interpreted as a linear process.
  • A process like this relegates design, and specifically typography, to the surface plane.
  • Greybox Wireframes.
  • Involving typographic design much earlier in the process.

Macro typography

  • The Big Stuff.
  • Creating spacial relationships.
  • The Golden Section.
  • The Golden Section as applied to the web.
  • The Rule of Thirds.
  • Grids and consistency of design across page types.

Micro typography

  • Hyphens are not dashes.
  • Letterspacing: negatively and positively.
  • Italic ampersands in headings.
  • Framing navigation items and lists.
  • Framing tables rows and columns

Those were the main points. It seemed to go down well, although, I still had the feeling the presentation stuck out like a sore thumb in a conference discussing some of the loftier aspects of designing for the web.

The rest of the time was spent in the pleasant company of friends old and new. Jeremy and Jessica, Simon and Nat were wonderful in arranging a variety of evening Berlin eating establishments. In truth, I met them in the lobby and we wandered around until we found a restaurant that could accommodate 13 people.

I ate some strange German food, and drunk some even stranger red beer. I said strange, not bad. I enjoyed sitting next to Jesse for two meals and discussing everything from washing machines and remote controls, to the waiter with the incredible memory (yes, he took a complete order—starters and main courses— without writing a single thing down! Impressive or what? I need to write a list if I need more than two things at the supermarket).

So, all in all, it’s been fun. But, it’s been tough trying to manage a conference, preparing a talk and running a small business that is ticking over at home. That has been challenging. I missed The Wife and am dying to see progress on my house extension.

I will say this for Berlin though, it’s a great place to come as a designer. I even found a design manual in a bookshop today on how to design forms, timetables and transportation tickets. How cool is that?

Comments

Wonderful stuff. It’s important and under-appreciated by some. Keep preachin’ it.

John's Gravatar

John
Thu 8th Nov 2007
at 2:01 am

I need a note to remind me to go to the supermarket, so i know how you feel.
Interesting breakdown of the subject.
I’m giving a talk to non-designers about design and I’m struggling to think of a booklist that doesn’t require too much previous.
Considering they’re future content providers and possible entrepreneurs, I want to emphasise the fact that design isn’t a gloss paint to be applied at the last minute. Is it okay if i reference you?

andrew's Gravatar

andrew
Thu 8th Nov 2007
at 9:07 am

Cracking presentation Mark, any chnace of a podcast on this with audio?

Im sure there are plenty of readers who would be keen to listen in....

Ian's Gravatar

Ian
Thu 8th Nov 2007
at 9:38 am

What a joy it is to have found someone who cares about typesetting! I spent 17 years as a typesetter and it was a constant learning experience. I left the industry 14 years ago, as around that time clients, unable to quantify quality v. cost, dumped the quality. I saw many excellent typesetters abandon the industry for other careers, and with their demise a downward spiral in the output of many mediums. You obviously take your mission extremely seriously, and I will continue to monitor your site with enthusiasm. I also recommend to you and your readers an invaluable little book called “Hart’s Rules for Compositors”, Oxford University Press, now in its 40th edition.

Theresa's Gravatar

Theresa
Thu 8th Nov 2007
at 10:08 am

Re: zee design manual, zis is Germany, vee do everyding wiz the manual! Heavens, DIN is a great example, the standard typeface for many applications! Having lived in Germany, Frankfurt, I have come understand the way German do everything, by the book and in a lot of ways it a good idea.

Chris Carpenter's Gravatar

Chris Carpenter
Thu 8th Nov 2007
at 11:54 am

In response to “sticking out like a sore thumb”, it was actually the presence of slightly “out of the norm” sessions like yours which convinced me to attend this conference. I’m a jack-of-all-trades developer (from CSS to database architecture), and it’s been hard to find conferences which’d cater to all of those interests, rather than just a small part of it.

I’d particularly like to thank you for the micro typography part of your talk - as you also mentioned during the talk, this is the stuff that isn’t really talked about. But coming from a technical background, I’ve always been completely oblivious to (most of) these things. The macro typography I’ve heard and read and seen before, but something as simple as seeing how to balance white-space in a navigation menu is eye-opening.

I’ll be perusing the archives, where I expect I can find the answer to the following, but still: do you have any pointers to places where I can learn more about such basics?

Sander's Gravatar

Sander
Thu 8th Nov 2007
at 2:07 pm

Excellent presentation, Mark, and thank you for the slides. I lived in Germany for five years and am still inspired by the visits I made to Berlin.

If I may, would you share with us the ISBN of the book you found on designing forms/timetables/tickets? Sounds like it’d be an interesting read. Thanks again! ~jkc

Jack Cole's Gravatar

Jack Cole
Thu 8th Nov 2007
at 2:08 pm

I love the slide with metal band logos.  I’d love to hear more about what the narration around that slide was.  I was able to recognize most of them even at the low slideshare resolution, which says nothing about typography and everything about my awful taste in music.  :)

Scott Nellé's Gravatar

Scott Nellé
Thu 8th Nov 2007
at 3:07 pm

I noticed you no longer put bullets out in the margin… what prompted the change?

Ryan's Gravatar

Ryan
Fri 9th Nov 2007
at 1:08 am

Theresa: I have the updated version of ‘Hart’s rules’. You’re right, it’s a great little book.

Sander: Thanks! Currently, the best place to look for these typography basics is still books. Pretty old ones at that. A great introduction to the basics of typography is a book called ‘Type and Typography’ by Phil Baines.

Jack Cole: As it was in German, I failed to get the ISBN. Slightly annoyed about that in retrospect.

Ryan: Bullets in the margin are not always applicable. It depends very much on the gutters and placement on the grid. In my case, the left gutter is too shallow for them to be hung and still look good. Maybe not typographically ‘correct’, sure, but I’ve given them plenty of contrast so they look like lists, and not part of the body copy.

Mark Boulton's Gravatar

Mark Boulton
Fri 9th Nov 2007
at 11:40 am

Thanks for posting the slides, it was a very interesting read.  The only problem is that now I’m itching to spend ages redesigning my blog - something that’s long overdue, but sadly still needs to be a way down my priority list.

Still, I’ve bookmarked it for when I do get round to it.

Adrian McEwen's Gravatar

Adrian McEwen
Fri 9th Nov 2007
at 6:42 pm

What an inspired presentation. I only wish I’d been there; but thanks for the slides and accompanying notes.

So, what’s it like, Mark? ;)

johno's Gravatar

johno
Sat 10th Nov 2007
at 6:50 am

I had a pleasure of listening to your presentation in Berlin - great stuff! Really enjoyed it, thank you.

Just one small thing I just can’t agree with is the differentiation of hyphens, em dashes and minuses in web typography. Especially in the times of user-generated content - if a thing is not on the keyboard, it simply doesn’t exist in users’ minds at all.
Proper micro typography is always awesome, but let’s leave it for the ‘elite’ printed media :)

Bartek's Gravatar

Bartek
Sat 10th Nov 2007
at 8:23 pm

What typeface are you using in this keynote?

Pat's Gravatar

Pat
Sat 10th Nov 2007
at 10:25 pm

Mark,

I find your presentation wonderful, I just want to get more out of it. I wonder if you will be writing about it, in the form of a tutorial.

Victor Noagbodji's Gravatar

Victor Noagbodji
Sun 11th Nov 2007
at 6:34 am

Dear Mark

Thank for you for an beautiful and thought-provoking session in Berlin. I have been thinking about redesigning my site ever since.

I was wondering if you’d recommend any books for a reader who’d like to get started with typography. A good place to get the basics.

I have been designing for years without this knowledge, but now I want to learn more.

- Jens Poder

Jens Poder's Gravatar

Jens Poder
Tue 13th Nov 2007
at 9:15 am

I can’t agree more that typography is too often overlooked in web design. Thanks for the tips.

I guess design is just a blend of everything, whether it’s graphic design, web design, or product design. Which is why I always try to a wide variety of designs as often as I can.

An interesting one is the upcoming Singapore Design Festival http://www.singaporedesignfestival.com

Exciting events from all fields of design, so I’m definitely looking forward to it!

sophie's Gravatar

sophie
Wed 14th Nov 2007
at 10:42 am

i agree design is fusion for all of them Prestito

Prestito online's Gravatar

Prestito online
Wed 21st Nov 2007
at 4:32 pm

Good stuff. Here’s to hoping people will consider typography earlier in the process.

One thing: you not only may letterspace capitals, I would say you always must. Even if the typeface is just capitals (useless, but they exist: Trajan), always look at it. Your examples are naturally good, but it has to be said.

Rob Mientjes's Gravatar

Rob Mientjes
Thu 22nd Nov 2007
at 8:46 am

Commenting is not available in this section entry.

A picture of Mark BoultonI'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.

I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.

If you're after simple, clean and effective web design; let me know.