Finding Your Perfect Web Type Match

The world of web type has opened up huge possibilities in typography for web designers but sadly not all fonts on the web were made for the web. We have browser rendering, performance and more to consider on top of our typographic design decisions. This makes choosing type for use on the web just a bit tricky. In this talk Val will cover techniques and tools for balancing aesthetics and performance when selecting web type. We’ll cover everything you need to end up with a web font that’s “just your type”.

Transcript

1. your perfect web type match
2. http://creativeJS.com
3. http://refreshpittsburgh.org
4. http://webdesignday.com
8. 2 crying cats some gifs 1 pretty terrible pun all the helpful web type advice I could pack in
9. Once upon a time...
10. Not all fonts on the web were made for the web.
12. um, where did the counters go?
16. operating system text rendering engines user preferences file format of the font hinting of the font file
17. http://blog.typekit.com/2010/10/05/type-rendering- on-the-web/
18. role durability availability context
20. The font’s role
21. Many typefaces were designed to solve specific problems.
22. Verdana Georgia
26. High contrast and small x- heights don’t do tiny sizes well on the web.
28. Durability/Quality
30. - Steve Matteson, Monotype “Every typeface will have its own sweet spots … so it’s useful to have a palette of typefaces to work with.”
31. Assemble your own short list of trusted web fonts.
35. Can you handle the web?
39. http://webfontspecimen.com/
40. Free web fonts are about as good as free fonts.
41. There are shortcuts to quality.
42. http://www.fontbureau.com/ReadingEdge/
45. http://typecast.com/blog/type-qa-steve-matteson- from-monotype
46. Text http://fontdeck.com/typefaces/all/tags/ manuallyhinted/
47. Also, “stealing”
49. Whatfont: Better than sliced bread at telling you what font that is.
51. Mental note: FF Meta Serif at 16px reads pretty darn nicely.
52. ... Even in IE... hmm...
54. http://blog.typekit.com/category/sites-we-like/
55. http://fontdeck.com/showcase
56. Quality? Check! Now about the context...
58. Context
62. http://typecast.com/
68. Manage expectations. Even your own!
72. http://furious.gr/font-foundries-must-die/
74. Availability
75. Don’t bother with fonts that aren’t available for the web. (i.e. gotham)
76. Make sure it’s available. Make sure you can afford it.
77. Type hosting service vs Self hosting
78. Adelle from typekit != Adelle from fontdeck.
80. Performance
81. how big are fonts, really?
83. 225k average
84. 227k
85. Fonts have weight(s). (and I don’t just mean light and bold)
86. regular bold italic bold italic light
87. http://alistapart.com/article/say-no-to-faux-bold
89. How much font is too much font?
92. 422k
93. “too much” is subjective
94. http://www.subsetter.com/
95. Hiding web fonts from small screens (aka: mobile, we hope)
96. http://css-tricks.com/preventing-the-performance- hit-from-custom-fonts/
97. Promise me there will always be something between your web font and “serif”
100. Summing it all up!
101. These are changing times!
102. http://alistapart.com/column/font-hinting-and-the- future-of-responsive-typography
103. https://www.fontfont.com/fonts/chartwell
104. http://www.fonts.com/web-fonts/google
105. your perfect web type match