Classy, Clowny or Crude? Brand and the New Web Typography
•Télécharger en tant que PPTX, PDF•
0 j'aime•1,769 vues
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 answer 1. 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.
Recommandé
Recommandé
Contenu connexe
Plus de Extensis
Plus de Extensis (20)
Dernier
Dernier (20)
Classy, Clowny or Crude? Brand and the New Web Typography
- 1. Classy, Clowny or Crude? Brand & the New Web Typography Davin Kluttz Sr. Product Manager, Extensis
- 2. About Me • 18+ years in design/advertising… – Print, publishing, web and video – Digital media and technology • Software solutions: – Font Management – Digital Asset Management (DAM)
- 3. Typography & Brand
- 4. 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
- 5. Typography Serves Branding
- 7. From the dawn of the internet, web design was shackled to a few common fonts:
- 8. Comic Sans Impact Arial Black Arial / Helvetica Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia
- 9. [pic of 1920s car here]
- 10. Forced to use graphics & hacks instead of live fonts, because the alternative was worse…
- 11. What if… Just one font. • Comic Sans Project – http://comicsansproject.tumblr.com/
- 19. [pic of 1920s car here]
- 20. 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)
- 21. Benefits of “real” Web Fonts 1. Creative Choice 2. Branding Consistency 3. Not Images – Dynamic – SEO-friendly! 4. Standard (not a hack) – Browser & Mobile friendly
- 22. 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)
- 23. Using Web Fonts
- 24. Classy
- 25. Clowny
- 26. Crude
- 27. Best Practices: Web Fonts • Good Design Principles – Traditional resources – Discover possibilities • Experiment: New Tools – FontFuse – FontDropper – Web Font Plug-in
- 28. Best Practices: Web Fonts • Individual Font Selection – Match the message – Legibility at desired size – Test: browsers, platforms, devices
- 29. Best Practices: Web Fonts • Font Combinations – Not too many families – Contrast styles, avoid similarity
- 30. 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)
- 31. Resources: http://webink.com/type- resources http://webink.com http://blog.webink.com
- 32. Thank You.
Notes de l'éditeur
- 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.
- In fact, you could say that ALL typeface selection and even general typography should serve branding.
- So let’s talk about howweb fonts interact with branding
- For years, web design was shackledby requiring the use of a few default fonts that could be guaranteed to exist on all users machines.
- Everyone had to use the same few boring old fonts that every other web site used.
- 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.
- 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.Some of them look okay (Levi’s), but having everything look the same is a problem. All web sites having the same typography is just a less obvious version of the same problem.
- That would suck badly, so of course Chanel actually uses graphics instead to get the desired effect. Of course, these don’t scale well, as seen on this screen grab of their web page when it was first zoomed in the browser.
- But now, real web fonts allow us to leave Comic Sans and static graphic images where they belong — in the internet Dark Ages!
- 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.
- 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.
- 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.
- 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?
- 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
- 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.
- 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.
- Say some polite ending words, move on to