Awesome Web Typography
A curated collection of awesome web typography articles.
Articles
- No @font-face Syntax will ever be Bulletproof, Nor Should It Be
- 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
- Better @font-face with Font Load Events
- 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.
- Typeset.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
- Golden Rules of Typography on the Web
- 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.