Web Typography 101
- 1. Web Typography 101 by Leah Carlson & Breahna Galbreath Twitter: @carlsonleahk & @breahnag
- 2. Web Typography Historically • the art or process of printing with type. • the work of setting and arranging types and printing from them. Web Typography • typographic elements applied to the web. Including fonts, font pairing, kerning, tracking, and leading.
- 3. Print vs Web Takes about 25% longer to read on the web Print o Paragraphs = Serifs o Headline = Sans-Serifs Web o Paragraphs = Sans-Serifs o Headline = Serifs
- 4. Serif vs Sans: The Final Battle
- 5. Original Web Fonts • Original web fonts o both on Windows and Mac o pair well together • 26 web safe fonts o moving towards Google Web Fonts & Web Font Kits (Typekit)
- 6. How to choose? • How to know what fonts to use o Creative and personal vs Corporate and professional looks (show examples) o mention serif vs sans serif here again and how that ties into choosing font styles o In choosing fonts make sure there’s a bold, italic, regular options at a minimum. semi-bold and light are also nice to have. Open Sans is a nice standard.
- 7. Focus on the message THE BEST FONT CHOICES ARE ONES WHERE READERS DO NOT NOTICE THE FONT BUT THE MESSAGE
- 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.
- 10. Tools Chrome Web Font Previewer Extension http://fontgameapp.com/ typetester.org http://font-combinator.com/ http://wordmark.it
- 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 nature Pixels (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 devices Points (pt): • Traditionally used in print • One point is equal to 1/72 of an inch • Like pixel, fixed-size units and cannot scale in size Percent (%): • Like "em" • Current font-size is equal to 100% (i.e. 12pt = 100%) • Text is fully scalable for mobile and accessibility
- 12. Spacing & CSS Kerning Between two individual letters (No CSS) Tracking CSS: letter-spacing: 1px; Leading CSS: line-height: 1.5;
- 14. Thank you! Created for the Iowa Web Devs Meetup http://www.meetup.com/iowawebdevs/ Continue the discussion on Twitter @carlsonleahk and @breahnag