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
CSS Typography =
CSS Typography =
Limited Font Choices
limits
limits
design is about
limits
design is about
overcoming
“Type Design is an act of plagiarism in itself—you basically recreate the flesh of the same skeleton.”
Alejandro Lo Celso Saraviapampatype.com
What if everyone looked the same?
(and was ugly ta’ boot)
How many fonts are there?
How many fonts are there?
>100K Fonts
How many fonts are there on the Web?
How many fonts are there on the Web?
9 Fonts
ArialHelvetica
ArialHelveticaABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz0123456789
arial;font-family :
helvetica, arial, sans-serif;font-family :
TimesTimes New Roman
TimesTimes New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
font-family :
times, 'times new roman', serif;font-family :
Georgia
GeorgiaABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz0123456789
Verdana
Trebuchet MS
Verdana
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789
helvetica, arial, sans-serif;font-family :
verdana, helvetica, arial, sans-serif;font-family :
Courier New
Comic Sans MS
Impact
Core Web Fonts
Core Web Fonts
Core Web Fonts
9 Fonts
EULA
EULAEnd-User License Agreement
Installed Fonts
Windows XP
+9 FontsWindows XP
Franklin Gothic MediumLucid Console Lucida Sans Unicode Marlett Microsoft Sans SerifPalatino Linotype Symbol Tahoma Wingdings
Windows Vista
+7 FontsWindows Vista
CalibriCambriaCandaraConsolasConstantiaCorbelSegoe UI
Mac OS X
+30 FontsMac OS X
American TypewriterApple ChanceryApple SymbolsBaskervilleBig CaslonBrush ScriptChalkboardCharcoal CYCochinCooperCopperplate
Courier Didot FuturaGenevaGill SansHelveticaHelvetica NeueHerculanumHoefler TextLucida GrandeMarker Felt
Monaco OptimaPapyrusTahomaTaipeiTimesZapf DingbatsZapfino
Apple iLife
+13 FontsApple iLife
Academy EngravedBank GothicBlairMDITC TTBodoni SvtyTwo ITC TTBradley Hand ITC TTCrackedHandwriting – Dakota
PalatinoPortagoSanta FeSavoyeSnell RoundhandStone Sans
Microso Office 2007
+121 FontsMicroso Office 2007
Microso Office: Mac 2008
+72 FontsMicroso Office: Mac 2008
MS Office: Mac & Windows
62 Fonts
MS Office: Mac & Windows
Web Safe Fonts
Windows
148 Fonts
Windows
Mac
134 Fonts
Mac
Mac & Windows
73 Fonts
Mac & Windows
Web Safe Fonts List
www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/
verdana, arial, helvetica, sans-serif;font-family :
corbel, verdana, arial, helvetica, sans-serif;font-family :
Web Safe Fonts
~180 Fonts
Web Safe Fonts
Linked Webfonts
@font-face {...}
font-family: Diavlo;src: url(’Diavlo_BOOK_II_37.otf’);}
@font-face {
font-family: Diavlo;src: url(’Diavlo_BOOK_II_37.otf’);}
@font-face {
Name you give it.
font-family: Diavlo;src: url(’Diavlo_BOOK_II_37.otf’);}
@font-face {
Name you give it.
Path to font file.
georgia, times, “times new roman”, serif;font-family :
diavlo, georgia, times, “times new roman”, serif;font-family :
Font-family name you give it.
Download Fonts
Unlimited Fonts
Download Fonts
File Format
File Formats
True Type (.ttf)
File Formats
Open Type (.otf)
IP
IPIntellectual Property
EULA
EULAEnd-User License Agreement
File Formats
Embedded Open Type (.eot)
File Formats
.ttf & .otf
.ttf & .otf
v3.1
.ttf & .otf
Coming Soon
.ttf & .otf
.ttf & .otf
??????????
.ttf & .otf
So...
Web Safe Fonts
Generic Font-families
Core Web Fonts
Download Fonts
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; }
limits
design is about
overcoming
Fluid Typography
Choosing Your Fonts
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 headline copy use fonts with similar widths and kerning.
Web Typography
For headline copy use fonts with similar widths and kerning.
Web Typography
For body copy select fonts with bold, italic, and bold/italic versions.
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