Your SlideShare is downloading. ×
0
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
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
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Better Typography
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Better Typography

27,914

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 …

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
27,914
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
1,768
Comments
6
Likes
101
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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=quot;ampquot;>&amp;</span> text.</h1> span.amp {

×