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
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
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
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/
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;
}
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
(")
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!
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
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