A Few Web Typography Tips
Sara Cannon
sara@scoutbrand.com

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 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/

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;

http://andreagandino.com/

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

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
instead of
“ for an opening double quote
” for a closing double quote
(")

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 FLIR
http://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://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

thanks for coming

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