Better Typography

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

5 comments

Comments 1 - 5 of 5 previous next Post a comment

  • guest5da947 guest5da947 1 month ago
    Er, the video is called 'better typography; but already the starting slide, with the title, has a kerning that is a slap in the face of this very aim.

    I studied typography.There are so many typographic mistakes, I don't know where to start even. For example, an ellipsis (...) in sentence means the sentence is continued later or abbreviated. It does not mean the word is abbreviated. So there is a space between the last/first word and the ellipsis.

    Just one example.
  • garcon garcon 5 months ago
    Great slides, thanks! I wish to hear you at live.
  • guesta375e4 guesta375e4 9 months ago
    i loved that .slide... im going to school for that and this is the only thing im lacking in..... it really helped
  • Gaurav_M Gaurav M 10 months ago
    i am your big fan mr. boulton in the web domain
    sexy techniques in slides as ever
  • hexholden Alberto D'ottavi 2 years ago
    so sorry... I really wanted to come to your speech but couldn't do it

    this is really a fascinating topic, and liked a lot your approach (for what I cann se from slides)

Post a comment
Embed Video
Edit your comment Cancel

56 Favorites

Better Typography - Presentation Transcript

  1. Better Typography Mark Boulton
  2. markboulton.co.uk markboultondesign.com
  3. mark@markboulton.co.uk
  4. 1. Structure 2. Process 3. Macro typography 4. Micro typography
  5. Typography and Web 2.0
  6. seduced art & sex from antiquity to now
  7. seduced art & sex from antiquity to now
  8. A world of Verdana and Arial
  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. typography 1 the mechanical notation and arrangement of language.
  11. Typography is not...
  12. ...deciding which is best, Verdana or Arial.
  13. ...just a designers responsibility.
  14. STRUCTURE
  15. ‘Typography has one plain duty before it and that is to convey information in writing.’ Emil Ruder
  16. Information is language
  17. words → sentences sentences → paragraphs paragraphs → groupings groupings → sections sections → document
  18. Documents have a conceptual structure.
  19. Author’s Conceptual Structure
  20. Author’s Reader’s Conceptual Conceptual Structure Structure
  21. Designer Author’s Reader’s Conceptual Conceptual Structure Structure
  22. Content & Presentation
  23. Designer Author’s Reader’s Conceptual Conceptual Structure Structure
  24. Designer Author’s Reader’s Conceptual Conceptual Structure Structure HTML
  25. P RO C E S S
  26. Elements of User Experience Jesse James Garrett
  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. A linear process?
  29. visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives project lifespan?
  30. typography visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  31. typography visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  32. typography visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives
  33. * ‘Can you design a theme for me?’ * Interchangeable with ‘skin’
  34. Content & Presentation ...again!
  35. Greybox wireframes
  36. Greybox Methodology: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
  37. Jesse Bennett-Chamberlain: http://31three.com/
  38. Look at typographic design earlier in the process.
  39. M AC RO T Y P O G R A P H Y
  40. The big stuff
  41. Creating spacial relationships
  42. Golden Section
  43. b a
  44. a b
  45. a b
  46. a a a
  47. a a a
  48. a a a
  49. Grids
  50. A way of organising stuff
  51. Provide a visual language
  52. Answer layout questions
  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. 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. 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. M I C RO T Y P O G R A P H Y
  57. The little stuff
  58. Hyphens are not dashes
  59. Britain’s workers improve their lives - by doing nothing
  60. Britain’s workers improve their lives -- by doing nothing
  61. Britain’s workers improve their lives—by doing nothing
  62. Britain’s workers improve their lives – by doing nothing
  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. Never negatively space lowercase
  65. Y O U C A N S PA C E C A P S
  66. & HEADINGS SUBHEADINGS
  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. <h1>Hand-crafted pixels <span class=\"amp\">&amp;</span> text.</h1> span.amp { font-family: \"Goudy Old Style\", \"Palatino\", \"Book Antiqua\", serif; font-style: italic; font-size: 110%; }
  69. Framing navigation
  70. Registration About Conference Expo
  71. Registration About Conference Expo
  72. Registration About Conference Expo
  73. Registration About Conference Expo
  74. Registration About Conference Expo
  75. Registration About Conference Expo
  76. Framing tables
  77. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  78. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  79. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  80. Text numerals like these—23, 48, 192 and 2096—belong in text Lining numerals like these—23, 48, 192 and 2096—are better in tables.
  81. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  82. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0620 0648 0552
  83. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  84. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648
  85. 1. Structure Language; Conceptual models; Content & Presentation. 2. Process Greybox wireframes; Typography earlier in the process. 3. Macro typography The big stuff. Composition & Grids. 4. Micro typography The little stuff. Typesetting.
  86. ‘...It is not surface, it is not the last thing that needs to be considered, it is the thing itself’ Stephen Fry
  87. Thank you Slides and resources at : http://www.markboulton.co.uk/present/web2berlin/

markboultondesignmarkboultondesign, 2 years ago

custom

11557 views, 56 favs, 22 embeds more stats

Initially presented during the Web 2.0 Expo in Berl more

More Info

© All Rights Reserved

Go to text version
  • Total Views 11557
    • 8658 on SlideShare
    • 2899 from embeds
  • Comments 5
  • Favorites 56
  • Downloads 767
Most viewed embeds
  • 2725 views on http://www.markboulton.co.uk
  • 60 views on http://grafikdesign.wordpress.com
  • 25 views on http://www.dynamolondon.org
  • 15 views on http://christmasgorilla.com
  • 14 views on http://szklanowski.blogspot.com

more

All embeds
  • 2725 views on http://www.markboulton.co.uk
  • 60 views on http://grafikdesign.wordpress.com
  • 25 views on http://www.dynamolondon.org
  • 15 views on http://christmasgorilla.com
  • 14 views on http://szklanowski.blogspot.com
  • 12 views on http://sponge-ing.com
  • 8 views on http://thestrake.com
  • 8 views on http://www.linkist.com
  • 6 views on http://daniseuba.wordpress.com
  • 4 views on http://www.matuvu.nu
  • 4 views on http://static.slideshare.net
  • 3 views on http://alpha.linkist.com
  • 3 views on http://www.xanga.com
  • 2 views on http://dynamolondon.org
  • 2 views on http://brentg.tumblr.com
  • 2 views on http://abogawat.tumblr.com
  • 1 views on http://safe.tumblr.com
  • 1 views on http://markboulton.co.uk
  • 1 views on http://ilovetypography.com
  • 1 views on http://64.233.179.104
  • 1 views on http://203.84.223.237
  • 1 views on http://know.namics.com

less

Flagged as inappropriate Flag as inappropriate
Flag as innappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel

Categories