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

Your Perfect Web Type Match - Refresh Pittsburgh 02/2013

Val Head
February 11, 2013

Your Perfect Web Type Match - Refresh Pittsburgh 02/2013

A short and sweet presentation full of advice on how to make awesome web type choices in the big world of web type options were have out there!

Val Head

February 11, 2013
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. your perfect
    web type match
    Refresh Pittsburgh February 2013
    Val Head
    @vlh

    View full-size slide

  2. A good choice for this design?

    View full-size slide

  3. physical qualities
    reading & perception
    intended role
    history
    character set

    View full-size slide

  4. A good choice for this web site?

    View full-size slide

  5. operating systems!
    web browsers!
    font files and outlines
    hinting
    file size

    View full-size slide

  6. let’s talk about addressing
    that second list.

    View full-size slide

  7. but first, a story.

    View full-size slide

  8. um, where did the counters go?

    View full-size slide

  9. what is a webfont, technically?

    View full-size slide

  10. consider the source.

    View full-size slide

  11. the typeface’s role in life?

    View full-size slide

  12. display vs text.

    View full-size slide

  13. hinting: more instructions for small sizes.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. see it live…

    View full-size slide

  17. …and not just in your browser.

    View full-size slide

  18. http://webfontspecimen.com/

    View full-size slide

  19. even better: see it in context.

    View full-size slide

  20. your font is so big…

    View full-size slide

  21. you should be worried about file size.

    View full-size slide

  22. but where is “too much” ?

    View full-size slide

  23. regular
    bold
    italic

    View full-size slide

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

    View full-size slide

  25. http://www.subsetter.com/

    View full-size slide

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

    View full-size slide

  27. consider context along with file size.

    View full-size slide

  28. mind your font-weights too!

    View full-size slide

  29. remember your old pal the font stack?

    View full-size slide

  30. there should always be something between
    your fancypants display face and “serif”

    View full-size slide

  31. little cheats.
    it’s totally cool, don’t worry.

    View full-size slide

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

    View full-size slide

  33. v
    http://fontdeck.com/showcase

    View full-size slide

  34. compile a list of tried and true favourites.

    View full-size slide

  35. FF Meta Serif
    Adelle
    FF Tisa Sans Pro
    Proxima Nova

    View full-size slide

  36. your perfect
    web type match
    Refresh Pittsburgh February 2013
    Val Head
    @vlh

    View full-size slide