Web Typography 2009
-
Upload
jason-cranfordteague -
Category
Design
-
view
152 -
download
24
description
Transcript of Web Typography 2009
W e b Ty p o g r a p h y Beyond A r i a l and T imes and Georg ia
{ Many Types, Many Faces}
Jason Cranford TeagueBright Eye Media
@jasonspeaking
Voices That Matter | 29 April 2009San Francisco, California
“Type Design is an act of plagiarism in itself—you basically recreate the flesh of the same skeleton.”
Alejandro Lo Celso Saraviapampatype.com
Verdana
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
+9 FontsWindows XP
Franklin Gothic MediumLucid Console Lucida Sans Unicode Marlett Microsoft Sans SerifPalatino Linotype Symbol Tahoma Wingdings
+30 FontsMac OS X
American TypewriterApple ChanceryApple SymbolsBaskervilleBig CaslonBrush ScriptChalkboardCharcoal CYCochinCooperCopperplate
Courier Didot FuturaGenevaGill SansHelveticaHelvetica NeueHerculanumHoefler TextLucida GrandeMarker Felt
Monaco OptimaPapyrusTahomaTaipeiTimesZapf DingbatsZapfino
+13 FontsApple iLife
Academy EngravedBank GothicBlairMDITC TTBodoni SvtyTwo ITC TTBradley Hand ITC TTCrackedHandwriting – Dakota
PalatinoPortagoSanta FeSavoyeSnell RoundhandStone Sans
Web Safe Fonts List
www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/
font-family: Diavlo;src: url(’Diavlo_BOOK_II_37.otf’);}
@font-face {
Name you give it.
Path to font file.
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
Download Fonts
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
Web Safe Fonts
Download Fonts
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
Web Safe Fonts Core Web Fonts
Download Fonts
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
Web Safe Fonts Generic Font-familiesCore Web Fonts
Download Fonts
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
Web TypographyLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web TypographyLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web TypographyLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, helvetica, arial, sans-serif; }
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
Web Typography
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, helvetica, arial, sans-serif; }
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
Web Typography
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, helvetica, arial, sans-serif; }
Lorem ipsum dolor sit amet, consectetuer ad i p i s c i ng e l i t . Nunc s ed l i g u l a . Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
Web Typography
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web TypographyLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, helvetica, arial, sans-serif; }
If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups.
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups.
Download Fonts
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups.
Web Safe Fonts
Download Fonts
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups.
Web Safe Fonts Core Web Fonts
Download Fonts
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
If you download a font or use a Web Safe Font, always include a Core Web Font and generic font-family as back-ups.
Web Safe Fonts Generic Font-familiesCore Web Fonts
Download Fonts
h1 { font-family : diavlo, georgia, times, “times new roman”, serif; }
p { font-family : corbel, verdana, arial, helvetica, sans-serif; }
For body copy select fonts with bold, italic, and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer ad ip isc ing e l i t . Nunc sed l igu la . Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
Arial
For body copy select fonts with bold, italic, and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer ad ip isc ing e l i t . Nunc sed l igu la . Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
Arial
Lorem ipsum dolor sit amet, consectetuer ad ip isc ing e l i t . Nunc sed l igu la . Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
For body copy select fonts with bold, italic, and bold/italic versions.
Microsoft Sans Serif
Test the different fonts in different combinations.
Web TypographyLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
Test the different fonts in different combinations.
Web TypographyLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sed ligula. Pellentesque non felis vel lorem tempor ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Aenean venenatis hendrerit tellus. Nunc posuere, nulla quis sollicitudin pretium, dui mi ultricies magna, id placerat lorem.
www.speaking-in-styles.com/web-typography
Questions
W e b Ty p o g r a p h y Beyond A r i a l and T imes and Georg ia
{ Many Types, Many Faces}
www.speaking-in-styles.com/web-typography
@jasonspeaking
www.brighteyemedia.com