Typography on the Web

TYPOGRAPHY ON THE WEB WORDCAMP RENO 2011 sara cannon / sara-cannon.com / follow @saracannonSaturday, June 4, 2011

ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com I love WordPress! WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB FONTS USED IN THIS PRESENTATION: Chaparral Pro by Adobe http://typekit.com/fonts/chaparral-pro LEAGUE GOTHIC by e League of Movable Type http://typekit.com/fonts/league-gothic WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Web Design is 95% Typography WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Helvetica Neue ArialSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB e Beautiful Web WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Liquor Store FF Meta SerifSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEME http://www. jaxvineyards.com FF Din FF TisaSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEME http://www.designmadeingermany.de/ FF DinSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB League Gothic Le Monde CourrierSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Craft your CSS WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEBSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB LINE-HEIGHT WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEMESaturday, June 4, 2011

TYPOGRAPHY ON THE WEB LINKS: BORER-BOTTOM OR COLOR WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEMESaturday, June 4, 2011

TYPOGRAPHY ON THE WEB LETTER-SPACING WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB FONT-STACK WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB OPTIMIZE LEGIBILITY WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Web-Fonts WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB I Want To GoSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Font-StacksSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB @font-face WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB @FONT-FACE WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Why shouldn’t I try to use my print fonts that I paid so much for? WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB FONT-HINTING FOR THE SCREEN WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Load Time WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Check your licensing WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Hand Code Font Face Kit Generator Typekit Or Other Paid Hosts Google Api WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB @FONT-FACE http://paulirish.com/2009/bulletproof-font-face- implementation-syntax/ WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB from: fontsquirrel.com WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Fontsquirrel.com @font-face Generator WOFF - e Emerging Standard Format. EOT (light) - Targets Internet Explorer. SVG - Targets Webkit Mobile Platforms (iPhone And IPad) WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB http://sprungmarker.de/wp-content/uploads/webfont-services/Saturday, June 4, 2011

TYPOGRAPHY ON THE WEB typekit.com WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Typekit Has 81 Participating Foundries WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Typekit Even Has Futura! WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Test and Tweak WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Check All Browsers Always. WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB TYPE CRUNCH!!!Saturday, June 4, 2011

TYPOGRAPHY ON THE WEB DISABLE TYPEKIT JUST FOR IE6 - load IE6 Fonts in Style Sheet within Conditional Comments in the Header WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB DISABLE FOR ALL OF WINDOWS: User Agent WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB JUST FIREFOX CSS Hack WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB FIREFOX ON ALL OF WINDOWS User Agent WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB FIREFOX ON WINDOWS XP User Agent + CSS Hack WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB COMBATING FOUT Flash Of Unstyled Text WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEME COMBATING FOUT blog.typekit.com/2010/05/19/typekit-and-google/ WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEME COMBATING FOUT code.google.com/apis/webfonts/ docs/webfont_loader.html WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEME Typekit Default Embed: Webfont Loader Embed: WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEME WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEME github.com/typekit/webfontloader WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY AND YOUR THEME WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Take it Even Further WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB STYLING CONDENSED FONTS: Fallback with Fallback Without Webfont Loader Normal Webfont Loaser WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB USE THOSE STYLE SHEETS! WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Even More Custom Type Implementation WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB CSS3 WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB TEXT-SHADOW WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB http://mothereﬃngtextshadow.com/Saturday, June 4, 2011

TYPOGRAPHY ON THE WEB ROTATE http://www.cssplayer.com/blog/date-display-technique- with-text-rotation/ WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB ROTATE WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB WordPress Plugins WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB PLUGIN: WP TYPOGRAPHY http://wordpress.org/extend/plugins/wp-typography/ WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB PLUGIN: DROP CAPS http://wordpress.org/extend/plugins/drop-caps/ • override their css with your own • works across browsers with not too much tweaking WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Neat Type Scripts WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB SCRIPT: LETTERING.JS http://letteringjs.com/ • Takes each letter in a headline and wraps it in a Span • Allows for individual letter manipulation • Not recommended for large chunks WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB SCRIPT: KERN.JS http://www.kernjs.com/ • Allows in-browser kerning of lettering • Generates code for kerned copy • Works with Lettering.js WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB SCRIPT: FIT TEXT http:// ttextjs.com/ • Stretches headline to t container • Useful for uid/responsive layouts WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Other Must Havesies WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB EXTENSION: WHATFONT http://chengyinliu.com/whatfont.html • Find out what fonts and their CSS others are using • Sharpen your ninja font-detection skillz! (yes that is a ninja skill) WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB EXTENSION: GOOGLE FONT PREVIEWER https://github.com/pamelafox/font-previewer- extension • Test run a font on your site without coding • using web-fonts only from Google’s web-font API WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB BOOKMARKLET: MIN http://min.artequalswork.com/ • Shows your site if it was just type • Gets rid of all images and leaves just the type layout • Analyze Typographic Hierarchy WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB e Future? WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB THE FUTURE? • Richard Ritter of Fontdeck.com @clanut •Open Type • Ligatures • Multiple Alphabet Sets • Multiple Numeric Sets • All through CSS Classes! WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB What Not To Do WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Style Your Website With Paparyus (Sorry Every Mediterranean Restaurant Website Ever) WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Use Non-Web-Licensed Fonts: Archer or GOTHAM (Sorry H&FJ Luvahz) WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Never EVER Use The Infamous Comic Sans (It doesn’t matter that you think it’s good for wire-framing) WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB It’s STILL Not Cool EVEN If You Think It Is IRONIC (Sorry Jorbin) WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB e Infamous Eye Bleed WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!!Saturday, June 4, 2011

TYPOGRAPHY ON THE WEB e Even More Infamous EYE BLEED WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!!Saturday, June 4, 2011

TYPOGRAPHY ON THE WEB What To Do WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Find An Appropriate Substitution For: GOTHAM By Using PROXIMA NOVA WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Check All Browsers Always. WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Create A Typographic Style Guide For Your eme WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB http://twentytendemo.wordpress.com/Saturday, June 4, 2011

TYPOGRAPHY ON THE WEB http://twentyelevendemo.wordpress.com/Saturday, June 4, 2011

TYPOGRAPHY ON THE WEB Follow e Industry WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB blog.typekit.comSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB ilovetypography.comSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB typographica.orgSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB webtypography.netSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Follow e Tweets WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB FOLLOW THE TWEETS @JasonSantaMaria @fontsquirrel @veen @typekit @brucel @h_ @ilovetypography @clagnut @jessicahische @fchimero WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Find Inspiration WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB siteinspire.netSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB typographyserved.comSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB ministryoftype.co.ukSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB dribbble.comSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB wordpress.org/showcaseSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Find Cool Fonts WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB P22 UNDERGROUND by: P22 http://typekit.com/fonts/p22-undergroundSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Adelle by: Type Together http://typekit.com/fonts/adelle-webSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB http://typekit.com/fonts/ﬀ-tisa-web-proSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB “life is short, art is long” Typography is Everything. WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB ank You! sara cannon / sara-cannon.com / follow @saracannonSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Type Foundries WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB H&FJ WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB ArcherSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB GOTHAMSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Veer WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Adobe WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB e League Of Moveable Type WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Open Source! O (open Font License) theleagueofmoveabletype.com/manifesto WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Exljbris WORDCAMP RENOSaturday, June 4, 2011

TYPOGRAPHY ON THE WEB Lost Type Pay What You Want by Riely Cran & Tyler Galpin WORDCAMP RENOSaturday, June 4, 2011

Typography on the Web

Sara Cannon

Typography on the Web