Interactive Branding Web Type Tips.Key

5,647 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,647
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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

    ×