Awesome Web Typography

A curated collection of awesome web typography articles.

Articles

• [No @font-face Syntax will ever be Bulletproof, Nor Should It Be](https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/)
• Font Aliasing, or how to rename a font in CSS
• The Future of Web Fonts
• Your Body Text Is Too Small
• Methods for Controlling Spacing in Web Typography
• Bold or Italic
• Webfonts on the Prairie
• Typography is impossible
• The New Web Typography
• Tools And Resources For A More Meaningful Web Typography
• A more modern scale for Web Typography
• Better web typography in 13 simple steps
• Choosing web fonts: 15 expert tips
• The Good, The Bad And The Great Examples Of Web Typography
• Web Fonts Performance: Making Pretty, Fast
• Font Smoothing
• The State of Web Type
• Dashes in Web Typography
• Scale & Rhythm in Typography
• Typographic Scale
• The Mathematical Symphony of Typography
• The Best Free Alternatives to the Most Popular Fonts
• A History of Typeface Styles & Type Classification
• 26 digital typography rules for beginners
• Variable Fonts for Responsive Design
• Typeface Mechanics
• Truly Fluid Typography With vh And vw Units
• Viewport Based Typography
• Animated Typographic Cheat Sheet
• Typography for User Interfaces
• Loading Web Fonts Asynchronously
• Font-size: An Unexpectedly Complex CSS Property -93 most popular premium fonts alternative google fonts

Web Fonts & Web Performance

• Controlling Font Performance with font-display
• Lightning Fast Font Loading Techniques
• Loading webfonts with high performance on responsive websites
• Font Loading Revisited with Font Events
• [How we use web fonts responsibly, or, avoiding a @font-face-palm](https://www.filamentgroup.com/lab/font-loading.html)
• [Better @font-face with Font Load Events](https://dev.opera.com/articles/better-font-face/)
• Better webfont loading with using localStorage and providing WOFF2 support
• Using Web Fonts the Best Way (in 2015)
• Web Font Loading Patterns
• Performance and Web Typography - Video
• Tips for balancing web fonts & page load

Tools

• The State of Web Type - Up-to-date data on support for type and typographic features on the web
• A simple plugin to keep font-size in proportion with it’s containers size
• Type Rendering Mix
• Web Font Loader
• Preventing the Performance Hit from Custom Fonts
• Web Font Optimization
• Font Face and Performance
• Normalize-Opentype.css - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
• Type­set.js - A typographic pre-processor for your html which uses zero client-side JavaScript
• brick.im
• Typebase.css
• Google WebFonts Helper
• Using Custom Fonts in Emails

Books

• On Web Typography
• The Elements of Typographic Style
• The Elements of Typographic Style - Online Version
• Practical Typography
• Combining Typefaces: Free guide to great typography
• The Typography Handbook

Font Combinations

• Mixfont
• Font Combinations
• Google web fonts in action
• Beautiful Web Type
• Google Font Combinations
• Top 5 Google Fonts
• 100 Days of Fonts
• Sessions with Typography
• Google Web Font inspiration in HTML & CSS
• Google Font Pairing Tool

Talks

• Web Fonts are Rocket Science
• Video Screencast - Font Loading with Zach Leatherman

Featured

• This site was featured on the Device Wall at Google I/O 2015.

License