Finding Your Perfect Web Type Match

76ded8131db760e741f0ecb01cb4c562?s=47 Val Head
May 03, 2013

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

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

May 03, 2013
Tweet

Transcript

  1. your perfect web type match

  2. http://creativeJS.com

  3. http://refreshpittsburgh.org

  4. http://webdesignday.com

  5. None
  6. None
  7. None
  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.
  11. None
  12. um, where did the counters go?

  13. None
  14. None
  15. None
  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

  19. None
  20. The font’s role

  21. Many typefaces were designed to solve specific problems.

  22. Verdana Georgia

  23. None
  24. None
  25. None
  26. High contrast and small x- heights don’t do tiny sizes

    well on the web.
  27. None
  28. Durability/Quality

  29. None
  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.

  32. None
  33. None
  34. None
  35. Can you handle the web?

  36. None
  37. None
  38. None
  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/

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

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

  47. Also, “stealing”

  48. None
  49. Whatfont: Better than sliced bread at telling you what font

    that is.
  50. None
  51. Mental note: FF Meta Serif at 16px reads pretty darn

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

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

  55. http://fontdeck.com/showcase

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

  57. None
  58. Context

  59. None
  60. None
  61. None
  62. http://typecast.com/

  63. None
  64. None
  65. None
  66. None
  67. None
  68. Manage expectations. Even your own!

  69. None
  70. None
  71. None
  72. http://furious.gr/font-foundries-must-die/

  73. None
  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.

  79. None
  80. Performance

  81. how big are fonts, really?

  82. None
  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

  88. None
  89. How much font is too much font?

  90. None
  91. None
  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”
  98. None
  99. None
  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