Typography on the Web
Upcoming SlideShare
Loading in...5
×
 

Typography on the Web

on

  • 19,942 views

Implementation of Typography on the web, in WordPress, cool web fonts, and where things are going. - A Talk at WordCamp Reno June 4th, 2011.

Implementation of Typography on the web, in WordPress, cool web fonts, and where things are going. - A Talk at WordCamp Reno June 4th, 2011.

Statistics

Views

Total Views
19,942
Views on SlideShare
17,779
Embed Views
2,163

Actions

Likes
70
Downloads
540
Comments
7

40 Embeds 2,163

http://sara-cannon.com 1574
http://funthomas424242.wordpress.com 365
http://svx.twg.ca 36
http://paper.li 31
http://svx.dev 23
http://www.thegreyink.com 21
http://bartandlife.tumblr.com 13
url_unknown 11
http://www.linkedin.com 8
https://funthomas424242.wordpress.com 7
http://0.0.0.0:3000 5
http://campus.agrupaciomutua.es 5
http://pinterest.com 5
http://rareexportairsoft.blogspot.com 4
http://www.slideshare.net 4
http://posterous.webmove.org 4
http://cartel.blogbus.com 4
https://twitter.com 4
http://abjkk.posterous.com 4
http://wiki.freshconsulting.com 3
http://www.ssoe.com 3
http://twitter.com 3
http://safe.tumblr.com 2
http://theinkcompany.blogspot.com 2
http://a0.twimg.com 2
https://si0.twimg.com 2
http://www.twitqa.com 2
http://feeds.feedburner.com 2
http://192.168.178.22 2
http://www.actiweb.es 2
http://funthomas424242.wordpress.de 1
http://univirtual-ucc.org 1
http://tipodafonte.wordpress.com 1
http://edicolaeuropea.blogspot.com 1
http://blog.naver.com 1
http://webcache.googleusercontent.com 1
http://socialmarketeer.com 1
http://reairsoft.blogspot.com 1
http://www.perspagina.nl 1
http://usso.forumv.biz 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 7 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Typography on the Web Typography on the Web Presentation Transcript

  • 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 OPTIMIZE LEGIBILITY WORDCAMP RENOSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEB Web-Fonts WORDCAMP RENOSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, 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 WEBSaturday, 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 WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, 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 WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, 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://mothereffingtextshadow.com/Saturday, June 4, 2011
  • TYPOGRAPHY ON THE WEB http://mothereffingtextshadow.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 WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, 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 WEBSaturday, 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 WEBSaturday, 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 WEBSaturday, 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 WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, 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 WEBSaturday, 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 WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, 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/ff-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 WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEB ArcherSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEB GOTHAMSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEB Veer WORDCAMP RENOSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEB Adobe WORDCAMP RENOSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEB e League Of Moveable Type WORDCAMP RENOSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, 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 WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, 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 WEBSaturday, June 4, 2011
  • TYPOGRAPHY ON THE WEBSaturday, June 4, 2011