Mark Boulton

November 7th, 2007

Type in Berlin

Since Sunday even­ing, I’ve been in Ber­lin attending—and speak­ing at—the Web 2.0 Expo. I presen­ted earlier today on the very ‘un-web 2.0’ topic of Typo­graphy. I think it may have sur­prised a few people as to how rel­ev­ant typo­graphy is to design­ing UI—even to applic­a­tions. As usual, I talked about type as being more than just choos­ing typefaces, which is where most design­ers, unfor­tu­nately, see typo­graphy begin and end. 

On clos­ing, I gave a URL which would link to a sec­tion of this site with the slides, notes etc. You can down­load the slides here.

Apo­lo­gies for the delay, but the up-speed of the con­fer­ence wifi was incred­ibly poor, so I’ve only just got around to doing it. 

I’ve also decided to embed the slides here from Slide­share. I don’t nor­mally do this, so apo­lo­gies if Slide­share clogs things up, but I thought it might be nice to have the slides here whilst I break-down the top­ics I presented. 

The slides

| View | Upload your own

What was said

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

I star­ted off with a quick intro­duc­tion of pla­cing typo­graphy within Web 2.0. Where does typo­graphic design as a prac­tice fit with design­ing applic­a­tions and plat­forms for the ‘web of data’. The rest of the talk was then split into four main sec­tion: Struc­ture, Pro­cess, Macro typo­graphy and Micro typography. 

I presen­ted the fol­low­ing points: 

Struc­ture

• Typo­graphy is present­ing information.
• Inform­a­tion is lan­guage and lan­guage has structure.
• Doc­u­ments have a con­cep­tual model and these need to be matched to the reader’s con­cep­tual model of the content.
• It’s the designer’s job to bridge this gap and present the con­tent which fits both mod­els. Incid­ent­ally, I feel this is one of the prob­lems facing design­ers who want to art dir­ect on the web.
• Con­tent and presentation.

Pro­cess

• Jesse James Garrett’s ‘Ele­ments of User Experience’.
• Wrongly inter­preted as a lin­ear process.
• A pro­cess like this releg­ates design, and spe­cific­ally typo­graphy, to the sur­face plane.
• Grey­box Wireframes.
• Involving typo­graphic design much earlier in the process.

Macro typo­graphy

• The Big Stuff.
• Cre­at­ing spa­cial relationships.
• The Golden Section.
• The Golden Sec­tion as applied to the web.
• The Rule of Thirds.
• Grids and con­sist­ency of design across page types.

Micro typo­graphy

• Hyphens are not dashes.
• Let­ter­spa­cing: neg­at­ively and positively.
• Italic ampersands in headings.
• Fram­ing nav­ig­a­tion items and lists.
• Fram­ing tables rows and columns

Those were the main points. It seemed to go down well, although, I still had the feel­ing the present­a­tion stuck out like a sore thumb in a con­fer­ence dis­cuss­ing some of the loftier aspects of design­ing for the web. 

The rest of the time was spent in the pleas­ant com­pany of friends old and new. Jeremy and Jes­sica, Simon and Nat were won­der­ful in arran­ging a vari­ety of even­ing Ber­lin eat­ing estab­lish­ments. In truth, I met them in the lobby and we wandered around until we found a res­taur­ant that could accom­mod­ate 13 people. 

