Classy, Clowny or
Crude?Brand & the New Web
Typography
Davin KluttzSr. Product Manager, Extensis
About Me
• 18+ years in design/advertising…–Print, publishing, web and video–Digital media and technology
• Software solutions:–Font Management–Digital Asset Management
(DAM)
Typography& Brand
What’s in a Brand?
• Carefully crafted• Consistent across media• Typography is critical
–Visual identity, Emotion–Unifies the design (and
message)–Part of the image
TypographyServes
Branding
Branding &Web Fonts
From the dawn of the internet, web
design was shackled to a few common
fonts:
Comic Sans
Impact
Arial Black
Arial / Helvetica
Trebuchet
Verdana
Courier/Courier New
Times (New) Roman
Georgia
[pic of 1920s car
here]
Forced to use graphics & hacks
instead of live fonts, because the
alternative was worse…
What if… Just one font.
• Comic Sans Project–http://comicsansproject.tumblr.c
om/
[pic of 1920s car
here]
What’s a “Web Font”?
• Relatively recent• Downloaded when viewed
–From your web server, or–From a service (subscription)
• Browser-supported–Standard CSS (@font-face)
Benefits of “real” Web Fonts
1. Creative Choice2. Branding Consistency3. Not Images
– Dynamic– SEO-friendly!
4. Standard (not a hack)– Browser & Mobile friendly
Why Use a Service?
• Keeps it easy–Write once (no maintenance)–Various font formats–Ongoing browser & mobile
support
• Keeps it legal• Cloud-based (global, 24x7)
Using Web Fonts
Classy
Clowny
Crude
Best Practices: Web Fonts
• Good Design Principles–Traditional resources–Discover possibilities
• Experiment: New Tools–FontFuse–FontDropper–Web Font Plug-in
Best Practices: Web Fonts
• Individual Font Selection–Match the message–Legibility at desired size–Test: browsers, platforms,
devices
Best Practices: Web Fonts
• Font Combinations–Not too many families–Contrast styles, avoid similarity
Best Practices: Web Fonts
• Improve your web typesetting!–Bigger: Use 14-16 px for body–Contrast:
Foreground/background–Line Spacing: Add extra px–Never underline (except URLs)
Resources:http://webink.com/type-
resourceshttp://webink.com
http://blog.webink.com
Thank You.
