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

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

74. Fonts as a Service  google.com/fonts/  fontsquirrel.com/  typekit.com/ ($)  fontdeck.com/ ($)  and others ©Jasmine Vesque 2014 @jasmineVesque#wcto

79. Typekit Fonts for WordPress ©Jasmine Vesque 2014 @jasmineVesque#wcto http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/

83. 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

84. Add font to CSS h1{ font-family: 'Arbutus Slab', Georgia, serif; } Always add a fallback font ©Jasmine Vesque 2014 @jasmineVesque#wcto

85. 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

86. 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

Typography in Web Design (WordCamp Toronto 2014)

Typography in Web Design (WordCamp Toronto 2014)

Recommended

More Related Content

Recently uploaded

Recently uploaded(20)

Featured

Featured(20)

Typography in Web Design (WordCamp Toronto 2014)