web typography 2009
DESCRIPTION
Are you tired of using the same old fonts in your Web designs? The type you use can say as much to your audience as the actual words on the page, but until now, Web designers have had an extremely limited palette of fonts from which to choose—essentially, Arial (yawn), Times (yawn), and Georgia (yawwwwwn). Design is about overcoming the limitations of a medium, and Web design is no different. In this session, Jason will show you how to use fluid typography, browser-safe fonts, and type on images to create robust scalable designs to achieve great typography without resorting to typing in images or Adobe Flash. You’ll also learn how to use CSS to download any font you want to use in your Web designs, and to use downloadable fonts, despite the limitations of some browsers.TRANSCRIPT
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