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.

Typography in Web Design (WordCamp Toronto 2014)

20,982 views

Published on

I delivered this presentation at WordCamp Toronto, November 15, 2014.

This presentation covers typography basics and best practices, type trends in web design, personalities of type, an introduction to Google Fonts and different ways to enable fonts on your WordPress website.

The ideal audience is anyone looking to better understand Typography and how it relates to web design. They don’t need to have a coding or design background, but that would be an asset.

Learning Outcomes
Understand the different types of fonts and when to use them
Recognize the various personalities and tones fonts have and how they can affect your message
Know what the current trends are in Typography and web design
Use theme options and/or plugins to modify fonts
Leverage Google Fonts and integrate them directly into your theme

Published in: Design

Typography in Web Design (WordCamp Toronto 2014)

  1. Typography in Web Design Presented by Jasmine Vesque WordCamp Toronto 2014 ©Jasmine Vesque 2014 @jasmineVesque#wcto
  2. A little about me  Making websites since 2009  Owner, Forward Slash Media  Co-Founder, LumosTech Training  VP Comms, Forget for a Moment Foundation  Co-organizer, WordCamp Ottawa & Meetup  Social Media Junkie: @jasmineVesque ©Jasmine Vesque 2014 @jasmineVesque#wcto
  3. What is Typography? ©Jasmine Vesque 2014 @jasmineVesque#wcto
  4. Typography is the art and technique of arranging type in order to make language visible. http://en.wikipedia.org/wiki/Typography ©Jasmine Vesque 2014 @jasmineVesque#wcto
  5. Why Type Matters ©Jasmine Vesque 2014 @jasmineVesque#wcto
  6. Web Design is 95% Typography http://ia.net/blog/the-web-is-all-about-typography-period/ ©Jasmine Vesque 2014 @jasmineVesque#wcto
  7. People Still Read Our 1st responsibility is to our readers. We must help them find, understand, and connect with the words, ideas, and information they seek. ~ Typographic Web Design by Laura Franz ©Jasmine Vesque 2014 @jasmineVesque#wcto
  8. Reading Types  Scanning (with purpose)  Casual reading /Skimming  Sustained reading /Engaged reading ~ Typographic Web Design by Laura Franz ©Jasmine Vesque 2014 @jasmineVesque#wcto
  9. Content is King Our 2nd responsibility is to honour the content We have to clarify and share the meaning of the texts people read. ~ Typographic Web Design by Laura Franz ©Jasmine Vesque 2014 @jasmineVesque#wcto
  10. Typography Basics ©Jasmine Vesque 2014 @jasmineVesque#wcto
  11. There are no rules in typography There are principles, best practices, and methods that work most of the time, but nothing works all of the time. ~ On Web Typography by Jason Santa Maria © Jasmine Vesque 2014 @jasmineVesque#wcto
  12. Serif Fonts  Have serifs (little feet)  Good for headings  Traditional ©Jasmine Vesque 2014 @jasmineVesque#wcto
  13. Garamond ©Jasmine Vesque 2014 @jasmineVesque#wcto
  14. Times New Roman ©Jasmine Vesque 2014 @jasmineVesque#wcto
  15. Libre Baskerville ©Jasmine Vesque 2014 @jasmineVesque#wcto
  16. Old Standard TT ©Jasmine Vesque 2014 @jasmineVesque#wcto
  17. Sans-Serif Sans-Serif  Without serifs  Good for body copy  Modern ©Jasmine Vesque 2014 @jasmineVesque#wcto
  18. Arial ©Jasmine Vesque 2014 @jasmineVesque#wcto
  19. Droid Sans ©Jasmine Vesque 2014 @jasmineVesque#wcto
  20. Open Sans ©Jasmine Vesque 2014 @jasmineVesque#wcto
  21. Lato ©Jasmine Vesque 2014 @jasmineVesque#wcto
  22. Slab-Serif Slab-Serif  Thick, block-like serifs  Best for headings or short amounts of text  Modern ©Jasmine Vesque 2014 @jasmineVesque#wcto
  23. Rockwell Extra Bold © Jasmine Vesque 2014 @jasmineVesque#wcto
  24. Courier © Jasmine Vesque 2014 @jasmineVesque#wcto
  25. Roboto Slab Bold © Jasmine Vesque 2014 @jasmineVesque#wcto
  26. Ultra © Jasmine Vesque 2014 @jasmineVesque#wcto
  27. Display Display Type  Serif or sans-serif  Best for headings or short amounts of text ©Jasmine Vesque 2014 @jasmineVesque#wcto
  28. Bauhaus 93 ©Jasmine Vesque 2014 @jasmineVesque#wcto
  29. Lobster ©Jasmine Vesque 2014 @jasmineVesque#wcto
  30. Bangers ©Jasmine Vesque 2014 @jasmineVesque#wcto
  31. Keania One ©Jasmine Vesque 2014 @jasmineVesque#wcto
  32. Script/Handwriting Script/Handwriting  Best for headings or short amounts of text ©Jasmine Vesque 2014 @jasmineVesque#wcto
  33. Brush Script STD ©Jasmine Vesque 2014 @jasmineVesque#wcto
  34. Cookie ©Jasmine Vesque 2014 @jasmineVesque#wcto
  35. Segoe Script ©Jasmine Vesque 2014 @jasmineVesque#wcto
  36. Sofia ©Jasmine Vesque 2014 @jasmineVesque#wcto
  37. Typeface vs. Font  Typeface: Name of the design in full – style or family of styles. – Arial  Font refers to format or storage mechanism. – Arial.ttf  “Typeface is to a font as a song is to an mp3.” – Nick Sherman © Jasmine Vesque 2014 @jasmineVesque#wcto
  38. Things to Consider when Choosing a Font ©Jasmine Vesque 2014 @jasmineVesque#wcto
  39. Readability Readability is the ease in which text can be read and understood. http://en.wikipedia.org/wiki/Readability ©Jasmine Vesque 2014 @jasmineVesque#wcto
  40. The term readability doesn’t ask simply “Can you read it?” or “How fast can you read it? It also asks “Do you want to read it?” - Stephen Coles © Jasmine Vesque 2014 @jasmineVesque#wcto
  41. Unreadable Please, when Torchwood comes to write my complete history, don't tell people I travelled through time and space with her mother! Aw, I wanted to be ginger! I've never been ginger! And you, Rose Tyler! Fat lot of good you were! You gave up on me! Ooh, that's rude. Is that the sort of man I am now? Am I rude? Rude and not ginger. Oh, yes. Harmless is just the word: that's why I like it! Doesn't kill, doesn't wound, doesn't maim. But I'll tell you what it does do: it is very good at opening doors! ©Jasmine Vesque 2014 @jasmineVesque#wcto
  42. Readable Please, when Torchwood comes to write my complete history, don't tell people I travelled through time and space with her mother! Aw, I wanted to be ginger! I've never been ginger! And you, Rose Tyler! Fat lot of good you were! You gave up on me! Ooh, that's rude. Is that the sort of man I am now? Am I rude? Rude and not ginger. Oh, yes. Harmless is just the word: that's why I like it! Doesn't kill, doesn't wound, doesn't maim. But I'll tell you what it does do: it is very good at opening doors! http://doctoripsum.com/ ©Jasmine Vesque 2014 @jasmineVesque#wcto
  43. K.I.S.S: Keep it simple, sugar! ©Jasmine Vesque 2014 @jasmineVesque#wcto
  44. Don’t use all the fonts at once ©Jasmine Vesque 2014 @jasmineVesque#wcto
  45. One Font for Headings One font for body copy. It can be tempting, once you know how to change the font of your text, to change it all the time. While there is no minimum or maximum number of fonts that look good on a Web page, the more fonts you have the more confusing and ugly your page will look. If you have any ads on your pages, you instantly have a new place where fonts will be. ©Jasmine Vesque 2014 @jasmineVesque#wcto
  46. Colour Considerations ©Jasmine Vesque 2014 @jasmineVesque#wcto
  47. Colour Choice Easier to read Black or dark text on a white or light background is statistically easier to read. Also great for accessibility! Harder to read White or light text on a black or dark background is statistically more difficult to read ©Jasmine Vesque 2014 @jasmineVesque#wcto
  48. Some things are just wrong Some colour combinations are just too painful to look at! ©Jasmine Vesque 2014 @jasmineVesque#wcto
  49. Aesthetics and Emotions Does the font convey the right message? ©Jasmine Vesque 2014 @jasmineVesque#wcto
  50. Fonts have personality ©Jasmine Vesque 2014 @jasmineVesque#wcto
  51. They can be happy ©Jasmine Vesque 2014 @jasmineVesque#wcto
  52. or scared ©Jasmine Vesque 2014 @jasmineVesque#wcto
  53. They can be elegant ©Jasmine Vesque 2014 @jasmineVesque#wcto
  54. and refined ©Jasmine Vesque 2014 @jasmineVesque#wcto
  55. or rebellious ©Jasmine Vesque 2014 @jasmineVesque#wcto
  56. grungy ©Jasmine Vesque 2014 @jasmineVesque#wcto
  57. Metallic ©Jasmine Vesque 2014 @jasmineVesque#wcto
  58. Type can represent order ©Jasmine Vesque 2014 @jasmineVesque#wcto
  59. Technology ©Jasmine Vesque 2014 @jasmineVesque#wcto
  60. or a bygone era ©Jasmine Vesque 2014 @jasmineVesque#wcto
  61. However…  Aesthetics and emotional associations are social constructs  No font can perfectly convey the associated emotion  Fonts play a supporting role to your words, and should never shout, “Look at me! I am ripe with meaning!” ~ Typographic Web Design by Laura Franz ©Jasmine Vesque 2014 @jasmineVesque#wcto
  62. Current Typography Trends ©Jasmine Vesque 2014 @jasmineVesque#wcto
  63. Typography is King © Jasmine Vesque 2014 @jasmineVesque#wcto
  64. Really Big Text ©Jasmine Vesque 2014 @jasmineVesque#wcto
  65. Handwritten Type ©Jasmine Vesque 2014 @jasmineVesque#wcto
  66. Slab-Serif Font ©Jasmine Vesque 2014 @jasmineVesque#wcto
  67. Multi – Type ©Jasmine Vesque 2014 @jasmineVesque#wcto
  68. Vintage Revival ©Jasmine Vesque 2014 @jasmineVesque#wcto
  69. Simplified Content and Typography ©Jasmine Vesque 2014 @jasmineVesque#wcto
  70. More Breathing Space © Jasmine Vesque 2014 @jasmineVesque#wcto
  71. How to display fonts on your site? ©Jasmine Vesque 2014 @jasmineVesque#wcto
  72. Fonts as a Service  google.com/fonts/  fontsquirrel.com/  typekit.com/ ($)  fontdeck.com/ ($)  and others ©Jasmine Vesque 2014 @jasmineVesque#wcto
  73. Built into Your Theme ©Jasmine Vesque 2014 @jasmineVesque#wcto
  74. Plugins ©Jasmine Vesque 2014 @jasmineVesque#wcto
  75. Google Typography https://wordpress.org/plugins/google-typography/ ©Jasmine Vesque 2014 @jasmineVesque#wcto
  76. Easy Google Fonts https://wordpress.org/plugins/easy-google-fonts/ ©Jasmine Vesque 2014 @jasmineVesque#wcto
  77. Typekit Fonts for WordPress ©Jasmine Vesque 2014 @jasmineVesque#wcto http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/
  78. How to use Google Fonts ©Jasmine Vesque 2014 @jasmineVesque#wcto
  79. google.com/fonts/ ©Jasmine Vesque 2014 @jasmineVesque#wcto Quick-use
  80. Grab the Code ©Jasmine Vesque 2014 @jasmineVesque#wcto
  81. functions.php function load_fonts() { wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family= Arbutus+Slab'); wp_enqueue_style( 'googleFonts' ); } add_action('wp_print_styles', 'load_fonts'); ©Jasmine Vesque 2014 @jasmineVesque#wcto
  82. Add font to CSS h1{ font-family: 'Arbutus Slab', Georgia, serif; } Always add a fallback font ©Jasmine Vesque 2014 @jasmineVesque#wcto
  83. Web Safe Fonts  Arial (Mac OS equivalent is Helvetica)  Times New Roman (Mac OS equivalent is Times)  Verdana  Georgia  Courier  Other popular fonts:  Impact  Lucida Console (Mac OS equivalent is Monaco)  Lucida Sans (Mac OS equivalent is Lucida Grande)  Palatino  Tahoma (Mac OS equivalent is Geneva)  Comic Sans  Trebuchet MS http://cssfontstack.com/ ©Jasmine Vesque 2014 @jasmineVesque#wcto
  84. Fonts Used in this Presentation Headings: Chunk Five Roman http://www.theleagueofmoveabletype.com/chunk Body: Franklin Gothic Book https://typekit.com/fonts/franklin-gothic-urw ©Jasmine Vesque 2014 @jasmineVesque#wcto
  85. Thank you! Jasmine Vesque @jasmineVesque jasminevesque.com ©Jasmine Vesque 2014 @jasmineVesque#wcto
  86. Questions? ©Jasmine Vesque 2014 @jasmineVesque#wcto

×