Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webfonts: WordPress and Beyond

1,725 views

Published on

Given at the Boston WordPress meetup, 2/18/13. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.

Published in: Design

Webfonts: WordPress and Beyond

  1. 1. Webfonts:WordPress & Beyondpresented at #bostonwp@melchoyce choycedesign.com
  2. 2. Mel Choyce• UX Apprentice at Fresh Tilled Soil• WordPress evangelist• Former Western MA WordPress meetup co-coordinator• For hire!@melchoyce choycedesign.com
  3. 3. Intro to Webfonts
  4. 4. “Web Design is 95% Typography”Oliver Reichenstein,The Web is All About Typography. Period.
  5. 5. The Past
  6. 6. Web Safe Fonts CourierArial Georgia Times New Roman Comic Sans Verdana
  7. 7. Font Replacement• Images• Scalable Inman Flash Replacement (sIFR)• cufón• Face Lift Image Replacement (FLIR)
  8. 8. And then came...
  9. 9. @font-face
  10. 10. The Present & Beyond
  11. 11. Icon Fonts
  12. 12. Graph Fonts
  13. 13. Good Web Type
  14. 14. Picking Typefaces
  15. 15. When choosing typefaces...• Think about tone. Is it appropriate?• Does it have too much personality?• Is it easy to read?
  16. 16. “Using a typeface because it looksinteresting might yield acceptableresults, but really practicing the artof typography involvesunderstanding typefaces and whatthey mean.”Jason Santa Maria,On Web Typography
  17. 17. When in doubt... Sans Serif + Serif
  18. 18. Families > loners
  19. 19. Steal pairingshttp://hellohappy.org/beautiful-web-type/
  20. 20. Making it Look Good
  21. 21. Size* http://www.zeldman.com/
  22. 22. Line HeightHe 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 thesay, “There goes the Doctor!—He’s a street in his high hat everyone wouldclever man.” And the dogs and thechildren would all run up and follow say, “There goes the Doctor!—He’s abehind him; and even the crows that clever man.” And the dogs and thelived in the church-tower would caw children would all run up and followand 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
  23. 23. Line LengthThe house he lived in, on the edge of the town, was quite small; but his garden was verylarge 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
  24. 24. Webfonts in WP
  25. 25. use a plugin
  26. 26. add it manually
  27. 27. @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); }
  28. 28. Thanks.Any questions?@melchoyce choycedesign.com

×