I ate some strange Ger­man food, and drunk some even stranger red beer. I said strange, not bad. I enjoyed sit­ting next to Jesse for two meals and dis­cuss­ing everything from wash­ing machines and remote con­trols, to the waiter with the incred­ible memory (yes, he took a com­plete order—starters and main courses— without writ­ing a single thing down! Impress­ive 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 try­ing to man­age a con­fer­ence, pre­par­ing a talk and run­ning a small busi­ness that is tick­ing over at home. That has been chal­len­ging. I missed The Wife and am dying to see pro­gress on my house exten­sion.

I will say this for Ber­lin though, it’s a great place to come as a designer. I even found a design manual in a book­shop today on how to design forms, timetables and trans­port­a­tion tick­ets. How cool is that?

This entry was posted on Wednesday, November 7th, 2007 at 9:37 am and is filed under Conferences, Design, Typography.

You can follow any responses to this entry through the RSS 2.0 feed.

Responses are currently closed, but you can trackback from your own site.

Related Posts:

• Content AND Presentation
• Audience Matrix: Our thoughts on the Drupal 7 audience
• Ten Crimes Against Web Typography (and how to avoid them)
• Drupal7UX: we need you NOW!
• abcdefghijklmnopqrstuvwxyz

19 Responses to “Type in Berlin”

1. 
   John said on: November 7th, 2007 at 7:01 pm

   Won­der­ful stuff. It’s import­ant and under-appreciated by some. Keep preachin’ it.

2. 
   andrew said on: November 8th, 2007 at 2:07 am

   I need a note to remind me to go to the super­mar­ket, so i know how you feel.
   
   Inter­est­ing break­down of the subject.

   I’m giv­ing a talk to non-designers about design and I’m strug­gling to think of a book­list that doesn’t require too much pre­vi­ous.
   
   Con­sid­er­ing they’re future con­tent pro­viders and pos­sible entre­pren­eurs, I want to emphas­ise the fact that design isn’t a gloss paint to be applied at the last minute. Is it okay if i ref­er­ence you?

3. 
   Ian said on: November 8th, 2007 at 2:38 am

   Crack­ing present­a­tion Mark, any chnace of a pod­cast on this with audio? 

   Im sure there are plenty of read­ers who would be keen to listen in.…

4. 
   Theresa said on: November 8th, 2007 at 3:08 am

   What a joy it is to have found someone who cares about type­set­ting! I spent 17 years as a type­set­ter and it was a con­stant learn­ing exper­i­ence. I left the industry 14 years ago, as around that time cli­ents, unable to quantify qual­ity v. cost, dumped the qual­ity. I saw many excel­lent type­set­ters aban­don the industry for other careers, and with their demise a down­ward spiral in the out­put of many medi­ums. You obvi­ously take your mis­sion extremely ser­i­ously, and I will con­tinue to mon­itor your site with enthu­si­asm. I also recom­mend to you and your read­ers an invalu­able little book called “Hart’s Rules for Com­pos­it­ors”, Oxford Uni­ver­sity Press, now in its 40^th edition.

5. 
   Chris Carpenter said on: November 8th, 2007 at 4:54 am

   Re: zee design manual, zis is Ger­many, vee do everyding wiz the manual! Heav­ens, DIN is a great example, the stand­ard typeface for many applic­a­tions! Hav­ing lived in Ger­many, Frank­furt, I have come under­stand the way Ger­man do everything, by the book and in a lot of ways it a good idea.

6. 
   Sander said on: November 8th, 2007 at 7:07 am

   In response to “stick­ing out like a sore thumb”, it was actu­ally the pres­ence of slightly “out of the norm” ses­sions like yours which con­vinced me to attend this con­fer­ence. I’m a jack-of-all-trades developer (from CSS to data­base archi­tec­ture), and it’s been hard to find con­fer­ences which’d cater to all of those interests, rather than just a small part of it. 

   I’d par­tic­u­larly like to thank you for the micro typo­graphy part of your talk — as you also men­tioned dur­ing the talk, this is the stuff that isn’t really talked about. But com­ing from a tech­nical back­ground, I’ve always been com­pletely obli­vi­ous to (most of) these things. The macro typo­graphy I’ve heard and read and seen before, but some­thing as simple as see­ing how to bal­ance white-space in a nav­ig­a­tion menu is eye-opening. 

   I’ll be per­us­ing the archives, where I expect I can find the answer to the fol­low­ing, but still: do you have any point­ers to places where I can learn more about such basics?

7. 
   Jack Cole said on: November 8th, 2007 at 7:08 am

   Excel­lent present­a­tion, Mark, and thank you for the slides. I lived in Ger­many for five years and am still inspired by the vis­its I made to Berlin. 

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

8. 
   Scott Nellé said on: November 8th, 2007 at 8:07 am

   I love the slide with metal band logos.  I’d love to hear more about what the nar­ra­tion around that slide was.  I was able to recog­nize most of them even at the low slide­share res­ol­u­tion, which says noth­ing about typo­graphy and everything about my awful taste in music.  :)

