Download to read offline
![[pic of 1920s car here]](https://image.slidesharecdn.com/davinkluttz-classyclownyorcrude-120313060458-phpapp02/85/Content-Management-Web-Analytics-Theatre-Davin-kluttz-classy-clowny-or-crude-22-320.jpg)
![[pic of 1920s car here]](https://image.slidesharecdn.com/davinkluttz-classyclownyorcrude-120313060458-phpapp02/85/Content-Management-Web-Analytics-Theatre-Davin-kluttz-classy-clowny-or-crude-23-320.jpg)
Uploaded byTFM&A
Content Management & Web Analytics Theatre; Davin kluttz classy clowny or crude
This document discusses branding and typography on the web. It begins with an introduction to the speaker and an overview of the agenda. It then discusses how typography serves branding. It provides examples of poor typography choices and how they can undermine a brand. The document outlines how web fonts have expanded typography options beyond the basic fonts previously available on the web. It discusses challenges and benefits of using web fonts, as well as how to properly integrate them either through self-hosting or a web font service. Lastly, it provides tips on how to use web fonts in a classy rather than clowny or crude manner and lists additional resources.
More Related Content
Similar to Content Management & Web Analytics Theatre; Davin kluttz classy clowny or crude
Content Management & Web Analytics Theatre; Davin kluttz classy clowny or crude
- 1. Classy, Clowny or Crude? Branding & the New Web Typography Davin Kluttz Product Line Manager Extensis, a Celartem company
- 2. 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)
- 3.
- 4. Agenda: • Branding& Typography • About Web Fonts • Classy • Clowny • Crude
- 5.
- 6. What’s in aBrand? • Carefully crafted • Consistent across media • Typography is a critical part
- 7. Typography Serves Branding
- 8. What if? • Typographyfailure can be comical • Comic Sans Project – http://comicsansproject.tumblr.com/
- 18. But those arelogos…
- 19.
- 20. From the dawnof the internet, web design was shackled to a few common fonts:
- 21. Comic Sans Impact Arial Black Arial / Helvetica Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia
- 22. [pic of 1920scar here]
- 23. [pic of 1920scar here]
- 24. New World Order:real fonts • Replace various hacks & stopgaps • From web server • Download to viewer’s browser • Regular font files (+ wrapper)
- 25. 3 benefits of“real” Web Fonts • Creative choice • Branding consistency • Not images • Standards / Not hacks
- 26. How Web Fontsare 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 {
- 27. Challenges of usingWeb Fonts • Most licenses don’t include web • Many delivery formats required – (SVG) – TTF – OTF – EOT – WOFF-TTF – WOFF-OTF
- 28. Two ways tointegrate Web Fonts • Self-hosting • Web font service
- 29. 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
- 30. Benefits of webfont services • Easiest way to use web fonts • Keeps it legal • Handles browser font requirements • Fonts served by cloud-based service • Easier integration
- 31. Dangers of WebFonts • More options ≠ always better • Legal usage (e.g. Santorum)
- 32. Using Web Fonts
- 33. using web fonts: Classy
- 34. using web fonts: Clowny
- 35. using web fonts: Crude
- 36. How Do IStay Classy? • Learn best practices – Resources page for web typography best practices (webinar recordings, links)
- 37. How Do IStay Classy? • Experiment/test – FontFuse – FontDropper – Web Font Plug-in
- 38.
- 39.
Editor's Notes
- #4 We do that using web fonts.So what exactly are web fonts? Web fonts reside on your web server and are downloaded to your readers machines when they view your pages.They are fairly easy to integrate into your site using a standard, easy @font-face CSS call.
- #6 Bring up WebINKLogin to demo@extensis.comShow Type DrawersWalk through Type Drawer Tabs – Fonts / Domains / SettingsEnsure that City of Type is a valid domainBack on Fonts Tab – show how to get CSS codeOpen City of Type siteOpen City of Type admin pageCopy CSS code from WebINK and paste into City of Type site Reload City of Type site and show how font has changed
- #7 First, what’s in a brand?A brand is a carefully crafted image that needs to be consistent across media. Wherever text is present, typography is a critical part of that image.
- #8 In fact, you could say that ALL typeface selection and even general typography should serve branding.
- #9 When brand image fails to match the type, the difference can be comical. This web site, The Comic Sans Project, remade a bunch of corporate logos using Comic Sans.(Whip through these next slides quickly and just point to which work and which don’t. We go from the ones that work, to mixed sets, to abject failures. Text below is a summary.)A few of them work, when Comic Sans is consistent with the existing brand image. Levi’s, MTV, Coke and Pepsi, for instance. Many of them fail horribly, such as HP, AC/DC and FedEx, because Comic Sans stands in contradiction to the brand image. It doesn’t have the heavy metal strength that AC/DC or Caterpillar need, the serious office atmosphere that IBM and FedEx require, or the elegance needed for Chanel, or the clean futurism demanded by NASA or Star Wars.
- #19 Sure, those are logos. Headlines and body text aren’t quite as obvious, but they too can be either consistent with a brand image or contradict it. This has long been accepted wisdom in print, but it is only now becoming fully understood for the web….
- #20 So let’s talk about web fonts and how web font selection has changed over the years.
- #21 For years, web design wasshackled by requiring the use of a few default fonts that could be guaranteed to exist on all users machines.
- #22 Everyone had to use the same few boring old fonts that every other web site used.
- #23 It was the infancy of Web typography, a lot like the early days of the automobile. As Henry Ford said, customers could get their Ford Model T in any color they wanted—as long as it was black.
- #24 But now, real web fonts allow us to leave Times, Helvetica, Arial and Comic Sans where they belong — in the internet Dark Ages!
- #25 So what exactly are “real” web fonts? Web fonts reside on your web server and are downloaded to your readers machines when they view your pages.They are easy to integrate into a web site using a standard, easy @font-face CSS call.
- #26 Choice: Creativity because you can choose from thousands of fonts instead of a dozenBranding consistency with other media. Finally you can present the same typographic image on the web as in print.Not being images: easy to change, SEO, scalable without going jaggy/fuzzy, performance advantages over graphicsStandards: reliably works across platforms and browsers. Contrast sIFR, which being Flash-based doesn’t work on iPad and iPhone.The way that web sites were designed in the past, most web pages were designed to use a set of default fonts that you could guarantee were are available on the site reader’s machine. If you wanted to use more creative typography on a site, you needed to render the text in an image or use JavaScript or other hacks. With recent developments in web browsers, namely the @font-face CSS call, you can now use creative real fonts to render your page. So why should you use web fonts? Beyond the obvious creative element, when you update a site, it’s often important to be able quickly update your site using the same text. If you’ve rendered your text in an image, you would need to re-render all of your text using Photoshop, which is not practical. Using other methods like JavaScript, sIFR, Cufon, etc are intermediate solutions and hacks that don’t give you the a same power of a real font.Having the ability to maintain brand consistency with all of your other materials is critical. Why should the web site be the only outbound communication that doesn’t project the same visual style as the rest of the organization’s materials?And of course, then there’s the all important Search Engine Optimization. This means that when the search engine bots from Google, Yahoo, Bing and so forth crawl your page, they will rank actual text in real fonts higher than anything that’s rendered using an alternate method. If your text is trapped in an image, it’s very likely that your text won’t even be captured at all.
- #27 You might want to delete or skip this slide if it seems to techno-geeky for the audience. Indeed, you could also trim the next several slides on web fonts and move straight into typography classy/clowny/crude.
- #28 There are a couple of complications around web fonts you ought to be aware of.Few if any of the desktop fonts you have on your computer were licensed to you on terms that include web usage rights. To get such rights you generally need to pay extra.Another complication is that if you want to cover all browsers in general use today, there are a bunch of formats in which fonts need to be delivered. It’s all coalescing around WOFF as a universal format, but until older and non-conformant browser versions are extinct, other formats still need to be served up.
- #30 You can host your own fonts, which has pluses and minuses.On the pro side is control, and avoiding outside dependencies. On the con side, you have to deal with licensing issues for each and every font, it’s not like you can just convert your desktop fonts to web fonts and not worry about it. You also have to deal with all the browser issues. New browser versions frequently break existing web font implementations, as we’ve seen at WebINK many times in recent years.
- #32 More options doesn’t necessarily mean better results. For example, just because you have 4000 fonts doesn’t mean you should use them all on one site. Luckily, we don’t see too much of that with “real” web fonts, yet. As they become more widely used that will be more of an issue, no doubt.The other problem is staying legal with one’s usage. This is a matter of making sure that your license allows you to use the font on the web. There are several ways of getting a proper license for this, including working with a web font service like ours, that takes care of it for you. If you don’t, well, people may notice. http://blog.extensis.com/font-compliance/rick-santorums-website-using-pirated-font-leads-to-2-million-lawsuit.php
- #33 So, now that you know how web fonts work and where they come from, let’s move on to talking about how you can use them effectively… or not.
- #34 So let’s look at some web sites and their choice of fonts, and see how they do well or poorly.(This is where you flip to your web browser. Suggest staging all the required sites in order, so you don’t need a live web connection. You may want to shorten the list. The first set are all really nice, the second set specifically use WebINK.)http://trentwalton.com/This shows how much you can do with just one typeface, in this case FontFont’s FF Meta Serif by Erik Spiekermann and friends. Only the pullquotes are in another typeface, Abroise from PorchezTypofonderie. A fine example of Franco-German cooperation.http://www.nicolapotts.com/Museo and Museo Serif, both by Jos Buivenga of exljbris, complement each other perfectly. The use of very light weights makes it feel especially airy and classy in what might otherwise feel like a jumbled layout.http://thebeautyshoppe.org/Another light weight type choice, this time Open Sans by Steve Matteson. Although generally very nice, it is looking a bit too light and fading out in the 16 px body text on the Mac, but it holds up better in a Windows browser. A good example of why one needs to test on multiple platforms, but still a nice piece of work.http://captaindash.com/#Juxtaposition of a script face with the sans serif Gotham (by Hoefler & Frere-Jones) creates a strong and flavorful pairing. Body text on interior pages is a little small, but generous line spacing keeps it from seeming too cramped.http://lawineagency.com/This site is a bit over the top, but in an on-purpose way. They use a mix of live fonts and images to achieve their overall retro look.http://www.webvanta.com/WebVanta is a web hosting and development company. They use our WebINK web font service to deliver their brand typeface, Josh Darden’s Omnes, for headings and titles on their web site. By using Omnes in a lighter weight than usual they emphasize elegance and high-tech. Traditional web-safe fonts offer nothing equivalent. (due to not having “light” weights available)http://www.lexisnexis.com/en-us/home.pageIt seems like Omnes is mega-popular right now. Here’s another company, LexisNexis, the database content providers, using it for navigation menus and headings.http://www.forumone.com/Forum One uses Alternate Gothic No. 1 for headings to create a bold, crisp look. Again, there’s nothing similar among traditional web-safe fonts, because they don’t include any condensed typefaces other than Impact, which would be too bold here.http://www.infocus.com/InFocus uses Parisine, from PorchezTypofonderie, throughout almost all text, from body to headings. It’s warm, clean, legible, and just subtly unique.
- #35 Now a big step down from classy is clowny. Here are folks who have used web fonts and typography very poorly. Some are big, most are small.http://georgerrmartin.com/George R.R. Martin is the best-selling novelist of “A Game of Thrones” and its sequels. His site has had over 35 million visitors, and HBO is making an ongoing series from his novels, so you’d think he could afford a real web designer. But no, so we get text in Times in 15, 16 and 18 px, often bolded for no reason, and then elements randomly in Palatino (point at “GRRM,” way too close to Times for comfort). Ugh.http://www.realbusiness.com/This massively Flash-based site from Xerox has some other issues, but just one huge problem. The top navigation is simply too freakin’ light and illegible with its gradient light gray on a white background. It’s so bad that they have to duplicate it in a pop-over window when you first arrive.http://www.richardsbrothersseafoods.com.au/It’s not just the random mix of Arial and Helvetica (though that is bad enough). It’s not just the poor design. It’s that entire chunks of body text are frickin’ images! What looks like a clickable link in several spots turns out to be part of a non-clickable image. Including the rotating “email” graphic and the email address above it. WTF?
- #36 Pastclowny we get crude. These over the top web sites just fail spectacularly. Usually they have a lot more wrong with them than just fonts and typography.http://www.amazingthings.org/Wow, Georgia, Arial, Trebuchet, and more text colors than you can shake a stick at! Mega-fail! But for all that, at least they use color consistently through the site. One might legitimately wonder why each item on the calendar needs six different colors of text, however.http://www.lowpriceskates.com/I think it speaks for itself. http://www.blackhillsyouthfootball.com/This one too. Extra awful in Chrome. Despite the jumbloe of type colors and sizes, they do at least use Arial fairly consistently throughout, except for a little Comic Sans at top left.http://www.sosbeevfbi.com/Wow. How many different colors can you use on body text? You’d think it would be hard to go wrong sticking with web-safe fonts, but they mix Arial and Verdana at a range of similar-yet-different sizes (10, 11, 14, 15 16, 18, 20…). http://www.historianofthefuture.com/Hey, there are only two colors for the text, cyan and yellow. Of course, we can’t figure out which role each color is being used for, or what
- #38 Do a very quick demo of each tool. At least hit the page (and switch to Photoshop) and do the 30-second version of what each one does.
- #39 Say some polite ending words, move on to
- #40 Here are several places to go for more information. The last link, our WebINK “type resources” page, has lots of info on web typography and using web fonts.