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
   

   View Slide

2. http://creativeJS.com
   

   View Slide

3. http://refreshpittsburgh.org
   

   View Slide

4. http://webdesignday.com
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. 2 crying cats
   some gifs
   1 pretty terrible pun
   all the helpful web type advice I could
   pack in
   

   View Slide

9. Once upon a time...
   

   View Slide

10. Not all fonts on the web were
    made for the web.
    

    View Slide

11. View Slide

12. um, where did the counters go?
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. operating system
    text rendering engines
    user preferences
    file format of the font
    hinting of the font file
    

    View Slide

17. http://blog.typekit.com/2010/10/05/type-rendering-
    on-the-web/
    

    View Slide

18. role
    durability
    availability
    context
    

    View Slide

19. View Slide

20. The font’s role
    

    View Slide

21. Many typefaces were
    designed to solve specific
    problems.
    

    View Slide

22. Verdana
    Georgia
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. High contrast and small x-
    heights don’t do tiny sizes
    well on the web.
    

    View Slide

27. View Slide

28. Durability/Quality
    

    View Slide

29. View Slide

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.”
    

    View Slide

31. Assemble your own short list
    of trusted web fonts.
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. Can you handle the web?
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. http://webfontspecimen.com/
    

    View Slide

40. Free web fonts are about as
    good as free fonts.
    

    View Slide

41. There are shortcuts to quality.
    

    View Slide

42. http://www.fontbureau.com/ReadingEdge/
    

    View Slide

43. View Slide

44. View Slide

45. http://typecast.com/blog/type-qa-steve-matteson-
    from-monotype
    

    View Slide

46. Text
    http://fontdeck.com/typefaces/all/tags/
    manuallyhinted/
    

    View Slide

47. Also, “stealing”
    

    View Slide

48. View Slide

49. Whatfont: Better than sliced bread at
    telling you what font that is.
    

    View Slide

50. View Slide

51. Mental note: FF Meta Serif at 16px reads
    pretty darn nicely.
    

    View Slide

52. ... Even in IE... hmm...
    

    View Slide

53. View Slide

54. http://blog.typekit.com/category/sites-we-like/
    

    View Slide

55. http://fontdeck.com/showcase
    

    View Slide

56. Quality? Check!
    Now about the context...
    

    View Slide

57. View Slide

58. Context
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. http://typecast.com/
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. Manage expectations.
    Even your own!
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. http://furious.gr/font-foundries-must-die/
    

    View Slide

73. View Slide

74. Availability
    

    View Slide

75. Don’t bother with fonts that
    aren’t available for the web.
    (i.e. gotham)
    

    View Slide

76. Make sure it’s available.
    Make sure you can afford it.
    

    View Slide

77. Type hosting service
    vs
    Self hosting
    

    View Slide

78. Adelle from typekit != Adelle
    from fontdeck.
    

    View Slide

79. View Slide

80. Performance
    

    View Slide

81. how big are fonts, really?
    

    View Slide

82. View Slide

83. 225k average
    

    View Slide

84. 227k
    

    View Slide

85. Fonts have weight(s).
    (and I don’t just mean light and bold)
    

    View Slide

86. regular
    bold
    italic
    bold italic
    light
    

    View Slide

87. http://alistapart.com/article/say-no-to-faux-bold
    

    View Slide

88. View Slide

89. How much font is too much font?
    

    View Slide

90. View Slide

91. View Slide

92. 422k
    

    View Slide

93. “too much” is subjective
    

    View Slide

94. http://www.subsetter.com/
    

    View Slide

95. Hiding web fonts from small
    screens
    (aka: mobile, we hope)
    

    View Slide

96. http://css-tricks.com/preventing-the-performance-
    hit-from-custom-fonts/
    

    View Slide

97. Promise me there will always
    be something between your
    web font and “serif”
    

    View Slide

98. View Slide

99. View Slide

100. Summing it all up!
     

     View Slide

101. These are changing times!
     

     View Slide

102. http://alistapart.com/column/font-hinting-and-the-
     future-of-responsive-typography
     

     View Slide

103. https://www.fontfont.com/fonts/chartwell
     

     View Slide

104. http://www.fonts.com/web-fonts/google
     

     View Slide

105. your perfect
     web type match
     

     View Slide