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.

9. Pairing and Comparing

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;

13. Articles and Resources
http://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-typography
http://www.slideshare.net/lauramcmahon1/writing-for-the-web-2-2613
http://www.duncantang.com/blog/1036-serif-vs-sans-final-battle
http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-
typefaces/

14. Thank you!
Created for the Iowa Web Devs Meetup
http://www.meetup.com/iowawebdevs/
Continue the discussion on Twitter
@carlsonleahk and @breahnag