Web Typography Tips

4,119 views

Published on

a few web type tips I shared at barcampbham.

Published in: Design, Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
4,119
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
58
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

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

×