Web Typography

repo: deanhume/typography
category: Front-End Development related: Css · Fonts

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](https://www.creativebloq.com/web-design/choose-web-fonts-1233034)
• The Good, The Bad And The Great Examples Of Web Typography
• [Web Fonts Performance: Making Pretty, Fast](https://www.igvita.com/2012/09/12/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](https://alistapart.com/blog/post/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](https://calendar.perfplanet.com/2016/loading-web-fonts-asynchronously/)
• Font-size: An Unexpectedly Complex CSS Property
• [93 most popular premium fonts alternative google fonts](https://designtheway.com/most-used-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](https://www.filamentgroup.com/lab/font-loading.html)
• 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)](https://helloanselm.com/writings/using-webfonts-in-2015)
• Web Font Loading Patterns
• Performance and Web Typography - Video
• [Tips for balancing web fonts & page load](https://frontendnews.io/editions/2018-07-25-tips-for-loading-web-fonts)
• [Loading Web Fonts Asynchronously](http://calendar.perfplanet.com/2016/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](https://github.com/jkroso/flowtype)
• 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](https://github.com/ladjs/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](https://github.com/forwardemail/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](http://femmebot.github.io/google-type/)
• Beautiful Web Type
• Google Font Combinations
• Top 5 Google Fonts
• 100 Days of Fonts
• Sessions with Typography
• [Google Web Font inspiration in HTML & CSS](http://tobiasahlin.com/typesource/)
• Google Font Pairing Tool

Talks

• [Web Fonts are Rocket Science](https://www.filamentgroup.com/lab/rocket-science.html)
• Video Screencast - Font Loading with Zach Leatherman

Featured

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

License