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.
Print vs WebTakes about 25% longer to read on the webPrinto Paragraphs = Serifso Headline = Sans-SerifsWebo Paragraphs = Sans-Serifso Headline = Serifs
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)
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.
Focus on the messageTHE BEST FONT CHOICES ARE ONESWHERE READERS DO NOT NOTICETHE FONTBUT THE MESSAGE
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.
ToolsChrome Web Font Previewer Extensionhttp://fontgameapp.com/typetester.orghttp://font-combinator.com/http://wordmark.it
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
Spacing & CSSKerningBetween two individualletters (No CSS)TrackingCSS: letter-spacing: 1px;LeadingCSS: line-height: 1.5;
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/
Thank you!Created for the Iowa Web Devs Meetuphttp://www.meetup.com/iowawebdevs/Continue the discussion on Twitter@carlsonleahk and @breahnag