Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Typography Tips

4,258 views

Published on

a few web type tips I shared at barcampbham.

Published in: Design, Technology

Web Typography Tips

  1. A Few Web Typography Tips Sara Cannon sara@scoutbrand.com
  2. Lets discuss..... • Strategy • Fonts / Font Stacks • Layout • CSS • sIFR “good typography improves user experience”
  3. Strategy
  4. Strategy • User Experience • Fast Load Time • SEO • Keeping in the Brand!
  5. Font-stacks
  6. Fonts / Font Stacks • System Limitations • Develop good font stacks font-family: Trebuchet, “Lucida Sans Unicode”, “Lucida Grande”, “Lucida Sans”, Arial, sans-serif - Ideal - Alternative / Fit - Common - Generic • throw in nicer common fonts that have similar looks (like Century Gothic) • further reading on font stacks: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
  7. Font Stack Examples • font-family:baskerville,’palatino linotype’,'times new roman’,serif; • font-family: Frutiger, quot;Frutiger Linotypequot;, Univers, Calibri, quot;Gill Sansquot;, quot;Gill Sans MTquot;, quot;Myriad Proquot;, Myriad, quot;DejaVu Sans Condensedquot;, quot;Liberation Sansquot;, quot;Nimbus Sans Lquot;, Tahoma, Geneva, quot;Helvetica Neuequot;, Helvetica, Arial, sans-serif;
  8. http://andreagandino.com/
  9. http://andreagandino.com/ font stack #navigation li a, .text h4, .content .text h3, .content h3 { font-family: “Adobe Caslon Pro”, Baskerville, Georgia, Palatino, “Times New Roman”, Times, serif; font-style: italic; } .entry .title, .content .title { font-family:Baskerville,Palatino,Georgia,”Times New Roman”,Times,sans-serif; }
  10. Layout
  11. Layout • Think about... - what you like to read - what websites do you enjoy the look of • Readability! • Branding!
  12. Lets Look at Some Sites
  13. Layout • Readability - The Measure: too wide = difficult to read - 1-2 alphabets = optimal (52-78 characters) V.S.
  14. CSS
  15. CSS • Think Vertical ... think SPACE - line-height for readability - space between headings - space between paragraphs • p{ font-size: 1em; margin-top: 1.5em; margin-bottom: 1.5em; line-height: 1.5em; }
  16. more CSS • keep in mind right and left margins to let things breathe. • indent secondary paragraphs if you like that sort of look p{ margin-bottom:0; } p+p{ text-indent:1em; margin-top:0; }
  17. more CSS • UTF-8 Encoding for: -hyphens -dashes -special spacing • Curly Quotes! ‘ for a opening single quote ’ for a closing single quote instead of “ for an opening double quote ” for a closing double quote (")
  18. Headlines
  19. Style your Headlines • Consider sIFR (scalable inman flash replacement) • flash + javascript = real selectable type in a non-system font! • • • read about sIFR vs Cufon vs FLIR http://thinkclay.com/technology/cufon-sifr-flir
  20. http://www.smileycat.com/miaow/archives/typography-for-headlines-2.php
  21. sIFR • Pro: - use any font - does not violate font copyright - Better for SEO/Disability than Images • Con: - not as fast with loading - does not print in font - mobile devises don’t render flash • BIG PRO: Wordpress Plug In!
  22. more resources
  23. More Resources • http://www.webtypography.net/ • http://wordpress.org/extend/ plugins/wp-sifr/ • http://www.alistapart.com ^^ Wordpress sIFR Plug-in • http://ilovetypography.com/ • http://www.inspirationbit.com/ << lists websites and their font stacks! striking-web-sites-with-font-stacks- that-inspire/ • http://www.mikeindustries.com/ << sIFR blog/sifr/ • http://jquery.thewikies.com/sifr/ << sIFR w/jquery
  24. thanks for coming
  25. sara cannon sara@scoutbranding.com “life is short, art is long” TYPE is EVERYTHING

×