Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interactive Branding Web Type Tips.Key

6,533 views

Published on

What is the first thing someone does when they hear about a company or organization? Go to their website! The internet is one of the first encounters someone might have with a company and their brand. Interactive branding can be a very important first impression.

Sara Cannon from Scout Branding Company will be speaking about the importance of brand consistency in a web presence. Points that will be touched on are:

* The importance of web typography for your brand
* Function/searchability vs. aesthetic
* CSS Web Typorgaphy Tips
* Cufon vs. sIFR vs. FLIR

Published in: Design, Business
  • Be the first to comment

Interactive Branding Web Type Tips.Key

  1. Interactive Branding and Typography Tips Sara Cannon Designer/Interactive at Scout Branding.
  2. Interactive Branding and Typography Tips Sara Cannon Designer/Interactive at Scout Branding. @saracannon sara@scoutbrand.com
  3. Overview..... • Brand Strategy “good typography improves user experience”
  4. Overview..... • Brand Strategy • Typography Strategy “good typography improves user experience”
  5. Overview..... • Brand Strategy • Typography Strategy • CSS: Fonts / Font Stacks, Layout, “good typography improves user experience”
  6. Overview..... • Brand Strategy • Typography Strategy • CSS: Fonts / Font Stacks, Layout, • Cufon vs sIFR vs FLIR “good typography improves user experience”
  7. Brand Strategy
  8. Brand Strategy
  9. Brand Strategy • Does this Brand exist offline or just online?
  10. Brand Strategy • Does this Brand exist offline or just online? • Online Establishment to further your brand
  11. Brand Strategy: Offline or Online?
  12. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person
  13. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Comanies
  14. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Comanies - Stores
  15. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Comanies - Stores - Locations
  16. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Comanies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based
  17. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Comanies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services
  18. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Comanies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services - events
  19. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Comanies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services - events - products
  20. Brand Strategy: Offline or Online? • Offline Brands: who you will meet in person - Comanies - Stores - Locations • Online Brands: Brands who’s presence is primarily web-based - internet services - events - products - blogs/individuals
  21. Brand Strategy: Online Brands
  22. Brand Strategy: Online Brands • MasdenCycles.com
  23. Brand Strategy: Online Brands • MasdenCycles.com • Mint.com
  24. Brand Strategy: Online Brands • MasdenCycles.com • Mint.com • Wordpress.org
  25. Brand Strategy: Online Brands
  26. Brand Strategy: Online Brands
  27. Brand Strategy: Online Brands
  28. Brand Strategy: Online Brands
  29. Brand Strategy: Online Brands
  30. Brand Strategy: Online Brands
  31. Brand Strategy: Offline Brands
  32. Brand Strategy: Offline Brands • Target.com
  33. Brand Strategy: Offline Brands • Target.com • PFChangs.com
  34. Brand Strategy: Offline Brands
  35. Brand Strategy: Offline Brands
  36. Brand Strategy: Offline Brands
  37. Brand Strategy: Online Establishment
  38. Brand Strategy: Online Establishment • Keep to the Brand Guidelines (if there are any)
  39. Brand Strategy: Online Establishment • Keep to the Brand Guidelines (if there are any) • Further Your Branding With:
  40. Brand Strategy: Online Establishment • Keep to the Brand Guidelines (if there are any) • Further Your Branding With: - your content
  41. Brand Strategy: Online Establishment • Keep to the Brand Guidelines (if there are any) • Further Your Branding With: - your content - social media
  42. Brand Strategy: Online Establishment • Keep to the Brand Guidelines (if there are any) • Further Your Branding With: - your content - social media - microsites
  43. CSS: Typography Strategy
  44. CSS: Typography Strategy • User Experience
  45. CSS: Typography Strategy • User Experience • Fast Load Time
  46. CSS: Typography Strategy • User Experience • Fast Load Time • SEO
  47. Font-stacks
  48. Fonts / Font Stacks
  49. Fonts / Font Stacks • System Limitations
  50. Fonts / Font Stacks • System Limitations • Develop good font stacks font-family: Trebuchet, “Lucida Sans Unicode”, “Lucida Grande”, “Lucida Sans”, Arial, sans-serif
  51. Fonts / Font Stacks • System Limitations • Develop good font stacks font-family: Trebuchet, “Lucida Sans Unicode”, “Lucida Grande”, “Lucida Sans”, Arial, sans-serif - Ideal
  52. 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
  53. 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
  54. 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
  55. 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)
  56. 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/
  57. Font Stack Examples
  58. Font Stack Examples • font-family:baskerville,’palatino linotype’,'times new roman’,serif;
  59. 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;
  60. 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;
  61. http://andreagandino.com/
  62. 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; }
  63. Layout
  64. Layout • Think about... - what you like to read - what websites do you enjoy the look of
  65. Layout • Think about... - what you like to read - what websites do you enjoy the look of • Readability!
  66. Layout • Think about... - what you like to read - what websites do you enjoy the look of • Readability! • Branding!
  67. Lets Look at Some Sites
  68. Layout • Readability
  69. Layout • Readability - The Measure: too wide = difficult to read - 1-2 alphabets = optimal (52-78 characters)
  70. Layout • Readability - The Measure: too wide = difficult to read - 1-2 alphabets = optimal (52-78 characters)
  71. Layout • Readability - The Measure: too wide = difficult to read - 1-2 alphabets = optimal (52-78 characters) V.S.
  72. Layout • Readability - The Measure: too wide = difficult to read - 1-2 alphabets = optimal (52-78 characters) V.S.
  73. CSS
  74. CSS • Think Vertical ... think SPACE
  75. CSS • Think Vertical ... think SPACE - line-height for readability
  76. CSS • Think Vertical ... think SPACE - line-height for readability - space between headings
  77. CSS • Think Vertical ... think SPACE - line-height for readability - space between headings - space between paragraphs
  78. 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; }
  79. 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; }
  80. more CSS • keep in mind right and left margins to let things breathe.
  81. more CSS • keep in mind right and left margins to let things breathe. • indent secondary paragraphs if you like that sort of look
  82. 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; }
  83. 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; }
  84. 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; }
  85. more CSS • UTF-8 Encoding for:
  86. more CSS • UTF-8 Encoding for: -hyphens
  87. more CSS • UTF-8 Encoding for: -hyphens -dashes
  88. more CSS • UTF-8 Encoding for: -hyphens -dashes -special spacing
  89. more CSS • UTF-8 Encoding for: -hyphens -dashes -special spacing • Curly Quotes!
  90. 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
  91. 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 (")
  92. Headlines: Cufon vs sIFR vs FLIR
  93. Cufon vs sIFR vs FLIR • good article: http://thinkclay.com/technology/cufon-sifr-flir
  94. Cufon vs sIFR vs FLIR • good article: http://thinkclay.com/technology/cufon-sifr-flir • Cufon: javascript font rendering
  95. Cufon vs sIFR vs FLIR • good article: http://thinkclay.com/technology/cufon-sifr-flir • Cufon: javascript font rendering • sIFR (scalable inman flash replacement)
  96. Cufon vs sIFR vs FLIR • good article: http://thinkclay.com/technology/cufon-sifr-flir • Cufon: javascript font rendering • sIFR (scalable inman flash replacement) • FLIR (facelift image replacement)
  97. Cufon • Pro:
  98. Cufon • Pro: - fast load times
  99. Cufon • Pro: - fast load times • Con:
  100. Cufon • Pro: - fast load times • Con: - not selectable
  101. Cufon • Pro: - fast load times • Con: - not selectable - can not apply a hover state to the text
  102. Cufon • Pro: - fast load times • Con: - not selectable - can not apply a hover state to the text - copyright violations
  103. sIFR
  104. sIFR • Pro:
  105. sIFR • Pro: - use any font
  106. sIFR • Pro: - use any font - does not violate font copyright
  107. sIFR • Pro: - use any font - does not violate font copyright - Better for SEO/Disability than Images
  108. sIFR • Pro: - use any font - does not violate font copyright - Better for SEO/Disability than Images • Con:
  109. sIFR • Pro: - use any font - does not violate font copyright - Better for SEO/Disability than Images • Con: - not as fast with loading
  110. 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
  111. 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
  112. 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!
  113. FLIR • Pro:
  114. FLIR • Pro: - Does not violate EULA or copyrights, since font is rendered as an image
  115. FLIR • Pro: - Does not violate EULA or copyrights, since font is rendered as an image - printable
  116. FLIR • Pro: - Does not violate EULA or copyrights, since font is rendered as an image - printable - can be read on mobile
  117. FLIR • Pro: - Does not violate EULA or copyrights, since font is rendered as an image - printable - can be read on mobile • Con:
  118. FLIR • Pro: - Does not violate EULA or copyrights, since font is rendered as an image - printable - can be read on mobile • Con: - not selectable
  119. FLIR • Pro: - Does not violate EULA or copyrights, since font is rendered as an image - printable - can be read on mobile • Con: - not selectable - can not apply a hover state to the text
  120. FLIR • Pro: - Does not violate EULA or copyrights, since font is rendered as an image - printable - can be read on mobile • Con: - not selectable - can not apply a hover state to the text - not as seo friendly
  121. Style your Headlines!
  122. Style your Headlines • Consider sIFR (scalable inman flash replacement)
  123. Style your Headlines • Consider sIFR (scalable inman flash replacement) • flash + javascript = real selectable type in a non-system font!
  124. Style your Headlines • Consider sIFR (scalable inman flash replacement) • flash + javascript = real selectable type in a non-system font! • •
  125. 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
  126. http://www.smileycat.com/miaow/archives/typography-for-headlines-2.php
  127. more resources
  128. More Resources • http://www.webtypography.net/ • http://wordpress.org/extend/ • http://www.alistapart.com plugins/wp-sifr/ ^^ 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
  129. thanks for coming
  130. sara cannon sara@scoutbranding.com “life is short, art is long” TYPE is EVERYTHING

×