a few web type tips I shared at barcampbham.

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

17. Layout
• Readability
- The Measure: too wide = difficult to read
- 1-2 alphabets = optimal (52-78 characters)
V.S.

18. CSS

19. 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;
}

20. 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;
}

21. 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
(")

22. Headlines

23. 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

24. http://www.smileycat.com/miaow/archives/typography-for-headlines-2.php

25. 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!

28. more resources

29. 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

30. thanks for coming

31. sara cannon
sara@scoutbranding.com
“life is short, art is long”
TYPE is EVERYTHING