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. Beautiful
 Web Typography

  2. Mel Choyce PRODUCT DESIGNER AT AUTOMATTIC @melchoyce melchoyce.design

  3. INTRODUCTION TO 
 Beautiful Web Type

  4. Web Design is 95% Typography — Oliver Reichenstein “

  5. National Geographic http://www.nationalgeographic.com/mag... TYPE ON THE WEB

  6. Ghostly Ferns http://ghostlyferns.com/ TYPE ON THE WEB

  7. FCINQ http://www.fcinq.com/ TYPE ON THE WEB

  8. Wired http://www.wired.com/ TYPE ON THE WEB

  9. Seedlip https://www.seedlipdrinks.com/ TYPE ON THE WEB

  10. NASA Gene Lab http://genelab.nasa.gov/ TYPE ON THE WEB

  11. can make their type ANYONE LOOK GOOD

  12. INTRODUCTION TO 
 Typographic Principles

  13. Picking Pairing &

  14. Picking Pairing &

  15. think about Tone

  16. Neutral Stylized >

  17. Pick body fonts with multiple weights

  18. None
  19. None
  20. Picking Pairing &

  21. One typeface, multiple weights

  22. Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  23. Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  24. Sans + Serif = ❤

  25. Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  26. Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  27. Pick a Family when in doubt

  28. Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  29. Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  30. Meet WordPress WordPress is open source software you can use

    to create a beautiful website, blog, or app.
  31. Use decorative headers Sparingly

  32. Borrow Pairings still worried?

  33. Beautiful Web Type http://hellohappy.org/beautiful-web-type/ TYPEFACE PAIRINGS

  34. Google Web Fonts Typographic Project http://femmebot.github.io/google-type/ TYPEFACE PAIRINGS

  35. Typewolf http://www.typewolf.com/ TYPEFACE PAIRINGS

  36. Font Pair http://fontpair.co/ TYPEFACE PAIRINGS

  37. Size

  38. don’t make me SQUINT

  39. 14-22 px body fonts

  40. Line-height

  41. 1x is so, so sad.

  42. None
  43. 1.4-1.6x for body fonts

  44. None
  45. 1.2-1.4x for header fonts

  46. None
  47. body { font-size: 1em; line-height: 1.5; } h1, h2, h3

    { line-height: 1.3; }
  48. Line-length

  49. 45-75 characters per line* * including spaces and punctuation

  50. None
  51. More sometimes is okay

  52. Less sometimes is okay* * especially on smaller screens

  53. Balancing Act

  54. Style

  55. only center short text

  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.
  57. only all-caps short text

  58. avoid justified text

  59. only underline links

  60. limit your # of font styles

  61. don’t use 100% black

  62. None
  63. INTRODUCTION TO 
 Using Fonts in WordPress

  64. pick a Source

  65. figure out your constraints

  66. Self-Hosted? Cloud-Hosted?

  67. figure out your budget

  68. No budget? Small budget? Large budget?

  69. Free Hosted Service

  70. The Good Free!

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

    styles/weights • Limited character sets • Limited multi language support • Often overused
  72. Paid Hosted Service

  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
  74. The Bad • They cost money • Might have to

    pay based on traffic • More licensing restrictions
  75. Self-Hosted Service

  76. The Good • Totally customizable setup • Can remove characters

    to reduce font size • You “own” your fonts
  77. The Bad • Requires additional setup • Requires additional tech

    knowledge • Optimization up to you • Often more expensive for paid fonts
  78. use a Plugin

  79. great if you’re not rolling your own

  80. great if you don’t have file access

  81. add it Manually

  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/
  83. WEBFONT GENERATOR Font Squirrel http://www.fontsquirrel.com/tools/webfont-generator

  84. @font-face { font-family: 'Typeface'; src: url('Typeface.woff2') format('woff2'), url('Typeface.woff') format('woff'); }

    MODERN @FONT-FACE STACK https://css-tricks.com/snippets/css/using-font-face/
  85. Google Fonts

  86. Paid & Hosted • Depends on your service • Usually

    given something to add to your <head>
  87. THINKING ABOUT 
 The Future of Type

  88. higher quality Free Fonts

  89. going back to System Fonts

  90. Responsive Type

  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; } }
  92. RESPONSIVE TYPOGRAPHY JAVASCRIPT FlowType.js http://simplefocus.com/flowtype/

  93. https://css-tricks.com/viewport-sized-typography/ CSS Tricks: Viewport Sized Typography RESPONSIVE TYPOGRAPHY CSS

  94. h1 { font-size: 6vw; } h2 { line-height: 3vh; }

    p { line-height: 2vmin; }
  95. Variable Fonts

  96. https://blog.typekit.com/2016/09/14/variable-fonts-a-new-kind-of-font-for-flexible-design/ A responsive lettering example by Erik van Blokland VARIABLE

    FONTS
  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. “
  98. can’t use them just yet

  99. Color Fonts

  100. VARIABLE FONTS https://color.typekit.com/

  101. Thanks! @melchoyce melchoyce.design https://choycedesign.com/type/