Web Typography 101

326
-1

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
326
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Typography 101

  1. 1. Web Typography 101by Leah Carlson & Breahna GalbreathTwitter: @carlsonleahk & @breahnag
  2. 2. Web TypographyHistorically• the art or process of printing with type.• the work of setting and arranging types and printingfrom them.Web Typography• typographic elements applied to the web. Includingfonts, font pairing, kerning, tracking, and leading.
  3. 3. Print vs WebTakes about 25% longer to read on the webPrinto Paragraphs = Serifso Headline = Sans-SerifsWebo Paragraphs = Sans-Serifso Headline = Serifs
  4. 4. Serif vs Sans:The Final Battle
  5. 5. Original Web Fonts• Original web fontso both on Windowsand Maco pair well together• 26 web safe fontso moving towardsGoogle Web Fonts &Web Font Kits(Typekit)
  6. 6. How to choose?• How to know what fonts to useo Creative and personal vs Corporate andprofessional looks (show examples)o mention serif vs sans serif here again and how thatties into choosing font styleso In choosing fonts make sure there’s a bold, italic,regular options at a minimum. semi-bold and lightare also nice to have. Open Sans is a nice standard.
  7. 7. Focus on the messageTHE BEST FONT CHOICES ARE ONESWHERE READERS DO NOT NOTICETHE FONTBUT THE MESSAGE
  8. 8. Where to find fonts?• Google Web Fonts• Typekit (paid unless you have 1 personal site)• Font Squirrel• DaFont (some require payment or contacting designer)• http://www.linotype.com/ (paid)• http://www.myfonts.com/Note: Before you download, be sure to read the licensing.
  9. 9. Pairing and Comparing
  10. 10. ToolsChrome Web Font Previewer Extensionhttp://fontgameapp.com/typetester.orghttp://font-combinator.com/http://wordmark.it
  11. 11. Meet the Units"Ems" (em):• Scalable unit used in web document media• Equal to the current font-size. 1em is equal to 12pt• Popular due to scalability and mobile-device-friendly naturePixels (px):• Fix-sized units used in screen media• One pixel is equal to one dot on the computer screen• Does not scale upward for visually-impaired readers or downward to fit mobile devicesPoints (pt):• Traditionally used in print• One point is equal to 1/72 of an inch• Like pixel, fixed-size units and cannot scale in sizePercent (%):• Like "em"• Current font-size is equal to 100% (i.e. 12pt = 100%)• Text is fully scalable for mobile and accessibility
  12. 12. Spacing & CSSKerningBetween two individualletters (No CSS)TrackingCSS: letter-spacing: 1px;LeadingCSS: line-height: 1.5;
  13. 13. Articles and Resourceshttp://blog.typekit.com/2013/03/28/setting-type-for-user-interfaces/http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/http://fontgameapp.com/http://alistapart.com/article/on-web-typographyhttp://www.slideshare.net/lauramcmahon1/writing-for-the-web-2-2613http://www.duncantang.com/blog/1036-serif-vs-sans-final-battlehttp://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
  14. 14. Thank you!Created for the Iowa Web Devs Meetuphttp://www.meetup.com/iowawebdevs/Continue the discussion on Twitter@carlsonleahk and @breahnag

×