0
Better Typography
     Mark Boulton
markboulton.co.uk
markboultondesign.com
mark@markboulton.co.uk
1. Structure
2. Process
3. Macro typography
4. Micro typography
Typography and Web 2.0
seduced
art & sex
  from
antiquity
    to
   now
seduced
 art & sex
   from
 antiquity
     to
    now
A world of
Verdana and Arial
typography
1 the art or process of setting and arranging types and
printing from them. 2 the style and appearance of print...
typography
1 the mechanical notation and arrangement of language.
Typography is not...
...deciding which is best,
    Verdana or Arial.
...just a designers responsibility.
STRUCTURE
‘Typography has one plain duty before it and
that is to convey information in writing.’
                                  ...
Information is language
words → sentences
sentences → paragraphs
paragraphs → groupings
 groupings → sections
 sections → document
Documents have a
conceptual structure.
Author’s
Conceptual
 Structure
Author’s     Reader’s
Conceptual   Conceptual
 Structure    Structure
Designer


 Author’s        Reader’s
Conceptual      Conceptual
 Structure       Structure
Content & Presentation
Designer


 Author’s        Reader’s
Conceptual      Conceptual
 Structure       Structure
Designer


 Author’s            Reader’s
Conceptual          Conceptual
 Structure           Structure


             HTML
P RO C E S S
Elements of User Experience
        Jesse James Garrett
visual design
  surface
skeleton                                                                    information design
str...
A linear process?
visual design
  surface
skeleton                        information design
structure                       interaction des...
typography

                         visual design
  surface
skeleton                 information design
structure        ...
typography

                         visual design
  surface
skeleton                 information design
structure        ...
typography

                         visual design
  surface
skeleton                 information design
structure        ...
*
‘Can you design a theme for me?’

        * Interchangeable with ‘skin’
Content & Presentation
        ...again!
Greybox wireframes
Greybox Methodology: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
Jesse Bennett-Chamberlain: http://31three.com/
Look at typographic design
  earlier in the process.
M AC RO T Y P O G R A P H Y
The big stuff
Creating spacial relationships
Golden Section
b

a
a   b
a   b
a   a   a
a   a   a
a   a   a
Grids
A way of organising stuff
Provide a visual language
Answer layout questions
Sign in • Register • Read today’s paper • Jobs




comment is free...                                                     ...
Sign in • Register • Read today’s paper • Jobs




comment is free...                                                     ...
Sign in • Register • Read today’s paper • Jobs




comment is free...                                                     ...
M I C RO T Y P O G R A P H Y
The little stuff
Hyphens are not dashes
Britain’s workers improve their
    lives - by doing nothing
Britain’s workers improve their
   lives -- by doing nothing
Britain’s workers improve their
   lives—by doing nothing
Britain’s workers improve their
    lives – by doing nothing
- hyphen    Müller-Brockmann

– en dash   3–6 April; 25–30 mm
            a phrase marker – thus – with spaces
— em dash  ...
Never negatively space lowercase
Y O U C A N S PA C E C A P S
&
HEADINGS       SUBHEADINGS
{HOME}       NOTEBOOK        WORK       PUBLICATIONS       ICON SHOP      ABOUT       CONTACT




                        ...
<h1>Hand-crafted pixels
<span class=quot;ampquot;>&amp;</span> text.</h1>

