Beautiful Web Typography (2017)

Af9bb7766849db4d928a85b8e2eae758?s=47 Mel Choyce
August 12, 2017

Beautiful Web Typography (2017)

Presented at WordCamps Portland Maine and Montreal in 2017.

With the rapid popularization of web fonts over the past few years, type on the web has never been more exciting! We’ll learn a bit about basic typographic principles, review techniques and services for integrating web fonts into your WordPress sites, and finally conclude with a bit of speculation on where type on the web is heading.

Af9bb7766849db4d928a85b8e2eae758?s=128

Mel Choyce

August 12, 2017
Tweet

Transcript

  1. 18.
  2. 19.
  3. 22.

    Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  4. 23.

    Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  5. 25.

    Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  6. 26.

    Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  7. 28.

    Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  8. 29.

    Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  9. 30.

    Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  10. 37.
  11. 42.
  12. 44.
  13. 46.
  14. 50.
  15. 54.
  16. 56.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis

    feugiat ex. Aenean nec ipsum non lacus malesuada consectetur id eu dui. Praesent commodo nisi sed est semper fringilla euismod ac diam. Maecenas dui dui, lobortis ut blandit vel, tempus sed ante. Fusce sit amet auctor odio. Quisque dolor libero, vulputate vitae justo nec, molestie lacinia neque. Maecenas a vehicula sapien. Praesent odio nulla, laoreet a dapibus ut, blandit nec ipsum.
  17. 62.
  18. 71.

    The Bad • Not as many high-quality options • Limited

    styles/weights • Limited character sets • Limited multi language support • Often overused
  19. 73.

    The Good • Support • Higher quality fonts • More

    likely to find extended character sets • More likely to find multi language support • More likely to be both good and unique
  20. 74.

    The Bad • They cost money • Might have to

    pay based on traffic • More licensing restrictions
  21. 76.

    The Good • Totally customizable setup • Can remove characters

    to reduce font size • You “own” your fonts
  22. 77.

    The Bad • Requires additional setup • Requires additional tech

    knowledge • Optimization up to you • Often more expensive for paid fonts
  23. 82.

    @font-face { font-family: 'Typeface'; src: url('Typeface.eot?') format('eot'), url('Typeface.woff') format('woff'), url('Typeface.ttf')

    format('truetype'); } BULLETPROOF @FONT-FACE http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  24. 84.
  25. 86.

    Paid & Hosted • Depends on your service • Usually

    given something to add to your <head>
  26. 91.

    RESPONSIVE TYPOGRAPHY MEDIA QUERIES body { font-size: 100%; } h1

    { font—size: 2.5em; } @media screen and (max-width: 50em) { h1 { font—size: 2em; } } @media screen and (max-width: 40em) { h1 { font—size: 1.5em; } }
  27. 94.
  28. 97.

    Imagine condensing or extending glyph widths ever so slightly, to

    accommodate narrow and wide viewports. Imagine raising your favorite font’s x-height just a touch at small sizes. Imagine sharpening or rounding your brand typeface in ways its type designer intended, for the purposes of art direction. Imagine shortening descenders imperceptibly so that headings can be set nice and tight without letters crashing into one another. Imagine this all happening live on the web, as a natural part of responsive design. — Tim Brown, Variable fonts, a new kind of font for flexible design. “