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;
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
(")
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
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!