Search

Interactive Branding Web Type Tips.Key

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    Interactive Branding Web Type Tips.Key - Presentation Transcript

    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

    + saracannonsaracannon, 2 months ago

    custom

    279 views, 0 favs, 0 embeds more stats

    What is the first thing someone does when they hear more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 279
      • 279 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 10
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved