Awesome Web Typography
A curated collection of resources and projects focused on Web Typography.
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
- Font Aliasing, or How to Rename a Font in CSS
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
- Loading Web Fonts Asynchronously
- Font Aliasing, or How to Rename a Font in CSS
- A Collection of Web Font Loading Recipes
- No @font-face Syntax will ever be Bulletproof, Nor Should It Be
- Performance and Web Typography
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
- FontsWiki - Searchable font catalog with free alternatives and Fonts-in-Use references for designers and developers.
- What Font Finder - Identify a font from an image in the browser, with a confidence score and no upload.
- Using Custom Fonts in Emails
- Typographist — Modular scale calculator API with config validation
- Font Face Observer is a fast and simple web font loader
- MixFont A Modern Font Generator
- How to use 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
Featured
- This site was featured on the Device Wall at Google I/O 2015.
License
