Successfully reported this slideshow.
Typography in Web DesignPresented by Jasmine VesqueWordCamp Ottawa 2013@Jasmine Vesque 2013 @jasmineVesque#wcottawa
A little about me Communications/Marketing/Webmaster Nedlaw Group Forget for a Moment Foundation Co-organizer of WordC...
What is Typography?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Typography is the art andtechnique of arranging type inorder to make language visible.http://en.wikipedia.org/wiki/Typogra...
Why Type Matters@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Web Design is95%Typographyhttp://ia.net/blog/the-web-is-all-about-typography-period/@Jasmine Vesque 2013 @jasmineVesque#wc...
People Still Read“Our 1st responsibility is to our readers.We must help them find, understand, andconnect with the words, ...
Reading Types Scanning (with purpose) Casual reading /Skimming Sustained reading /Engaged reading~ Typographic Web Desi...
Content is King“Our 2nd responsibility is to honour the contentWe have to clarify and share the meaning ofthe texts people...
Great Web Typography@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Typography Basics@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Serif Fonts• Have serifs (little feet)• Good for headings• Traditional@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Garamond@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Times New Roman@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Libre Baskerville@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Old Standard TT@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Sans-SerifSans-Serif• Without serifs• Good for body copy• Modern@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Arial@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Droid Sans@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Open Sans@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Lato@Jasmine Vesque 2013 @jasmineVesque#wcottawa
DisplayDisplay Type• Serif or sans-serif• Best for headings orshort amounts of text@Jasmine Vesque 2013 @jasmineVesque#wco...
Bauhaus 93@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Lobster@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Bangers@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Keania One@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Script/HandwritingScript/Handwriting • Best for headings orshort amounts of text@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Brush Script STD@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Cookie@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Segoe Script@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Sofia@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Things to Consider whenChoosing a Font@Jasmine Vesque 2013 @jasmineVesque#wcottawa
ReadabilityReadability is the ease in which text can beread and understood.http://en.wikipedia.org/wiki/Readability@Jasmin...
UnreadableChocolate bar sugar plum gummies. Macaroontopping powder jelly beans dessert oat cakehalvah. Tiramisu tiramisu d...
ReadableChocolate bar sugar plum gummies.Macaroon topping powder jelly beansdessert oat cake halvah. Tiramisu tiramisudess...
K.I.S.S: Keep it simple, sugar!@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Don’t use all the fonts at once@Jasmine Vesque 2013 @jasmineVesque#wcottawa
One Font for HeadingsOne font for body copy. It can be tempting,once you know how to change the font of yourtext, to chang...
Colour Considerations@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Colour ChoiceEasier to readBlack or dark text on a whiteor light background isstatistically easier to read.Harder to readW...
Some things are just wrongSome colour combinations are just too painfulto look at!@Jasmine Vesque 2013 @jasmineVesque#wcot...
Aesthetics and EmotionsDoes the font convey the rightmessage?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Fonts have personality@Jasmine Vesque 2013 @jasmineVesque#wcottawa
They can be happy@Jasmine Vesque 2013 @jasmineVesque#wcottawa
or scared@Jasmine Vesque 2013 @jasmineVesque#wcottawa
They can be elegant@Jasmine Vesque 2013 @jasmineVesque#wcottawa
and refined@Jasmine Vesque 2013 @jasmineVesque#wcottawa
or rebellious@Jasmine Vesque 2013 @jasmineVesque#wcottawa
grungy@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Metallic@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Type can represent order@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Technology@Jasmine Vesque 2013 @jasmineVesque#wcottawa
or a bygone era@Jasmine Vesque 2013 @jasmineVesque#wcottawa
However… Aesthetics and emotional associations aresocial constructs No font can perfectly convey the associatedemotion ...
Current Typography Trends@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Really Big Text@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Handwritten Type@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Slab-Serif Font@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Multi – Type@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Vintage Revival@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Simplified Content andTypography@Jasmine Vesque 2013 @jasmineVesque#wcottawa
How to display fonts on your site?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Fonts as a Service google.com/fonts/ fontsquirrel.com/ typekit.com/ ($) fontdeck.com/ ($) and others@Jasmine Vesque 2...
Built into Your Theme@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Plugins@Jasmine Vesque 2013 @jasmineVesque#wcottawa
WP Google Fontshttp://wordpress.org/extend/plugins/wp-google-fonts/@Jasmine Vesque 2013 @jasmineVesque#wcottawa
FontMeisterhttp://wordpress.org/extend/plugins/fontmeister/#wcottawa @jasmineVesque@Jasmine Vesque 2013
Typekit Fonts for WordPress@Jasmine Vesque 2013 @jasmineVesque#wcottawahttp://wordpress.org/extend/plugins/typekit-fonts-f...
How to use Google Fonts@Jasmine Vesque 2013 @jasmineVesque#wcottawa
google.com/fonts/@Jasmine Vesque 2013 @jasmineVesque#wcottawaQuick-use
Grab the Code@Jasmine Vesque 2013 @jasmineVesque#wcottawa
functions.phpfunction load_fonts() {wp_register_style( googleFonts,http://fonts.googleapis.com/css?family=Arbutus+Slab);wp...
Add font to CSSh1{font-family: Arbutus Slab, Georgia, serif;}Always add a fallback font@Jasmine Vesque 2013 @jasmineVesque...
Web Safe Fonts Arial (Mac OS equivalent is Helvetica) Times New Roman (Mac OS equivalent is Times) Verdana Georgia Co...
Fonts Used in this PresentationHeadings: Chunk Five Romanhttp://www.theleagueofmoveabletype.com/chunkBody: Franklin Gothic...
Thank you!Jasmine Vesque@jasmineVesque@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Questions?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
Typography in Web Design
Typography in Web Design
Typography in Web Design
Typography in Web Design
Typography in Web Design
Typography in Web Design
Typography in Web Design
Upcoming SlideShare
Loading in …5
×

Typography in Web Design

2,783 views

Published on

I delivered this presentation at WordCamp Ottawa, April 27, 2013.

Typography is an integral part of web design. No matter how fancy or minimalist your website design, the text on your site needs to get your message across. How the text appears is just as important as the words themselves.

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

Published in: Design, Technology

Typography in Web Design

  1. 1. Typography in Web DesignPresented by Jasmine VesqueWordCamp Ottawa 2013@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  2. 2. A little about me Communications/Marketing/Webmaster Nedlaw Group Forget for a Moment Foundation Co-organizer of WordCamp Ottawa 2013 Social Media Junkie: @jasmineVesque@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  3. 3. What is Typography?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  4. 4. Typography is the art andtechnique of arranging type inorder to make language visible.http://en.wikipedia.org/wiki/Typography@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  5. 5. Why Type Matters@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  6. 6. Web Design is95%Typographyhttp://ia.net/blog/the-web-is-all-about-typography-period/@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  7. 7. People Still Read“Our 1st responsibility is to our readers.We must help them find, understand, andconnect with the words, ideas, and informationthey seek.”~ Typographic Web Design by Laura Franz@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  8. 8. Reading Types Scanning (with purpose) Casual reading /Skimming Sustained reading /Engaged reading~ Typographic Web Design by Laura Franz@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  9. 9. Content is King“Our 2nd responsibility is to honour the contentWe have to clarify and share the meaning ofthe texts people read.”~ Typographic Web Design by Laura Franz@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  10. 10. Great Web Typography@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  11. 11. Typography Basics@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  12. 12. Serif Fonts• Have serifs (little feet)• Good for headings• Traditional@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  13. 13. Garamond@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  14. 14. Times New Roman@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  15. 15. Libre Baskerville@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  16. 16. Old Standard TT@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  17. 17. Sans-SerifSans-Serif• Without serifs• Good for body copy• Modern@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  18. 18. Arial@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  19. 19. Droid Sans@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  20. 20. Open Sans@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  21. 21. Lato@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  22. 22. DisplayDisplay Type• Serif or sans-serif• Best for headings orshort amounts of text@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  23. 23. Bauhaus 93@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  24. 24. Lobster@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  25. 25. Bangers@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  26. 26. Keania One@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  27. 27. Script/HandwritingScript/Handwriting • Best for headings orshort amounts of text@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  28. 28. Brush Script STD@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  29. 29. Cookie@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  30. 30. Segoe Script@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  31. 31. Sofia@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  32. 32. Things to Consider whenChoosing a Font@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  33. 33. ReadabilityReadability is the ease in which text can beread and understood.http://en.wikipedia.org/wiki/Readability@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  34. 34. UnreadableChocolate bar sugar plum gummies. Macaroontopping powder jelly beans dessert oat cakehalvah. Tiramisu tiramisu dessert brownie. Cookielemon drops carrot cake dessert. I love piechocolate bar candy. Biscuit biscuit macaroonbiscuit jujubes. Cotton candy I love sesame snapsbear claw sesame snaps. Chocolate cake puddingcandy canes powder. Faworki fruitcake puddingliquorice halvah dessert.@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  35. 35. ReadableChocolate bar sugar plum gummies.Macaroon topping powder jelly beansdessert oat cake halvah. Tiramisu tiramisudessert brownie. Cookie lemon drops carrotcake dessert. I love pie chocolate bar candy.Biscuit biscuit macaroon biscuit jujubes.Cotton candy I love sesame snaps bear clawsesame snaps. Chocolate cake puddingcandy canes powder.http://cupcakeipsum.com/@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  36. 36. K.I.S.S: Keep it simple, sugar!@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  37. 37. Don’t use all the fonts at once@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  38. 38. One Font for HeadingsOne font for body copy. It can be tempting,once you know how to change the font of yourtext, to change it all the time. While there is nominimum or maximum number of fonts thatlook good on a Web page, the more fonts youhave the more confusing and ugly your pagewill look.If you have any ads on your pages, youinstantly have a new place where fonts will be.@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  39. 39. Colour Considerations@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  40. 40. Colour ChoiceEasier to readBlack or dark text on a whiteor light background isstatistically easier to read.Harder to readWhite or light text on a blackor dark background isstatistically more difficult toread@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  41. 41. Some things are just wrongSome colour combinations are just too painfulto look at!@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  42. 42. Aesthetics and EmotionsDoes the font convey the rightmessage?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  43. 43. Fonts have personality@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  44. 44. They can be happy@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  45. 45. or scared@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  46. 46. They can be elegant@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  47. 47. and refined@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  48. 48. or rebellious@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  49. 49. grungy@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  50. 50. Metallic@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  51. 51. Type can represent order@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  52. 52. Technology@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  53. 53. or a bygone era@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  54. 54. However… Aesthetics and emotional associations aresocial constructs No font can perfectly convey the associatedemotion Fonts play a supporting role to your words,and should never shout, “Look at me! I amripe with meaning!”~ Typographic Web Design by Laura Franz@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  55. 55. Current Typography Trends@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  56. 56. Really Big Text@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  57. 57. Handwritten Type@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  58. 58. Slab-Serif Font@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  59. 59. Multi – Type@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  60. 60. Vintage Revival@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  61. 61. Simplified Content andTypography@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  62. 62. How to display fonts on your site?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  63. 63. Fonts as a Service google.com/fonts/ fontsquirrel.com/ typekit.com/ ($) fontdeck.com/ ($) and others@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  64. 64. Built into Your Theme@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  65. 65. Plugins@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  66. 66. WP Google Fontshttp://wordpress.org/extend/plugins/wp-google-fonts/@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  67. 67. FontMeisterhttp://wordpress.org/extend/plugins/fontmeister/#wcottawa @jasmineVesque@Jasmine Vesque 2013
  68. 68. Typekit Fonts for WordPress@Jasmine Vesque 2013 @jasmineVesque#wcottawahttp://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/
  69. 69. How to use Google Fonts@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  70. 70. google.com/fonts/@Jasmine Vesque 2013 @jasmineVesque#wcottawaQuick-use
  71. 71. Grab the Code@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  72. 72. functions.phpfunction 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 2013 @jasmineVesque#wcottawa
  73. 73. Add font to CSSh1{font-family: Arbutus Slab, Georgia, serif;}Always add a fallback font@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  74. 74. 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 MShttp://cssfontstack.com/@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  75. 75. Fonts Used in this PresentationHeadings: Chunk Five Romanhttp://www.theleagueofmoveabletype.com/chunkBody: Franklin Gothic Bookhttps://typekit.com/fonts/franklin-gothic-urw@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  76. 76. Thank you!Jasmine Vesque@jasmineVesque@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  77. 77. Questions?@Jasmine Vesque 2013 @jasmineVesque#wcottawa

×