Webfonts: WordPress and Beyond
2 likes1,981 views
The presentation by Mel Choyce at #bostonwp focuses on the importance of typography in web design, emphasizing the shift from traditional web-safe fonts to modern webfonts using @font-face. Key considerations for choosing typefaces include their tone, readability, and the appropriateness of their personality. The document also provides practical tips on font size, line height, and recommendations for using webfonts in WordPress.
Webfonts: WordPress and Beyond
- 1. Webfonts: WordPress & Beyond presented at #bostonwp @melchoyce choycedesign.com
- 2. Mel Choyce • UX Apprentice at Fresh Tilled Soil • WordPress evangelist • Former Western MA WordPress meetup co-coordinator • For hire! @melchoyce choycedesign.com
- 4. “Web Design is 95% Typography” Oliver Reichenstein, The Web is All About Typography. Period.
- 5. The Past
- 6. Web Safe Fonts Courier Arial Georgia Times New Roman Comic Sans Verdana
- 7. Font Replacement • Images • Scalable Inman Flash Replacement (sIFR) • cufón • Face Lift Image Replacement (FLIR)
- 9. @font-face
- 12. The Present & Beyond
- 13. Icon Fonts
- 14. Graph Fonts
- 15. Good Web Type
- 17. When choosing typefaces... • Think about tone. Is it appropriate? • Does it have too much personality? • Is it easy to read?
- 18. “Using a typeface because it looks interesting might yield acceptable results, but really practicing the art of typography involves understanding typefaces and what they mean.” Jason Santa Maria, On Web Typography
- 19. When in doubt... Sans Serif + Serif
- 22. Making it Look Good
- 24. Line Height He lived in a little town called, He lived in a little town called, Puddleby-on-the-Marsh. All the folks, Puddleby-on-the-Marsh. All the folks, young and old, knew him well by sight. And whenever he walked down the young and old, knew him well by sight. street in his high hat everyone would And whenever he walked down the say, “There goes the Doctor!—He’s a street in his high hat everyone would clever man.” And the dogs and the children would all run up and follow say, “There goes the Doctor!—He’s a behind him; and even the crows that clever man.” And the dogs and the lived in the church-tower would caw children would all run up and follow and nod their heads. behind him; and even the crows that lived in the church-tower would caw and nod their heads. 1.4 - 1.6x your font size for body text
- 25. Line Length The house he lived in, on the edge of the town, was quite small; but his garden was very large and had a wide lawn and stone seats and weeping-willows hanging over. His sister, Sarah Dolittle, was housekeeper for him; but the Doctor looked after the garden himself. The house he lived in, on the edge of the town, was quite small; but his garden was very large and had a wide lawn and stone seats and weeping-willows hanging over. His sister, Sarah Dolittle, was housekeeper for him; but the Doctor looked after the garden himself. No more than 50 - 75 characters long
- 26. Webfonts in WP
- 27. use a plugin
- 28. add it manually
- 33. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); src: url('awesome-font.eot?#iefix') format('embedded-opentype'), url('awesome-font.woff') format('woff'), url('awesome-font.ttf') format('truetype'), url('awesome-font.svg#svgFontName') format('svg'); }
- 34. Thanks. Any questions? @melchoyce choycedesign.com