Better Typography

1. Better Typography Mark Boulton

2. markboulton.co.uk markboultondesign.com

4. mark@markboulton.co.uk

5. 1. Structure 2. Process 3. Macro typography 4. Micro typography

6. Typography and Web 2.0

7. seduced art & sex from antiquity to now

8. seduced art & sex from antiquity to now

14. A world of Verdana and Arial

15. typography 1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2

16. typography 1 the mechanical notation and arrangement of language.

17. Typography is not...

18. ...deciding which is best, Verdana or Arial.

19. ...just a designers responsibility.

20. STRUCTURE

21. ‘Typography has one plain duty before it and that is to convey information in writing.’ Emil Ruder

22. Information is language

23. words → sentences sentences → paragraphs paragraphs → groupings groupings → sections sections → document

24. Documents have a conceptual structure.

25. Author’s Conceptual Structure

26. Author’s Reader’s Conceptual Conceptual Structure Structure

27. Designer Author’s Reader’s Conceptual Conceptual Structure Structure

28. Content & Presentation

34. Designer Author’s Reader’s Conceptual Conceptual Structure Structure

35. Designer Author’s Reader’s Conceptual Conceptual Structure Structure HTML

36. P RO C E S S

37. Elements of User Experience Jesse James Garrett

38. 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

39. A linear process?

40. visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives project lifespan?

41. typography visual design surface skeleton information design structure interaction design scope requirements strategy user needs / site objectives

44. * ‘Can you design a theme for me?’ * Interchangeable with ‘skin’

45. Content & Presentation ...again!

46. Greybox wireframes

48. Greybox Methodology: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php

51. Jesse Bennett-Chamberlain: http://31three.com/

52. Look at typographic design earlier in the process.

61. M AC RO T Y P O G R A P H Y

62. The big stuff

63. Creating spacial relationships

64. Golden Section

70. b a

72. a b

73. a b

74. a a a

75. a a a

76. a a a

77. Grids

78. A way of organising stuff

79. Provide a visual language

80. Answer layout questions

86. 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

93. M I C RO T Y P O G R A P H Y

94. The little stuff

95. Hyphens are not dashes

96. Britain’s workers improve their lives - by doing nothing

97. Britain’s workers improve their lives -- by doing nothing

98. Britain’s workers improve their lives—by doing nothing

99. Britain’s workers improve their lives – by doing nothing

100. - 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

104. Never negatively space lowercase

105. Y O U C A N S PA C E C A P S

106. & HEADINGS SUBHEADINGS

107. {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

109. <h1>Hand-crafted pixels <span class=quot;ampquot;>&</span> text.</h1> span.amp { font-family: quot;Goudy Old Stylequot;, quot;Palatinoquot;, quot;Book Antiquaquot;, serif; font-style: italic; font-size: 110%; }

110. Framing navigation

111. Registration About Conference Expo

117. Framing tables

118. Barry Island 0533 0600 0600 Rhoose 0540 0610 0612 Llantwit Major 0550 0612 0622 Bridgend 0552 0620 0648

121. 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.

126. 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.

128. ‘...It is not surface, it is not the last thing that needs to be considered, it is the thing itself’ Stephen Fry

129. Thank you Slides and resources at : http://www.markboulton.co.uk/present/web2berlin/

Better Typography

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (14)

Similar to Better Typography

Similar to Better Typography (20)

Recently uploaded

Recently uploaded (20)

Better Typography