web typography tips
DESCRIPTION
a few web type tips I shared at barcampbham.TRANSCRIPT
A Few Web Typography Tips
Sara [email protected]
Lets discuss.....
• Strategy
• Fonts / Font Stacks
• Layout
• CSS
• sIFR
“good typography improves user experience”
Strategy
Strategy
• User Experience
• Fast Load Time
• SEO
• Keeping in the Brand!
Font-stacks
Fonts / Font Stacks
• System Limitations
• Develop good font stacksfont-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/
Font Stack Examples
• font-family:baskerville,’palatino linotype’,'times new roman’,serif;
• font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
#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; }
http://andreagandino.com/
font stack
Layout
Layout
• Think about...- what you like to read- what websites do you enjoy the look of
• Readability!
• Branding!
Lets Look at Some Sites
Layout
• Readability- The Measure: too wide = difficult to read- 1-2 alphabets = optimal (52-78 characters)
V.S.
CSS
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; }
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; }
more CSS
• UTF-8 Encoding for:-hyphens-dashes-special spacing
• Curly Quotes!
‘ for a opening single quote
’ for a closing single quote
“ for an opening double quote
” for a closing double quote (")
instead of
Headlines
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 FLIRhttp://thinkclay.com/technology/cufon-sifr-flir
http://www.smileycat.com/miaow/archives/typography-for-headlines-2.php
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!
more resources
More Resources
• http://www.webtypography.net/
• http://www.alistapart.com
• http://ilovetypography.com/
• http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/
• http://www.mikeindustries.com/blog/sifr/
• http://jquery.thewikies.com/sifr/
<< lists websites and their font stacks!
<< sIFR
<< sIFR w/jquery
• http://wordpress.org/extend/plugins/wp-sifr/
^^ Wordpress sIFR Plug-in
thanks for coming
sara [email protected]
“life is short, art is long”TYPE is EVERYTHING