Elevate Developer Efficiency & build GenAI Application with Amazon Q
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
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;