span.amp {
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Upcoming SlideShare
Loading in...5
×

Better Typography

28,276

Published on

Initially presented during the Web 2.0 Expo in Berlin, this presentation takes typography beyond the surface layer. Structure, Process, Macro and Micro typography are all covered in detail to help you improve the typographic quality on your site, service or product.

Published in: Technology, Design
6 Comments
101 Likes
Statistics
Notes
No Downloads
Views
Total Views
28,276
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
1,770
Comments
6
Likes
101
Embeds 0
No embeds

No notes for slide

Transcript of "Better Typography"

  1. 1. Better Typography Mark Boulton
  2. 2. markboulton.co.uk markboultondesign.com
  3. 3. mark@markboulton.co.uk
  4. 4. 1. Structure 2. Process 3. Macro typography 4. Micro typography
  5. 5. Typography and Web 2.0
  6. 6. seduced art & sex from antiquity to now
  7. 7. seduced art & sex from antiquity to now
  8. 8. A world of Verdana and Arial
  9. 9. typography 1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2
  10. 10. typography 1 the mechanical notation and arrangement of language.
  11. 11. Typography is not...
  12. 12. ...deciding which is best, Verdana or Arial.
  13. 13. ...just a designers responsibility.
  14. 14. STRUCTURE
  15. 15. ‘Typography has one plain duty before it and that is to convey information in writing.’ Emil Ruder
  16. 16. Information is language
  17. 17. words → sentences sentences → paragraphs paragraphs → groupings groupings → sections sections → document
  18. 18. Documents have a conceptual structure.
  19. 19. Author’s Conceptual Structure
  20. 20. Author’s Reader’s Conceptual Conceptual Structure Structure
  21. 21. Designer Author’s Reader’s Conceptual Conceptual Structure Structure
  22. 22. Content & Presentation
  23. 23. Designer Author’s Reader’s Conceptual Conceptual Structure Structure
  24. 24. Designer Author’s Reader’s Conceptual Conceptual Structure Structure HTML
  25. 25. P RO C E S S
  26. 26. Elements of User Experience Jesse James Garrett
  27. 27. visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives For a much better diagram go to: http://www.jjg.net/elements/pdf/elements.pdf
  28. 28. A linear process?
  29. 29. visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives project lifespan?
  30. 30. typography visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  31. 31. typography visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  32. 32. typography visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  33. 33. * ‘Can you design a theme for me?’ * Interchangeable with ‘skin’
  34. 34. Content & Presentation ...again!
  35. 35. Greybox wireframes
  36. 36. Greybox Methodology: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
  37. 37. Jesse Bennett-Chamberlain: http://31three.com/
  38. 38. Look at typographic design earlier in the process.
  39. 39. M AC RO T Y P O G R A P H Y
  40. 40. The big stuff
  41. 41. Creating spacial relationships
  42. 42. Golden Section
  43. 43. b a
  44. 44. a b
  45. 45. a b
  46. 46. a a a
  47. 47. a a a
  48. 48. a a a
  49. 49. Grids
  50. 50. A way of organising stuff
  51. 51. Provide a visual language
  52. 52. Answer layout questions
  53. 53. Sign in • Register • Read today’s paper • Jobs comment is free... Search Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs Blogs Editor’s picks Space cadets Dan Kennedy 05:00pm: Is seeing a UFO any more crazy than believing God Created the universe in six days> It is if you are running to be president of the United States. Comments A bankrupt hotchpotch Ed Vaizey Nov 06 07, 04:40pm The Queen’s speech: Big on short-term tricks, and lacking in long-term vision just about sums up the government’s new legislation Comments State of emergency by Steve Bell If Ball wants better schools, he End of mutual respect Derek Wall Nov 06 07, 04:20pm must scrap faith selection As the Respect party splits in two
  54. 54. Sign in • Register • Read today’s paper • Jobs comment is free... Search Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs Blogs Editor’s picks Space cadets Dan Kennedy 05:00pm: Is seeing a UFO any more crazy than believing God Created the universe in six days> It is if you are running to be president of the United States. Comments A bankrupt hotchpotch Ed Vaizey Nov 06 07, 04:40pm The Queen’s speech: Big on short-term tricks, and lacking in long-term vision just about sums up the government’s new legislation Comments State of emergency by Steve Bell If Ball wants better schools, he End of mutual respect Derek Wall Nov 06 07, 04:20pm must scrap faith selection As the Respect party splits in two
  55. 55. Sign in • Register • Read today’s paper • Jobs comment is free... Search Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs Blogs Editor’s picks Space cadets Dan Kennedy 05:00pm: Is seeing a UFO any more crazy than believing God Created the universe in six days> It is if you are running to be president of the United States. Comments A bankrupt hotchpotch Ed Vaizey Nov 06 07, 04:40pm The Queen’s speech: Big on short-term tricks, and lacking in long-term vision just about sums up the government’s new legislation Comments State of emergency by Steve Bell If Ball wants better schools, he End of mutual respect Derek Wall Nov 06 07, 04:20pm must scrap faith selection As the Respect party splits in two
  56. 56. M I C RO T Y P O G R A P H Y
  57. 57. The little stuff
  58. 58. Hyphens are not dashes
  59. 59. Britain’s workers improve their lives - by doing nothing
  60. 60. Britain’s workers improve their lives -- by doing nothing
  61. 61. Britain’s workers improve their lives—by doing nothing
  62. 62. Britain’s workers improve their lives – by doing nothing
  63. 63. - hyphen Müller-Brockmann – en dash 3–6 April; 25–30 mm a phrase marker – thus – with spaces — em dash a phrase marker—thus—with no spaces — Doesn’t sound much like a bee to me. — It’s a bloody aardvark! − minus 4−1=3
  64. 64. Never negatively space lowercase
  65. 65. Y O U C A N S PA C E C A P S
  66. 66. & HEADINGS SUBHEADINGS
  67. 67. {HOME} NOTEBOOK WORK PUBLICATIONS ICON SHOP ABOUT CONTACT LATEST FEATURED WORK Hand-crafted pixels & text. MTV.com SimpleBits is a tiny web design studio founded by XHTML/CSS development designer and author Dan Cederholm. We create simple, Cork’d readable interfaces balanced with a standards-based Creative Director methodology. Learn more TravelPost.com Logo + interface design RECENT NOTEBOOK ARTICLES & QUICKBITS SPEAKING EVENTS Planet Microformats A giant master feed of anything and everything tagged with “microformats” SXSW Interactive from Brian Suda. {02.20.07} March 9-13, 2007 ~ Austin, TX An Event Apart Boston March 26-27, 2007 ~ Boston Web Directions North @media 2007 (America) May 24-25, 2007 ~ San Francisco I’ve returned from several days in Vancouver, and the first-ever Web @media 2007 (Europe) Directions North. It was a great trip, a great conference, and my second June 7-8, 2007 ~ London attempt at snowboarding in the last 20 years. I’ll first say congrats to Maxine, John, Dave and Derek for putting on what was an oustanding www.simplebits.com
  68. 68. <h1>Hand-crafted pixels <span class=quot;ampquot;>&amp;</span> text.</h1> span.amp {
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×