Download - Just Your Type: Web Typography & You
About Me• Web Designer
• Type Geek
• Font Snob
We’ll Cover:• Web typography (past/present)
• Web fonts (what/how)
• Ways you can make it happen
Web TypographyA “new” way to use type on the web.
A Brief History of Type* *on the web
1996• Early web looked like sh*#
1996• Web pages would only display fonts
installed on a user’s computer
• “Core Fonts” introduced
2004• Not much changed :(
2007• CSS3 introduces @font-face
• Web fonts are born
• Huzzah!
2007
BUT, browser support is limited
2010
Browsers finally catch up. All of ‘em.
Web FontsAllow web designers to use fonts that are not installed on the viewer's computer.
Web Fonts
Source: http://www.webtype.com/blog/Webtype-serving-95-percent-of-all-desktop-browsers/
newyorker.com: NY Irvin, Times New Roman, Arial
@font-faceNot a Twitter account.
@font-face• Clean
• Doesn’t use Javascript, Flash, images, etc.
• Searchable, selectable
• Accessible
• Standards-compliant
• Fast & efficient
• Awesome
@font-faceNo longer just for web designers comfortable with changing code
@font-faceMany options for everyone.
@font-face Services• Typekit - http://typekit.com/
• Kernest - http://kernest.com/
• Webtype - http://webtype.com/
• FontShop - http://www.fontshop.com/fontlist/n/web_fontfonts/
• Fontdeck - http://fontdeck.com/
• Fontspring - http://www.fontspring.com/
• Typotheque - http://www.typotheque.com/webfonts
• MyFonts - http://new.myfonts.com/info/webfonts/
• Fonts.com Web Fonts - http://webfonts.fonts.com/
• Google Web Fonts - http://www.google.com/webfonts/
• Font Squirrel - http://www.fontsquirrel.com/
How it worksJust 2 Steps:1. <head> link
<link href="<link href="http://kernest.com/guffaw.css" media="screen" rel="stylesheet" type="text/css" />" media="screen" rel="stylesheet" type="text/css" />
2. CSS code
#content h1 {font-weight: normal; font-family: 'Arvo';text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
Results guffawmn.com: Arvo, Arvo Bold
With great power comes great responsibility
Choose your fonts wisely
• Mood is important
• Should be appropriate to purpose
• Avoid overused fonts
Less is more• Don’t use too many fonts
• Stick with 1 or 2
aworkinglibrary.com: Chaparral
Don’t forget the stacks
• Alternative fonts are a must
http://www.awayback.com/revised-font-stack/
www.abookapart.com: Lucida Grande, Trebuchet MS, Georgia
Test. Test. Test.• Display will vary by browser,
platform and device
Get Inspired• Pay attention to what
and how others are doing it
http://nicewebtype.com/fonts/bello-and-proxima-nova/
?s
Mykl Roventine designer of things myklroventine.com @myklroventine
Thankyou!
