Classy, Clowny or Crude? Brand and the New Web Typography
32
Classy, Clowny or Crude? Brand & the New Web Typography Davin Kluttz Sr. Product Manager, Extensis
-
Upload
extensis -
Category
Technology
-
view
2.732 -
download
1
description
Did you know that your site’s typography says as much about your brand as all of the other graphic elements on your site? Website design is both an art and a technical skill, and every element down to the typeface communicates volumes about your brand. Through the combination of graphics and text, your brand can be presented elegantly, or make you look like a complete fool. Do you know what your site’s typography is communicating? Don't get caught with your virtual pants down by using a font that isn’t right for your brand. This session will help you understand how web typography affects your website, and how you can select and implement web typography that is just right for the job. 5 Questions that the session will answer1. How does a website’s typography affect its brand perception?2. How can common web typography mistakes be easily identified?3. How can fonts be chosen to best fit a brand?4. Where can web fonts be easily located? 5. What are the technical hurdles that are solved by using web fonts?The target audience is intermediate web designers who want to include or improve their use of web fonts in their designs.
Transcript of Classy, Clowny or Crude? Brand and the New Web Typography
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.
