Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Finding Your Perfect Web Type Match

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

Val Head

May 03, 2013
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. your perfect
    web type match

    View full-size slide

  2. http://creativeJS.com

    View full-size slide

  3. http://refreshpittsburgh.org

    View full-size slide

  4. http://webdesignday.com

    View full-size slide

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

    View full-size slide

  6. Once upon a time...

    View full-size slide

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

    View full-size slide

  8. um, where did the counters go?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. role
    durability
    availability
    context

    View full-size slide

  12. The font’s role

    View full-size slide

  13. Many typefaces were
    designed to solve specific
    problems.

    View full-size slide

  14. Verdana
    Georgia

    View full-size slide

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

    View full-size slide

  16. Durability/Quality

    View full-size slide

  17. - 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 full-size slide

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

    View full-size slide

  19. Can you handle the web?

    View full-size slide

  20. http://webfontspecimen.com/

    View full-size slide

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

    View full-size slide

  22. There are shortcuts to quality.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Also, “stealing”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. ... Even in IE... hmm...

    View full-size slide

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

    View full-size slide

  31. http://fontdeck.com/showcase

    View full-size slide

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

    View full-size slide

  33. http://typecast.com/

    View full-size slide

  34. Manage expectations.
    Even your own!

    View full-size slide

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

    View full-size slide

  36. Availability

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. Type hosting service
    vs
    Self hosting

    View full-size slide

  40. Adelle from typekit != Adelle
    from fontdeck.

    View full-size slide

  41. how big are fonts, really?

    View full-size slide

  42. 225k average

    View full-size slide

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

    View full-size slide

  44. regular
    bold
    italic
    bold italic
    light

    View full-size slide

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

    View full-size slide

  46. How much font is too much font?

    View full-size slide

  47. “too much” is subjective

    View full-size slide

  48. http://www.subsetter.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Summing it all up!

    View full-size slide

  53. These are changing times!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  57. your perfect
    web type match

    View full-size slide