Web Typography

About a talk I gave to web developers about typography and web fonts.

Transcript

1. Web Typography Thursday, August 15, 13
2. “If much of the web is made up of text—and it is—web typography can be a very powerful tool indeed.” Jason Santa Maria Thursday, August 15, 13
3. Thursday, August 15, 13
4. Thursday, August 15, 13
5. “Fonts are being recognized as a web asset.” Tim Brown, Typekit Thursday, August 15, 13
6. “In short: Stop writing, “Thanks to web font services like Typekit, Fontdeck, Kernest…” The real thanks goes to designers who decide to use web fonts, people who open their minds to type as a valuable web asset, people who share what they learn, type foundries sweating the details, and the folks moving WOFF forward.” Tim Brown, Typekit Thursday, August 15, 13
7. with @font-face “With these, an indispensable piece of the web publishing puzzle - a piece missing since the web began - has fallen into place, and a true specific typography can begin to take shape.” Richard Fink Thursday, August 15, 13
8. 1. A Web Fonts Working Group was chartered at the W3C on March 18, 2010. Its first order of business was to establish the WOFF specification as the standard compressed “wrapper” format for delivering (OTF and TTF) fonts on the web. 2. Font rendering in IE9 using Windows’s DirectWrite has been unveiled. 3. The first round of web font preparation tools like Font Squirrel’s @Font-Face Generator and EOTFAST have appeared. 4.A new wave of “font hosting and obfuscation” services (FHOS) have appeared alongside Typekit, Typotheque, and the free and open source Kernest. 5. The CSS3 Fonts Module has evolved to include some of the advanced features of OpenType. 6.Google has launched a free font-hosting service for a growing library of fonts. All of them available for self-hosting, too. “Web Fonts at the Crossing” by Richard Fink in ‘A List apart’. Thursday, August 15, 13
9. “Being a web designer will soon require a deeper understanding of typography and how typefaces work.” Jason Santa Maria Thursday, August 15, 13
10. Typeface Anatomy Thursday, August 15, 13
11. What can you do with CSS @font-face? - font -size - line-height - font-variant (small-caps) - text-transform (uppercase/lowercase) - letter-spacing - font-weight Thursday, August 15, 13
12. Thursday, August 15, 13
13. Switching ligatures on in CSS3: text-rendering: optimizeLegibility; font-variant-ligatures: common-ligatures; Thursday, August 15, 13
14. affair > affair SMALL CAPS >   1979 >  Thursday, August 15, 13
15. Thursday, August 15, 13
16. Thursday, August 15, 13
17. Thursday, August 15, 13
18. “One helpful way to understand what you are designing for is to write down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities.” Jason Santa Maria Thursday, August 15, 13
19. Thursday, August 15, 13
20. Thursday, August 15, 13
21. Thursday, August 15, 13
22. Thursday, August 15, 13
23. Thursday, August 15, 13
24. Thursday, August 15, 13
25. Tips for choosing the right type - legibility (depending on size) - x-height - letters contrast - space between letters - personality - look at it the size it will be used Thursday, August 15, 13
26. Thursday, August 15, 13
27. Thursday, August 15, 13
28. Thursday, August 15, 13
29. Thursday, August 15, 13
30. Mathew Carter Verdana Georgia Tahoma Thursday, August 15, 13
31. Thursday, August 15, 13
32. Thursday, August 15, 13
33. Thursday, August 15, 13
34. Useful tools: - WhatFont Tool - Typekit blog - Font dropper Thursday, August 15, 13
35. Thursday, August 15, 13
36. Thursday, August 15, 13
37. Thursday, August 15, 13
38. Thursday, August 15, 13
39. Problems with web fonts - inconsistent rendering across browsers and platforms - other technical problems, like file size Thursday, August 15, 13
40. Font rendering will depend on: - platform - browser version - font format Thursday, August 15, 13
41. Type rendering in web browsers, author: Miha Zajec, 2010 Thursday, August 15, 13
42. Cantata Case Study Thursday, August 15, 13
43. Thursday, August 15, 13
44. Thursday, August 15, 13
45. Thursday, August 15, 13
46. Thursday, August 15, 13
47. Thursday, August 15, 13
48. Thursday, August 15, 13
49. Thursday, August 15, 13
50. Thursday, August 15, 13
51. Windows7 IE Thursday, August 15, 13
52. WindowsXP IE8 Thursday, August 15, 13
53. Firefox 11 in XP Thursday, August 15, 13
54. A great effort goes into designing and producing great webfonts. Value type! Thursday, August 15, 13
55. Thank you! http://joanamcorreia.com twitter: @joanamcorreia Thursday, August 15, 13