better typography
DESCRIPTION
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.TRANSCRIPT
![Page 1: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/1.jpg)
Better TypographyMark Boulton
![Page 2: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/2.jpg)
markboulton.co.ukmarkboultondesign.com
![Page 3: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/3.jpg)
![Page 5: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/5.jpg)
1. Structure2. Process3. Macro typography4. Micro typography
![Page 6: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/6.jpg)
Typography and Web 2.0
![Page 7: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/7.jpg)
seducedart & sex
fromantiquity
to now
![Page 8: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/8.jpg)
seducedart & sex
fromantiquity
to now
![Page 9: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/9.jpg)
![Page 10: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/10.jpg)
![Page 11: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/11.jpg)
![Page 12: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/12.jpg)
![Page 13: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/13.jpg)
![Page 14: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/14.jpg)
A world of Verdana and Arial
![Page 15: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/15.jpg)
typography1 the art or process of setting and arranging types and printing from them. 2 the style and appearance of printed matter. 2
![Page 16: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/16.jpg)
typography1 the mechanical notation and arrangement of language.
![Page 17: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/17.jpg)
Typography is not...
![Page 18: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/18.jpg)
...deciding which is best, Verdana or Arial.
![Page 19: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/19.jpg)
...just a designers responsibility.
![Page 20: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/20.jpg)
S T R U C T U R E
![Page 21: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/21.jpg)
‘Typography has one plain duty before it and that is to convey information in writing.’
Emil Ruder
![Page 22: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/22.jpg)
Information is language
![Page 23: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/23.jpg)
words → sentencessentences → paragraphsparagraphs → groupings
groupings → sectionssections → document
![Page 24: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/24.jpg)
Documents have a conceptual structure.
![Page 25: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/25.jpg)
Author’sConceptual
Structure
![Page 26: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/26.jpg)
Author’sConceptual
Structure
Reader’sConceptual
Structure
![Page 27: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/27.jpg)
Designer
Author’sConceptual
Structure
Reader’sConceptual
Structure
![Page 28: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/28.jpg)
Content & Presentation
![Page 29: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/29.jpg)
![Page 30: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/30.jpg)
![Page 31: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/31.jpg)
![Page 32: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/32.jpg)
![Page 33: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/33.jpg)
![Page 34: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/34.jpg)
Designer
Author’sConceptual
Structure
Reader’sConceptual
Structure
![Page 35: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/35.jpg)
Author’sConceptual
Structure
Reader’sConceptual
Structure
Designer
HTML
![Page 36: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/36.jpg)
P R O C E S S
![Page 37: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/37.jpg)
Elements of User ExperienceJesse James Garrett
![Page 38: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/38.jpg)
surface
skeleton
structure
scope
strategy
visual design
information design
interaction design
requirements
user needs / siteobjectives
For a much better diagram go to: http://www.jjg.net/elements/pdf/elements.pdf
![Page 39: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/39.jpg)
A linear process?
![Page 40: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/40.jpg)
surface
skeleton
structure
scope
strategy
visual design
information design
interaction design
requirements
user needs / siteobjectives
project lifespan?
![Page 41: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/41.jpg)
surface
skeleton
structure
scope
strategy
visual design
information design
interaction design
requirements
user needs / siteobjectives
typography
![Page 42: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/42.jpg)
surface
skeleton
structure
scope
strategy
visual design
information design
interaction design
requirements
user needs / siteobjectives
typography
![Page 43: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/43.jpg)
surface
skeleton
structure
scope
strategy
visual design
information design
interaction design
requirements
user needs / siteobjectives
typography
![Page 44: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/44.jpg)
‘Can you design a theme for me?’*
* Interchangeable with ‘skin’
![Page 45: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/45.jpg)
Content & Presentation...again!
![Page 46: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/46.jpg)
Greybox wireframes
![Page 47: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/47.jpg)
![Page 48: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/48.jpg)
Greybox Methodology: http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
![Page 49: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/49.jpg)
![Page 50: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/50.jpg)
![Page 51: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/51.jpg)
Jesse Bennett-Chamberlain: http://31three.com/
![Page 52: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/52.jpg)
Look at typographic design earlier in the process.
![Page 53: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/53.jpg)
![Page 54: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/54.jpg)
![Page 55: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/55.jpg)
![Page 56: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/56.jpg)
![Page 57: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/57.jpg)
![Page 58: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/58.jpg)
![Page 59: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/59.jpg)
![Page 60: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/60.jpg)
![Page 61: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/61.jpg)
M A C R O T Y P O G R A P H Y
![Page 62: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/62.jpg)
The big stuff
![Page 63: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/63.jpg)
Creating spacial relationships
![Page 64: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/64.jpg)
Golden Section
![Page 65: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/65.jpg)
![Page 66: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/66.jpg)
![Page 67: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/67.jpg)
![Page 68: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/68.jpg)
![Page 69: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/69.jpg)
![Page 70: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/70.jpg)
a
b
![Page 71: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/71.jpg)
![Page 72: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/72.jpg)
a b
![Page 73: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/73.jpg)
a b
![Page 74: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/74.jpg)
a a a
![Page 75: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/75.jpg)
a a a
![Page 76: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/76.jpg)
a a a
![Page 77: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/77.jpg)
Grids
![Page 78: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/78.jpg)
A way of organising stuff
![Page 79: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/79.jpg)
Provide a visual language
![Page 80: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/80.jpg)
Answer layout questions
![Page 81: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/81.jpg)
![Page 82: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/82.jpg)
![Page 83: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/83.jpg)
![Page 84: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/84.jpg)
![Page 85: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/85.jpg)
![Page 86: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/86.jpg)
Editor’s picksBlogs
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Sign in • Register • Read today’s paper • Jobs
Searchcomment is free...
Space cadets
Dan Kennedy05:00pm: Is seeing a UFO anymore crazy than believing GodCreated the universe in six days> Itis if you are running to bepresident of the United States.Comments
Ed Vaizey Nov 06 07, 04:40pmThe Queen’s speech: Big onshort-term tricks, and lacking inlong-term vision just about sumsup the government’s new legislationComments
A bankrupt hotchpotch
End of mutual respect
Derek Wall Nov 06 07, 04:20pmAs the Respect party splits in two
State of emergency by Steve Bell
If Ball wants better schools, hemust scrap faith selection
![Page 87: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/87.jpg)
Editor’s picksBlogs
Sign in • Register • Read today’s paper • Jobs
Searchcomment is free...
Space cadets
Dan Kennedy05:00pm: Is seeing a UFO anymore crazy than believing GodCreated the universe in six days> Itis if you are running to bepresident of the United States.Comments
Ed Vaizey Nov 06 07, 04:40pmThe Queen’s speech: Big onshort-term tricks, and lacking inlong-term vision just about sumsup the government’s new legislationComments
A bankrupt hotchpotch
End of mutual respect
Derek Wall Nov 06 07, 04:20pmAs the Respect party splits in two
State of emergency by Steve Bell
If Ball wants better schools, hemust scrap faith selection
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
![Page 88: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/88.jpg)
Editor’s picksBlogs
Home This week Contributors Subjects A-Z Editor’s blog Dan Chung Steve Bell About us Audio Webfeeds Other blogs
Sign in • Register • Read today’s paper • Jobs
Searchcomment is free...
Space cadets
Dan Kennedy05:00pm: Is seeing a UFO anymore crazy than believing GodCreated the universe in six days> Itis if you are running to bepresident of the United States.Comments
Ed Vaizey Nov 06 07, 04:40pmThe Queen’s speech: Big onshort-term tricks, and lacking inlong-term vision just about sumsup the government’s new legislationComments
A bankrupt hotchpotch
End of mutual respect
Derek Wall Nov 06 07, 04:20pmAs the Respect party splits in two
State of emergency by Steve Bell
If Ball wants better schools, hemust scrap faith selection
![Page 89: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/89.jpg)
![Page 90: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/90.jpg)
![Page 91: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/91.jpg)
![Page 92: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/92.jpg)
![Page 93: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/93.jpg)
M I C R O T Y P O G R A P H Y
![Page 94: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/94.jpg)
The little stuff
![Page 95: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/95.jpg)
Hyphens are not dashes
![Page 96: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/96.jpg)
Britain’s workers improve their lives - by doing nothing
![Page 97: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/97.jpg)
Britain’s workers improve their lives -- by doing nothing
![Page 98: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/98.jpg)
Britain’s workers improve their lives—by doing nothing
![Page 99: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/99.jpg)
Britain’s workers improve their lives – by doing nothing
![Page 100: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/100.jpg)
- 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
![Page 101: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/101.jpg)
![Page 102: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/102.jpg)
![Page 103: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/103.jpg)
![Page 104: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/104.jpg)
Never negatively space lowercase
![Page 105: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/105.jpg)
Y O U C A N S P A C E C A P S
![Page 106: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/106.jpg)
H E A D I N G S & S U B H E A D I N G S
![Page 107: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/107.jpg)
{ H O M E } N O T E B O O K W O R K P U B L I C A T I O N S I C O N S H O P A B O U T C O N T A C T
Hand-crafted pixels & text.SimpleBits is a tiny web design studio founded by
designer and author Dan Cederholm. We create simple,
readable interfaces balanced with a standards-based
methodology. Learn more
Planet Microformats
A giant master feed of anything and everything tagged with “microformats”
from Brian Suda. {02.20.07}
Web Directions North
I’ve returned from several days in Vancouver, and the first-ever Web
Directions North. It was a great trip, a great conference, and my second
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
L A T E S T F E A T U R E D W O R K
MTV.com
XHTML/CSS development
Cork’d
Creative Director
TravelPost.com
Logo + interface design
S P E A K I N G E V E N T S
SXSW Interactive
March 9-13, 2007 ~ Austin, TX
An Event Apart Boston
March 26-27, 2007 ~ Boston
@media 2007 (America)
May 24-25, 2007 ~ San Francisco
@media 2007 (Europe)
June 7-8, 2007 ~ London
R E C E N T N O T E B O O K A R T I C L E S & Q U I C K B I T S
www.simplebits.com
![Page 108: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/108.jpg)
![Page 109: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/109.jpg)
<h1>Hand-crafted pixels<span class="amp">&</span> text.</h1>
span.amp { font-family: "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-style: italic; font-size: 110%; }
![Page 110: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/110.jpg)
Framing navigation
![Page 111: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/111.jpg)
Registration
About
Conference
Expo
![Page 112: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/112.jpg)
Registration
About
Conference
Expo
![Page 113: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/113.jpg)
Registration
About
Conference
Expo
![Page 114: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/114.jpg)
Registration
About
Conference
Expo
![Page 115: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/115.jpg)
Registration
About
Conference
Expo
![Page 116: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/116.jpg)
Registration
About
Conference
Expo
![Page 117: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/117.jpg)
Framing tables
![Page 118: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/118.jpg)
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
![Page 119: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/119.jpg)
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
![Page 120: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/120.jpg)
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
![Page 121: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/121.jpg)
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.
![Page 122: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/122.jpg)
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
![Page 123: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/123.jpg)
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
![Page 124: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/124.jpg)
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
![Page 125: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/125.jpg)
Barry Island 0533 0600 0600
Rhoose 0540 0610 0612
Llantwit Major 0550 0612 0622
Bridgend 0552 0620 0648
![Page 126: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/126.jpg)
1. StructureLanguage; Conceptual models; Content & Presentation.
2. ProcessGreybox wireframes; Typography earlier in the process.
3. Macro typographyThe big stuff. Composition & Grids.
4. Micro typographyThe little stuff. Typesetting.
![Page 127: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/127.jpg)
![Page 128: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/128.jpg)
‘...It is not surface, it is not the last thing that needs to be considered, it is the thing itself’
Stephen Fry
![Page 129: Better Typography](https://reader034.vdocuments.us/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/129.jpg)
Thank you
Slides and resources at : http://www.markboulton.co.uk/present/web2berlin/