Download - Better Typography
![Page 1: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/1.jpg)
Better TypographyMark Boulton
![Page 2: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/2.jpg)
markboulton.co.ukmarkboultondesign.com
![Page 3: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/3.jpg)
![Page 5: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/5.jpg)
1. Structure2. Process3. Macro typography4. Micro typography
![Page 6: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/6.jpg)
Typography and Web 2.0
![Page 7: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/7.jpg)
seducedart & sex
fromantiquity
to now
![Page 8: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/8.jpg)
seducedart & sex
fromantiquity
to now
![Page 9: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/9.jpg)
![Page 10: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/10.jpg)
![Page 11: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/11.jpg)
![Page 12: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/12.jpg)
![Page 13: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/13.jpg)
![Page 14: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/14.jpg)
A world of Verdana and Arial
![Page 15: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/16.jpg)
typography1 the mechanical notation and arrangement of language.
![Page 17: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/17.jpg)
Typography is not...
![Page 18: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/18.jpg)
...deciding which is best, Verdana or Arial.
![Page 19: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/19.jpg)
...just a designers responsibility.
![Page 20: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/20.jpg)
S T R U C T U R E
![Page 21: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/22.jpg)
Information is language
![Page 23: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/23.jpg)
words → sentencessentences → paragraphsparagraphs → groupings
groupings → sectionssections → document
![Page 24: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/24.jpg)
Documents have a conceptual structure.
![Page 25: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/25.jpg)
Author’sConceptual
Structure
![Page 26: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/26.jpg)
Author’sConceptual
Structure
Reader’sConceptual
Structure
![Page 27: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/27.jpg)
Designer
Author’sConceptual
Structure
Reader’sConceptual
Structure
![Page 28: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/28.jpg)
Content & Presentation
![Page 29: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/29.jpg)
![Page 30: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/30.jpg)
![Page 31: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/31.jpg)
![Page 32: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/32.jpg)
![Page 33: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/33.jpg)
![Page 34: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/34.jpg)
Designer
Author’sConceptual
Structure
Reader’sConceptual
Structure
![Page 35: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/35.jpg)
Author’sConceptual
Structure
Reader’sConceptual
Structure
Designer
HTML
![Page 36: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/36.jpg)
P R O C E S S
![Page 37: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/37.jpg)
Elements of User ExperienceJesse James Garrett
![Page 38: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/39.jpg)
A linear process?
![Page 40: Better Typography](https://reader034.vdocuments.site/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.site/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.site/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.site/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.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/45.jpg)
Content & Presentation...again!
![Page 46: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/46.jpg)
Greybox wireframes
![Page 47: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/47.jpg)
![Page 48: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/49.jpg)
![Page 50: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/50.jpg)
![Page 51: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/51.jpg)
Jesse Bennett-Chamberlain: http://31three.com/
![Page 52: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/52.jpg)
Look at typographic design earlier in the process.
![Page 53: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/53.jpg)
![Page 54: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/54.jpg)
![Page 55: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/55.jpg)
![Page 56: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/56.jpg)
![Page 57: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/57.jpg)
![Page 58: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/58.jpg)
![Page 59: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/59.jpg)
![Page 60: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/60.jpg)
![Page 61: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/62.jpg)
The big stuff
![Page 63: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/63.jpg)
Creating spacial relationships
![Page 64: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/64.jpg)
Golden Section
![Page 65: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/65.jpg)
![Page 66: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/66.jpg)
![Page 67: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/67.jpg)
![Page 68: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/68.jpg)
![Page 69: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/69.jpg)
![Page 70: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/70.jpg)
a
b
![Page 71: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/71.jpg)
![Page 72: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/72.jpg)
a b
![Page 73: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/73.jpg)
a b
![Page 74: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/74.jpg)
a a a
![Page 75: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/75.jpg)
a a a
![Page 76: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/76.jpg)
a a a
![Page 77: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/77.jpg)
Grids
![Page 78: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/78.jpg)
A way of organising stuff
![Page 79: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/79.jpg)
Provide a visual language
![Page 80: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/80.jpg)
Answer layout questions
![Page 81: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/81.jpg)
![Page 82: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/82.jpg)
![Page 83: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/83.jpg)
![Page 84: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/84.jpg)
![Page 85: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/85.jpg)
![Page 86: Better Typography](https://reader034.vdocuments.site/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.site/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.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/89.jpg)
![Page 90: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/90.jpg)
![Page 91: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/91.jpg)
![Page 92: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/92.jpg)
![Page 93: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/94.jpg)
The little stuff
![Page 95: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/95.jpg)
Hyphens are not dashes
![Page 96: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/96.jpg)
Britain’s workers improve their lives - by doing nothing
![Page 97: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/97.jpg)
Britain’s workers improve their lives -- by doing nothing
![Page 98: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/98.jpg)
Britain’s workers improve their lives—by doing nothing
![Page 99: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/99.jpg)
Britain’s workers improve their lives – by doing nothing
![Page 100: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/101.jpg)
![Page 102: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/102.jpg)
![Page 103: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/103.jpg)
![Page 104: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/104.jpg)
Never negatively space lowercase
![Page 105: Better Typography](https://reader034.vdocuments.site/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.site/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.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/108.jpg)
![Page 109: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/110.jpg)
Framing navigation
![Page 111: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/111.jpg)
Registration
About
Conference
Expo
![Page 112: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/112.jpg)
Registration
About
Conference
Expo
![Page 113: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/113.jpg)
Registration
About
Conference
Expo
![Page 114: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/114.jpg)
Registration
About
Conference
Expo
![Page 115: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/115.jpg)
Registration
About
Conference
Expo
![Page 116: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/116.jpg)
Registration
About
Conference
Expo
![Page 117: Better Typography](https://reader034.vdocuments.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/117.jpg)
Framing tables
![Page 118: Better Typography](https://reader034.vdocuments.site/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.site/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.site/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.site/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.site/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.site/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.site/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.site/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.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/127.jpg)
![Page 128: Better Typography](https://reader034.vdocuments.site/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.site/reader034/viewer/2022051210/54c7b5384a795995658b4602/html5/thumbnails/129.jpg)
Thank you
Slides and resources at : http://www.markboulton.co.uk/present/web2berlin/