• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Typography Tips
 

Web Typography Tips

on

  • 3,944 views

a few web type tips I shared at barcampbham.

a few web type tips I shared at barcampbham.

Statistics

Views

Total Views
3,944
Views on SlideShare
3,934
Embed Views
10

Actions

Likes
7
Downloads
55
Comments
1

3 Embeds 10

http://www.slideshare.net 6
http://www.linkedin.com 3
http://virtual.unach.edu.ec 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Typography Tips Web Typography Tips Presentation Transcript

    • 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, 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;
    • 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