ABOUT ME SARA CANNON Birmingham,
AL @saracannon slideshare.net/saracannon sara-cannon.com I love WordPress! WORDCAMP RENO Saturday, 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 RENO Saturday, 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 RENO 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 RENO Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB STYLING
CONDENSED FONTS: Fallback with Fallback Without Webfont Loader Normal Webfont Loaser WORDCAMP RENO Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB PLUGIN:
WP TYPOGRAPHY http://wordpress.org/extend/plugins/wp-typography/ WORDCAMP RENO Saturday, 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 RENO Saturday, 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 RENO Saturday, 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 RENO Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB SCRIPT:
FIT TEXT http:// ttextjs.com/ • Stretches headline to t container • Useful for uid/responsive layouts WORDCAMP RENO Saturday, 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 RENO Saturday, 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 RENO Saturday, 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 RENO Saturday, 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 RENO Saturday, 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 RENO Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB It’s
STILL Not Cool EVEN If You Think It Is IRONIC (Sorry Jorbin) WORDCAMP RENO Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB FOLLOW
THE TWEETS @JasonSantaMaria @fontsquirrel @veen @typekit @brucel @h_ @ilovetypography @clagnut @jessicahische @fchimero WORDCAMP RENO Saturday, June 4, 2011