Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Typography in Web Design

2,148

Published on

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

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
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,148
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Typography in Web DesignPresented by Jasmine VesqueWordCamp Ottawa 2013@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. What is Typography?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. Why Type Matters@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 6. Web Design is95%Typographyhttp://ia.net/blog/the-web-is-all-about-typography-period/@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. Reading Types Scanning (with purpose) Casual reading /Skimming Sustained reading /Engaged reading~ Typographic Web Design by Laura Franz@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. Great Web Typography@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 11. Typography Basics@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 12. Serif Fonts• Have serifs (little feet)• Good for headings• Traditional@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 13. Garamond@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 14. Times New Roman@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 15. Libre Baskerville@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 16. Old Standard TT@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 17. Sans-SerifSans-Serif• Without serifs• Good for body copy• Modern@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 18. Arial@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 19. Droid Sans@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 20. Open Sans@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 21. Lato@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 22. DisplayDisplay Type• Serif or sans-serif• Best for headings orshort amounts of text@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 23. Bauhaus 93@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 24. Lobster@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 25. Bangers@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 26. Keania One@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 27. Script/HandwritingScript/Handwriting • Best for headings orshort amounts of text@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 28. Brush Script STD@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 29. Cookie@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 30. Segoe Script@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 31. Sofia@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 32. Things to Consider whenChoosing a Font@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 33. ReadabilityReadability is the ease in which text can beread and understood.http://en.wikipedia.org/wiki/Readability@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. 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. K.I.S.S: Keep it simple, sugar!@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 37. Don’t use all the fonts at once@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. Colour Considerations@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. Some things are just wrongSome colour combinations are just too painfulto look at!@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 42. Aesthetics and EmotionsDoes the font convey the rightmessage?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 43. Fonts have personality@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 44. They can be happy@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 45. or scared@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 46. They can be elegant@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 47. and refined@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 48. or rebellious@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 49. grungy@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 50. Metallic@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 51. Type can represent order@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 52. Technology@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 53. or a bygone era@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. Current Typography Trends@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 56. Really Big Text@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 57. Handwritten Type@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 58. Slab-Serif Font@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 59. Multi – Type@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 60. Vintage Revival@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 61. Simplified Content andTypography@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 62. How to display fonts on your site?@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 63. Fonts as a Service google.com/fonts/ fontsquirrel.com/ typekit.com/ ($) fontdeck.com/ ($) and others@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 64. Built into Your Theme@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 65. Plugins@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 66. WP Google Fontshttp://wordpress.org/extend/plugins/wp-google-fonts/@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 67. FontMeisterhttp://wordpress.org/extend/plugins/fontmeister/#wcottawa @jasmineVesque@Jasmine Vesque 2013
  • 68. Typekit Fonts for WordPress@Jasmine Vesque 2013 @jasmineVesque#wcottawahttp://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/
  • 69. How to use Google Fonts@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 70. google.com/fonts/@Jasmine Vesque 2013 @jasmineVesque#wcottawaQuick-use
  • 71. Grab the Code@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. Add font to CSSh1{font-family: Arbutus Slab, Georgia, serif;}Always add a fallback font@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 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. 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. Thank you!Jasmine Vesque@jasmineVesque@Jasmine Vesque 2013 @jasmineVesque#wcottawa
  • 77. Questions?@Jasmine Vesque 2013 @jasmineVesque#wcottawa

×