9. 
   Ryan said on: November 8th, 2007 at 6:08 pm

   I noticed you no longer put bul­lets out in the mar­gin… what promp­ted the change?

10. 
    Mark Boulton said on: November 9th, 2007 at 4:40 am

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

    Sander: Thanks! Cur­rently, the best place to look for these typo­graphy basics is still books. Pretty old ones at that. A great intro­duc­tion to the basics of typo­graphy is a book called ‘Type and Typo­graphy’ by Phil Baines. 

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

    Ryan: Bul­lets in the mar­gin are not always applic­able. It depends very much on the gut­ters and place­ment on the grid. In my case, the left gut­ter is too shal­low for them to be hung and still look good. Maybe not typo­graph­ic­ally ‘cor­rect’, sure, but I’ve given them plenty of con­trast so they look like lists, and not part of the body copy.

11. 
    Adrian McEwen said on: November 9th, 2007 at 11:42 am

    Thanks for post­ing the slides, it was a very inter­est­ing read.  The only prob­lem is that now I’m itch­ing to spend ages redesign­ing my blog — some­thing that’s long over­due, but sadly still needs to be a way down my pri­or­ity list.

    Still, I’ve book­marked it for when I do get round to it.

12. 
    johno said on: November 9th, 2007 at 11:50 pm

    What an inspired present­a­tion. I only wish I’d been there; but thanks for the slides and accom­pa­ny­ing notes. 

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

13. 
    Bartek said on: November 10th, 2007 at 1:23 pm

    I had a pleas­ure of listen­ing to your present­a­tion in Ber­lin — great stuff! Really enjoyed it, thank you. 

    Just one small thing I just can’t agree with is the dif­fer­en­ti­ation of hyphens, em dashes and minuses in web typo­graphy. Espe­cially in the times of user-generated con­tent — if a thing is not on the key­board, it simply doesn’t exist in users’ minds at all.
    
    Proper micro typo­graphy is always awe­some, but let’s leave it for the ‘elite’ prin­ted media :)

14. 
    Pat said on: November 10th, 2007 at 3:25 pm

    What typeface are you using in this keynote?

15. 
    Victor Noagbodji said on: November 10th, 2007 at 11:34 pm

    Mark,

    I find your present­a­tion won­der­ful, I just want to get more out of it. I won­der if you will be writ­ing about it, in the form of a tutorial.

16. 
    Jens Poder said on: November 13th, 2007 at 2:15 am

    Dear Mark

    Thank for you for an beau­ti­ful and thought-provoking ses­sion in Ber­lin. I have been think­ing about redesign­ing my site ever since. 

    I was won­der­ing if you’d recom­mend any books for a reader who’d like to get star­ted with typo­graphy. A good place to get the basics. 

    I have been design­ing for years without this know­ledge, but now I want to learn more.

    - Jens Poder

17. 
    sophie said on: November 14th, 2007 at 3:42 am

    I can’t agree more that typo­graphy is too often over­looked 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 vari­ety of designs as often as I can. 

    An inter­est­ing one is the upcom­ing Singa­pore Design Fest­ival http://www.singaporedesignfestival.com

    Excit­ing events from all fields of design, so I’m def­in­itely look­ing for­ward to it!

18. 
    Prestito online said on: November 21st, 2007 at 9:32 am

    i agree design is fusion for all of them Prestito

19. 
    Rob Mientjes said on: November 22nd, 2007 at 1:46 am

    Good stuff. Here’s to hop­ing people will con­sider typo­graphy earlier in the process. 

    One thing: you not only may let­ter­space cap­it­als, I would say you always must. Even if the typeface is just cap­it­als (use­less, but they exist: Tra­jan), always look at it. Your examples are nat­ur­ally good, but it has to be said.