web typography tips

A Few Web Typography Tips

Sara Cannonsara@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 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;

http://andreagandino.com/

#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 cannonsara@scoutbranding.com

“life is short, art is long”TYPE is EVERYTHING