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

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

72. Layout
• Readability

73. Layout
• Readability
- The Measure: too wide = difficult to read
- 1-2 alphabets = optimal (52-78 characters)

74. Layout
• Readability
- The Measure: too wide = difficult to read
- 1-2 alphabets = optimal (52-78 characters)

75. Layout
• Readability
- The Measure: too wide = difficult to read
- 1-2 alphabets = optimal (52-78 characters)
V.S.

76. Layout
• Readability
- The Measure: too wide = difficult to read
- 1-2 alphabets = optimal (52-78 characters)
V.S.

77. CSS

78. CSS
• Think Vertical ... think SPACE

79. CSS
• Think Vertical ... think SPACE
- line-height for readability

80. CSS
• Think Vertical ... think SPACE
- line-height for readability
- space between headings

81. CSS
• Think Vertical ... think SPACE
- line-height for readability
- space between headings
- space between paragraphs

82. 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;
}

83. 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;
}

84. more CSS
• keep in mind right and left
margins to let things breathe.

85. more CSS
• keep in mind right and left
margins to let things breathe.
• indent secondary paragraphs if
you like that sort of look

86. 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;
}

87. 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;
}

88. 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;
}

89. more CSS
• UTF-8 Encoding for:

90. more CSS
• UTF-8 Encoding for:
-hyphens

91. more CSS
• UTF-8 Encoding for:
-hyphens
-dashes

92. more CSS
• UTF-8 Encoding for:
-hyphens
-dashes
-special spacing

93. more CSS
• UTF-8 Encoding for:
-hyphens
-dashes
-special spacing
• Curly Quotes!

94. 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

95. 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
(")

96. Headlines: Cufon vs sIFR vs FLIR

97. Cufon vs sIFR vs FLIR
• good article: http://thinkclay.com/technology/cufon-sifr-flir

98. Cufon vs sIFR vs FLIR
• good article: http://thinkclay.com/technology/cufon-sifr-flir
• Cufon: javascript font rendering

99. Cufon vs sIFR vs FLIR
• good article: http://thinkclay.com/technology/cufon-sifr-flir
• Cufon: javascript font rendering
• sIFR (scalable inman flash replacement)

100. 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)

101. Cufon
• Pro:

102. Cufon
• Pro:
- fast load times

103. Cufon
• Pro:
- fast load times
• Con:

104. Cufon
• Pro:
- fast load times
• Con:
- not selectable

105. Cufon
• Pro:
- fast load times
• Con:
- not selectable
- can not apply a hover state to the text

106. Cufon
• Pro:
- fast load times
• Con:
- not selectable
- can not apply a hover state to the text
- copyright violations

107. sIFR

108. sIFR
• Pro:

109. sIFR
• Pro:
- use any font

110. sIFR
• Pro:
- use any font
- does not violate font copyright

111. sIFR
• Pro:
- use any font
- does not violate font copyright
- Better for SEO/Disability than Images

112. sIFR
• Pro:
- use any font
- does not violate font copyright
- Better for SEO/Disability than Images
• Con:

113. sIFR
• Pro:
- use any font
- does not violate font copyright
- Better for SEO/Disability than Images
• Con:
- not as fast with loading

114. 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

115. 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

116. 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!

117. FLIR
• Pro:

118. FLIR
• Pro:
- Does not violate EULA or copyrights, since font is
rendered as an image

119. FLIR
• Pro:
- Does not violate EULA or copyrights, since font is
rendered as an image
- printable

120. FLIR
• Pro:
- Does not violate EULA or copyrights, since font is
rendered as an image
- printable
- can be read on mobile

121. FLIR
• Pro:
- Does not violate EULA or copyrights, since font is
rendered as an image
- printable
- can be read on mobile
• Con:

122. FLIR
• Pro:
- Does not violate EULA or copyrights, since font is
rendered as an image
- printable
- can be read on mobile
• Con:
- not selectable

123. 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

124. 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

125. Style your Headlines!

126. Style your Headlines
• Consider sIFR (scalable inman flash replacement)

127. Style your Headlines
• Consider sIFR (scalable inman flash replacement)
• flash + javascript = real selectable type in a non-system font!

128. Style your Headlines
• Consider sIFR (scalable inman flash replacement)
• flash + javascript = real selectable type in a non-system font!
•
•

129. 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

130. http://www.smileycat.com/miaow/archives/typography-for-headlines-2.php

133. more resources

134. 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

135. thanks for coming

136. sara cannon
sara@scoutbranding.com
“life is short, art is long”
TYPE is EVERYTHING