Beautiful Web Typography

Presented at WordCamp Minneapolis 2015. 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.

1. Beautiful
 Web Typography
2. Mel Choyce DESIGN ENGINEER 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
20. Picking Pairing &
21. One typeface, multiple weights
22. Sans + Serif = <3
23. Pick a Family when in doubt
24. Use decorative headers Sparingly
25. Borrow Pairings still worried?
26. Beautiful Web Type http://hellohappy.org/beautiful-web-type/ TYPEFACE PAIRINGS
27. Google Web Fonts Typographic Project http://femmebot.github.io/google-type/ TYPEFACE PAIRINGS
28. Typewolf http://www.typewolf.com/ TYPEFACE PAIRINGS
29. Font Pair http://fontpair.co/ TYPEFACE PAIRINGS
30. Size
31. don’t make me SQUINT
32. 14-22 px body fonts
33. Line-height
34. 1x is so, so sad.
36. 1.4-1.6x for body fonts
38. 1.2-1.4x for header fonts
40. body { font-size: 16px; line-height: 1.5; } h1, h2, h3 { line-height: 1.3; }
41. Line-length
42. 45-75 characters per line* * including spaces and punctuation
44. More sometimes is okay
45. Less sometimes is okay* * especially on smaller screens
46. Balancing Act
47. Style
48. only center short text
49. only all-caps short text
50. avoid justified text
51. only underline links
52. limit your # of font styles
53. don’t use 100% black
55. INTRODUCTION TO 
 Using Fonts in WordPress
56. pick a Source
57. figure out your constraints
58. Self-Hosted? Cloud-Hosted?
59. figure out your budget
60. No budget? Small budget? Large budget?
61. Free Hosted Service
62. The Good Free!
63. The Bad • Not as many high-quality options • Limited styles/weights • Limited character sets • Limited multi language support • Often overused
64. Paid Hosted Service
65. 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
66. The Bad • They cost money • Might have to pay based on traffic • More licensing restrictions
67. Self-Hosted Service
68. The Good • Totally customizable setup • Can remove characters to reduce font size • You “own” your fonts
69. The Bad • Requires additional setup • Requires additional tech knowledge • Optimization up to you • Often more expensive for paid fonts
70. use a Plugin
71. great if you’re not rolling your own
72. great if you don’t have file access
73. add it Manually
74. @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/
75. WEBFONT GENERATOR Font Squirrel http://www.fontsquirrel.com/tools/webfont-generator
76. Google Fonts
77. Paid & Hosted • Depends on your service • Usually given something to add to your <head>
78. THINKING ABOUT 
 The Future of Type
79. higher quality Free Fonts
80. Responsive Type
81. 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; } }
82. RESPONSIVE TYPOGRAPHY JAVASCRIPT FitText.js http://fittextjs.com/
83. RESPONSIVE TYPOGRAPHY JAVASCRIPT FlowType.js http://simplefocus.com/flowtype/
84. https://css-tricks.com/viewport-sized-typography/ CSS Tricks: Viewport Sized Typography RESPONSIVE TYPOGRAPHY CSS
85. h1 { font-size: 6vw; } h2 { line-height: 3vh; } p { line-height: 2vmin; }
86. http://alistapart.com/blog/post/variable-fonts-for-responsive-design Variable Fonts for Responsive Design RESPONSIVE TYPEFACES
87. Dynamic Text
88. TYPE & SVG Animated Text Fills http://tympanus.net/Tutorials/AnimatedTextFills/index.html
89. Thanks! @melchoyce melchoyce.design https://choycedesign.com/type/