Typography Matters
โข
2 likesโข719 views
Basic rules for using typography on the web. Given at WordCamp Austin 2014.
Recommended
More Related Content
Similar to Typography Matters
Similar to Typography Matters (20)
More from Joel G Goodman
More from Joel G Goodman (6)
Recently uploaded
Recently uploaded (20)
Typography Matters
- 1. @joelgoodman
- 2. hi, iโm JOEL G GOODMAN @joelgoodman joelgoodman.co
- 3. I own a boutique web firm @braverymedia braverymedia.co BRAVERY TRANSMEDIA
- 5. remember when... ๏ฃฟ Arial Comic Sans MS Courier New Georgia Tahoma Times New Roman Trebuchet MS Verdana Symbol & http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
- 6. life was so simple with 9 fonts to worry about
- 8. today... Google: 632 families Adobe Edge Fonts: 502 families
- 9. and thatโs just the free services!
- 10. FEELINGS
- 11. design for emotion... SHAPE WEIGHT STYLE CLASSIFICATION
- 12. classifications... SERIF SANS-SERIF SCRIPT SLAB SERIF DISPLAY
- 13. how do you choose?
- 15. rules... Donโt use more than 2 di๏ฌerent fonts in any given design. R UL E OF THU MB
- 16. rules... Donโt combine the same font-styles. SE COND R UL E OF THU MB
- 17. rules guidelines BUTT E RI CKโS PR ACTI CAL TY POGR A PHY Mixing fonts is like mixing patterned shirts and tiesโthere arenโt immutable rules. Some people have a knack for it; some donโt.
- 18. font styles... Serif Font Also Serif Font
- 19. font styles... Sans-serif Font Also Sans-serif Font
- 20. Mixed Serif Fonts Messenger bag fingerstache dolor vinyl , you probably haven't heard of them banjo odio jean shorts proident tempor artisan. Kale chips salvia high life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar commodo whatever iphone. Pork belly ad artisan literally, whatever wes anderson in etsy banksy non. Nulla ullamco portland duis. Pug flannel pickled, whatever master cleanse non ke๏ฌyeh. Umami viral tru๏ฌaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure godard. Proident pariatur terry richardson actually dolor helvetica. Anim messenger bag YOLO, retro proident +1 organic neutra tempor odio american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth chillwave veniam wolf typewriter cillum. Est occaecat semiotics, chambray do reprehenderit quinoa tonx o๏ฌcia
- 21. Mixed Sans-serif Fonts Messenger bag ๏ฌngerstache dolor vinyl , you probably haven't heard of them banjo odio jean shorts proident tempor artisan. Kale chips salvia high life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar commodo whatever iphone. Pork belly ad artisan literally, whatever wes anderson in etsy banksy non. Nulla ullamco portland duis. Pug ๏ฌannel pickled, whatever master cleanse non ke๏ฌyeh. Umami viral tru๏ฌaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure godard. Proident pariatur terry richardson actually dolor helvetica. Anim messenger bag YOLO, retro proident +1 organic neutra tempor odio american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth
- 22. This works, though! Messenger bag ๏ฌngerstache dolor vinyl , you probably haven't heard of them banjo odio jean shorts proident tempor artisan. Kale chips salvia high life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar commodo whatever iphone. Pork belly ad artisan literally, whatever wes anderson in etsy banksy non. Nulla ullamco portland duis. Pug ๏ฌannel pickled, whatever master cleanse non ke๏ฌyeh. Umami viral tru๏ฌaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure godard. Proident pariatur terry richardson actually dolor helvetica. Anim messenger bag YOLO, retro proident +1 organic neutra tempor odio american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth
- 23. Using Playfair Display and Source Sans Pro served by Google Fonts
- 24. tip... You can get a lot of mileage out of just one font family. G OOD TO KN OW
- 25. Using Omnes Pro served by Typekit
- 26. Using Open Sans @font-face CSS
- 27. rules... Some fonts are better for headlines than others. Some are better for body text. R UL E OF THU MB
- 31. rules... Use hierarchy to clearly distinguish di๏ฌerent elements in your design. R UL E OF THU MB
- 33. headings should separate sections on the page.
- 34. rules... Adjust your copy line-height to give your text blocks room to breathe. R UL E OF THU MB
- 35. rules... Consider your users. Is your text too small for weak eyes? Is it too big and hard to move your eyes across the page? R UL E OF THU MB
- 36. rules... If you have a large block of text, donโt make the font-size too small. R UL E OF THU MB
- 37. rules... Pay attention to licenses and copyrights. R UL E OF LE GAL ITY
- 38. No, REALLY. Pay attention to licenses and copyrights!!! R UL E OF LE GAL ITY
- 39. licensing options... FREE SERVICES โข Google Webfonts โข Adobe Edge Fontsโฉ PAID SERVICES โข Typekit โข Cloudtype (Hoefler & Co.) โข MyFonts โข Fontdeck โข lots of othersโฆ
- 40. resources... โข thinkingwithtype.com โข practicaltypography.com โข ilovetypography.com โข fontbook.com โข typekit.com โข google.com/fonts โข typecast.com