Typography & the State of the Web Today

A look at web typography: where we came from; what we can do today; tips, tricks & best practices and more.

Transcript

1. Jeff Archibald // @paper_leaf // WordCamp Edmonton 2011
2. WHO IS THIS GUY? ‣ JEFF ARCHIBALD ‣ Web & Graphic Designer ‣ Paper Leaf Design ‣ paper-leaf.com ‣ Coffee, whiskey & beer appreciator ‣ Type nerd
3. WHY ARE WE HERE? 95% OF THE INFORMATION ON THE WEB IS WRITTEN LANGUAGE *Source: 2006 article on www.informationarchitects.jp
4. WHY ARE WE HERE? ‣ WEB TYPOGRAPHY ‣ Where we came from ‣ What we can do today ‣ @font-face, services, perfecting type, scripts ‣ Dos and Don’ts, Tips & Tricks ‣ Examples, Inspiration & Resources
5. THE END GOAL: ‣ YOU WILL LEAVE WITH ‣ An increased understanding of web typography ‣ At least a few tips & tricks to apply to your next design/build. ‣ A great topic for your next date
6. ‣ WHERE WE CAME FROM. Remember Geocities sites? Me too, unfortunately.
7. WHERE WE CAME FROM // TYPOGRAPHY & THE WEB ‣ THE PURPOSE OF TYPE IS TO COMMUNICATE. ‣ Communicate an actual message. ‣ Communicate that message with a specific emotion or feeling ‣ Type is also a design element, or fashion statement.
8. WHERE WE CAME FROM // TYPOGRAPHY & THE WEB ‣ BACK IN THA DAY ‣ We could only use the dreaded....
9. WHERE WE CAME FROM // TYPOGRAPHY & THE WEB ‣ SYSTEM FONTS (DUN DUN DUNNNNN)
10. WHERE WE CAME FROM // TYPOGRAPHY & THE WEB ‣ SYSTEM FONTS ‣ Tahoma ‣ Verdana ‣ Trebuchet MS ‣ Times New Roman ‣ Georgia ‣ Etc.
11. WHERE WE CAME FROM // TYPOGRAPHY & THE WEB ‣ FLASH REPLACEMENT ‣ cufon ‣ sIFR good support, consistent display difficult configuration, poor selection, text scaling
12. ‣ WHAT WE CAN DO TODAY. Our type options went from Vespa to Ferrari.
13. WHAT WE CAN DO TODAY // TYPOGRAPHY & THE WEB ‣ FONT SUBSTITUTION! ‣ hosted, licensed fonts that we call in our stylesheets ‣ @font-face CSS declaration ‣ font services like TypeKit, FontDeck, Google Fonts etc real fonts, web standards, great selection licensing, rendering issues, security
14. WHAT WE CAN DO TODAY // TYPOGRAPHY & THE WEB ‣ BROWSER SUPPORT FOR FONT SUBSTITUTION ‣ Firefox 3.5+ ‣ Safari 3.1+ ‣ Opera 10+ ‣ Chrome 4+ ‣ Internet Explorer.......... 4?!? Since 1997?!? ‣ using their proprietary EOT format, of course
15. WHAT WE CAN DO TODAY // TYPOGRAPHY & THE WEB
16. WHAT WE CAN DO TODAY // TYPOGRAPHY & THE WEB ‣ @font-face ‣ Host fonts on your server, call them in your CSS ‣ generate code at fontsquirrel.com or ‣ Google “bulletproof @font-face”
17. @font-face // TYPOGRAPHY & THE WEB ‣ FONT SQUIRREL ‣ All free fonts ‣ Good selection ‣ @font-face kit generator ‣ Just because it’s there, doesn’t mean you should use it.
18. @font-face // TYPOGRAPHY & THE WEB ‣ FONTSPRING ‣ Better selection ‣ Supplied code ‣ Not free, but licenses are very reasonable ‣ Print & web licenses
19. WHAT WE CAN DO TODAY // TYPOGRAPHY & THE WEB ‣ WEB FONT SERVICES
20. WHAT WE CAN DO TODAY // TYPOGRAPHY & THE WEB ‣ WEB FONT SERVICES ‣ They do the heavy lifting ‣ Reliable & functional ‣ Most are paid/freemium (save Google) ‣ You just choose your fonts & paste some code ‣ “Renting” a font vs. purchasing a font
21. WEB FONT SERVICES // TYPOGRAPHY & THE WEB ‣ GOOGLE WEB FONTS ‣ Easy to implement ‣ Supplied code ‣ Good selection of free fonts ‣ Reliable (it is Google, after all)
22. WEB FONT SERVICES // TYPOGRAPHY & THE WEB ‣ TYPEKIT (& SIMILAR) ‣ Easy to implement ‣ Supplied code ‣ The best selection of web fonts ‣ Reliable (Typekit now owned by Adobe) ‣ Cost is reasonable
23. WEB FONT SERVICES // TYPOGRAPHY & THE WEB ‣ FONTDECK
24. WEB FONT SERVICES // TYPOGRAPHY & THE WEB ‣ FONTS.COM WEB FONTS
25. WEB FONT SERVICES // TYPOGRAPHY & THE WEB ‣ FONTS LIVE
26. WEB FONT SERVICES // TYPOGRAPHY & THE WEB ‣ JUST ANOTHER FOUNDRY
27. ‣ PERFECTING YOUR WEB TYPE. I was going to say “purrfecting” and put in a cat photo
28. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB ‣ TOOLS DO NOT A CRAFTSMAN MAKE. ‣ Owning a camera doesn’t make you a photographer ‣ Web fonts won’t automagically make your designs beautiful... but you can, with their help. ‣ Basic typography, CSS tips, scripts & more.
29. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB ‣ BECOME A STUDENT OF TYPOGRAPHY ‣ Chicks/dudes dig it. ‣ Learn about concepts like rhythm, leading, kerning etc. ‣ If you comprehend principles, you can apply them ‣ read webtypography.net
30. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB ‣ USE FONTS AS THEY WERE INTENDED TO BE USED. ‣ That ^ is not a typeface suitable for body copy.
31. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB ‣ BASIC TIPS: USE THE FORCE CSS ‣ Pay attention to line-height. Try 150% for body ‣ Use the letter-spacing property responsibly This is bad. This is bad. This is good.
32. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB ‣ BASIC TIPS: USE THE FORCE CSS ‣ Establish a nice type hierarchy ‣ h1 = 32px; h2 = 24px; h3 = 18px etc ‣ use weights & spacing effectively
33. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB *screenshots from typekit.com/blog Strong fundamentals: kerning, leading, rhythm etc.
34. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB *screenshots from typekit.com/blog Applying logical grouping
35. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB *screenshots from typekit.com/blog Weight change for emphasis on important elements
36. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB *screenshots from typekit.com/blog Introducing type size hierarchy
37. PERFECTING YOUR WEB TYPE // TYPOGRAPHY & THE WEB *screenshots from typekit.com/blog Breaking the grid for visual interest
38. ‣ COOL TYP0GRAPHY TRICKS with CSS, Scripts & Other Web Tomfoolery
39. COOL TYPOGRAPHY TRICKS // TYPOGRAPHY & THE WEB ‣ CSS LIGATURES/PAIRS ‣ text-rendering:optimizeLegibility; ‣ improves handling of ligatures & pairs
40. COOL TYPOGRAPHY TRICKS // TYPOGRAPHY & THE WEB ‣ CSS DROP CAPS ‣ Automated drop-caps in WordPress Tutorial viewable at tinyurl.com/wp-dropcaps
41. COOL TYPOGRAPHY TRICKS // TYPOGRAPHY & THE WEB ‣ ENHANCE WITH CSS3 ‣ text-shadow: 0px 1px 1px #fff; x offset y offset blur color
42. COOL TYPOGRAPHY TRICKS // TYPOGRAPHY & THE WEB ‣ TEXT SHADOW: LETTERPRESS EFFECT
43. COOL TYPOGRAPHY TRICKS // TYPOGRAPHY & THE WEB ‣ ENHANCE WITH CSS3 ‣ Text transform property
44. COOL TYPOGRAPHY TRICKS // TYPOGRAPHY & THE WEB ‣ ENHANCE WITH SCRIPTS ‣ Lettering.js // letteringjs.com ‣ Down-to-the-letter control ‣ Kerning & editorial-style design
45. COOL TYPOGRAPHY TRICKS // TYPOGRAPHY & THE WEB ‣ ENHANCE WITH SCRIPTS ‣ FitText.js // fittextjs.com ‣ Scalable headlines that fit the parent element width ‣ For display only! Body text use = a punch
46. ‣ THINGS TO BE WARY OF Don’t be a type criminal or I will hurt you
47. THINGS TO BE WARY OF // TYPOGRAPHY & THE WEB ‣ ABUSING YOUR NEWFOUND POWER ‣ There are way more horrible fonts for you to use now ‣ text-shadow can be made to do terrible, awful things
48. THINGS TO BE WARY OF // TYPOGRAPHY & THE WEB ‣ ABUSING YOUR NEWFOUND POWER FUN! FUNNER! FUNNEST!
49. THINGS TO BE WARY OF // TYPOGRAPHY & THE WEB ‣ ABUSING YOUR NEWFOUND POWER ‣ respect the foundries ‣ use only web-licensed fonts ‣ so much choice; no reason to use unlicensed fonts ‣ soon all foundries will be on board with web fonts
50. THINGS TO BE WARY OF // TYPOGRAPHY & THE WEB ‣ BROWSER RENDERING ‣ Always test in all browsers ‣ Windows ClearType (XP) Rendering is jagged/thin ‣ Windows DirectWrite (Vista, 7) is slightly better ‣ Mac Quartz 2D looks great; does add weight
51. THINGS TO BE WARY OF // TYPOGRAPHY & THE WEB ‣ WINDOWS vs MAC
52. ‣ INSPIRATION & RESOURCES. There sure be some purty websites out thurr
53. INSPIRATION & RESOURCES // TYPOGRAPHY & THE WEB
54. INSPIRATION & RESOURCES // TYPOGRAPHY & THE WEB
55. INSPIRATION & RESOURCES // TYPOGRAPHY & THE WEB
56. INSPIRATION & RESOURCES // TYPOGRAPHY & THE WEB
57. INSPIRATION & RESOURCES // TYPOGRAPHY & THE WEB
58. INSPIRATION & RESOURCES // TYPOGRAPHY & THE WEB ‣ RESOURCES ‣ webtypography.net ‣ fontsquirrel.com ‣ fontspring.com ‣ google.com/webfonts ‣ typekit.com ‣ fontdeck.com
59. INSPIRATION & RESOURCES // TYPOGRAPHY & THE WEB ‣ RESOURCES ‣ letteringjs.com ‣ fittextjs.com ‣ wp-typography plugin ‣ browserlab.adobe.com ‣ Trump Gothic typeface family ‣ DejaWeb typeface family
60. ‣ THANKS. QUESTIONS? Preferably about typography & the web, but I’m easy. Jeff Archibald // @paper_leaf // WordCamp Edmonton 2011