Typography for the Web
Upcoming SlideShare
Loading in...5

Typography for the Web






Total Views
Views on SlideShare
Embed Views



1 Embed 220

http://uablogs.missouri.edu 220


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.

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

Typography for the Web Typography for the Web Presentation Transcript

  • Typography for the WebJosh Nichols @mrblank
  • Web design is95%typographyhttp://informationarchitects.net/blog/the-web-is-all-about-typography-period/
  • Rules
  • Thou shalt• Always use sans-serif text for body copy• Always use ems for sizing type• Always use black text on a white background• Always use web-safe colors• Always use web-safe fonts• Always make links blue and underlined• Never use italics
  • Nonsense
  • http://lostworldsfairs.com/eldorado/
  • http://jasonsantamaria.com/articles/chunky-in-fury
  • http://holidays.virb.com/
  • Beautiful type
  • http://trentwalton.com/2011/05/10/fit-to-scale/
  • http://trentwalton.com/examples/cowpoke/
  • http://lostworldsfairs.com/atlantis/
  • is possible
  • http://mattt.me/
  • http://lostworldsfairs.com/moon/
  • http://www.strangenative.com/foldup/
  • on the Web
  • http://www.castirondesign.com/
  • http://lefft.com/
  • http://stationstreetpgh.com/
  • Learn
  • http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/
  • http://www.peachpit.com/store/product.aspx?isbn=0201782634
  • http://webtypography.net/
  • Markup
  • " ≠“
  • -- ≠ –
  • TinyMCE http://www.tinymce.com/
  • SmartyPants »“ "»–-- http://daringfireball.net/projects/smartypants/
  • Widon’twidowThe lonely life of an unluckywidowwidon’tThe lonely life of anunlucky widow http://www.shauninman.com/archive/2006/08/22/widont_wordpress_plugin
  • Typogrifyhttp://code.google.com/p/typogrify/
  • WP Typography http://kingdesk.com/projects/wp-typography/
  • Style
  • The old way
  • Default system fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  • Font Stackbody { font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal; font-style: normal;} http://cssfontstack.com/
  • The new way
  • https://typekit.com/
  • http://www.webink.com/
  • http://www.fontsquirrel.com/
  • http://www.google.com/webfonts/
  • Hosted<script type="text/javascript" src="http://use.typekit.com/lbp4ytj.js"></script><script type="text/javascript"> try{Typekit.load();}catch(e){}</script>body { font-family: "proxima-nova", Arial, sans-serif; font-weight: 400; font-style: normal;}
  • Self-hostedLink to all the various font formats.@font-face { font-family: DejaVuSans; src: url(fonts/DejaVuSans-webfont.eot); src: url(fonts/DejaVuSans-webfont.eot?#iefix) format(embedded-opentype), url(fonts/DejaVuSans-webfont.woff) format(woff), url(fonts/DejaVuSans-webfont.ttf) format(truetype), url(fonts/DejaVuSans-webfont.svg#DejaVuSansBook) format(svg); font-weight: normal; font-style: normal;}
  • For weight & styles, FontSquirrel gets it wrong.Keep the font-family name the same and change thesrc, font-weight and font-style.@font-face { font-family: DejaVuSans; src: url(fonts/DejaVuSans-Bold-webfont.eot); src: url(fonts/DejaVuSans-Bold-webfont.eot?#iefix) format(embedded-opentype), url(fonts/DejaVuSans-Bold-webfont.woff) format(woff), url(fonts/DejaVuSans-Bold-webfont.ttf) format(truetype), url(fonts/DejaVuSans-Bold-webfont. svg#DejaVuSansBookBold) format(svg); font-weight: bold; font-style: normal;}
  • Build your stack.body { font-family: "DejaVuSans", Arial, sans-serif; font-weight: normal; font-style: normal;}
  • Scripts
  • http://812studio.com/initial-letter-a-jquery-plugin-for-making-drop-caps-and-more/
  • http://letteringjs.com/
  • http://fittextjs.com/
  • Tips
  • Choose wisely• Only embed the fonts you need.• Watch for weight & style versions. Browsers will fake them poorly if missing.• Some fonts don’t have all glyphs needed.• Check font rendering on both Windows and Mac before designing. Not all look the same cross platform.• If using a wide or condensed font, make sure your fallback in the stack won’t break your layout. http://modernizr.com/ can help fix that.
  • CSS• You can use measurements in px again!• Tell browsers to use kerning and ligatures: .foo { text-rendering: optimizelegibility; }• Font smoothing for reversed text in Webkit on the Mac: .foo { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }
  • Thanks!Josh Nichols @mrblank