Classy, Clowny or

Crude?Branding & the New Web

Typography

Davin KluttzProduct Line Manager

Extensis, a Celartem company

About Me

• 18+ years in design/advertising–Print, publishing, web and video–Digital media and technology

• Software solutions–Mission: Tame “digital chaos”– Individuals & workgroups–Preserving creativity (and

sanity)

About You?

Agenda:• Branding & Typography• About Web Fonts• Classy• Clowny• Crude

Branding & Typography

What’s in a Brand?

• Carefully crafted• Consistent across media• Typography is a critical

part

TypographyServes

Branding

What if?

• Typography failure can be comical

• Comic Sans Project–http://comicsansproject.tumblr.c

om/

But those are logos…

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]

[pic of 1920s car

here]

New World Order: real fonts

• Replace various hacks & stopgaps

• From web server• Download to viewer’s

browser• Regular font files (+

wrapper)

3 benefits of “real” Web Fonts

• Creative choice• Branding consistency• Not images• Standards / Not hacks

How Web Fonts are used

• @font-face CSS tag > font-family@font-face { font-family: MyCustomFont; src: url("http://fnt.webink.com/?drawer=FCDD59A0-EEB1-

47EF- A527-63FC9C275EEA&font=D1617946-FD8A-ABCE-E54E-048179EE95A8");

font-weight: normal; font-style: normal; font-variant:normal;}

• Called w/font-family in CSS/HTML.body {

font-family: MyCustomFont, Verdana, Arial, Helvetica, sans-serif;

}

Challenges of using Web Fonts

• Most licenses don’t include web• Many delivery formats required

– (SVG)– TTF– OTF– EOT– WOFF-TTF– WOFF-OTF

Two ways to integrate Web Fonts

• Self-hosting• Web font service

Self-hosting +/-

• Pros– No outside service dependencies– Complete control– Usually one-time licensing fees

• Cons– Licensing issues for self-conversion– Serving multiple formats to browsers– Keeping up with browser changes

Benefits of web font services

• Easiest way to use web fonts• Keeps it legal• Handles browser font

requirements• Fonts served by cloud-based

service• Easier integration

Dangers of Web Fonts

• More options ≠ always better

• Legal usage (e.g. Santorum)

Using Web Fonts

using web fonts: Classy

using web fonts:

Clowny

using web fonts: Crude

How Do I Stay Classy?

• Learn best practices–Resources page for web

typography best practices (webinar recordings, links)

How Do I Stay Classy?

• Experiment/test–FontFuse–FontDropper–Web Font Plug-in

Thank You

Resources:http://webink.com

http://blog.webink.comhttp://webink.com/type-

resources