103 Free Typography Ebooks, Tools and Resources

In essence, typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. Typography involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages. It doesn’t ask the designer to draw their own letterforms, but to instead work with typefaces that already exist.

What is typography after all? How should text be structured? And how can the printed page be influenced by good design theories? Here we showcase 103 Free Ebooks, Tools and Resources on Typography to get your creative juices flowing, covering topics such as CSS, finding and using type, online tools, web fonts, combinations and many more.

Books

1. Butterick’s Practical Typography – Matthew Butterick
2. On Web Typography – Jason Santa Maria
3. The Elements of Typographic Style – Online Version – Richard Rutter
4. Practical Typography – Matthew Butterick
5. Combining Typefaces: Free guide to great typography – Tim Brown
6. The Typography Handbook – Kenneth Wang

Required Reading

1. Web Design is 95% Typography – Oliver Reichenstein
2. On Web Typography – Jason Santa Maria
3. Upping Your Type Game – Jessica Hische
4. Why Typography Matters – Max Brody
5. UI is visible. Type is visible. – Mark Boulton

Articles

1. No @font-face Syntax will ever be Bulletproof, Nor Should It Be
2. Font Aliasing, or how to rename a font in CSS
3. The Future of Web Fonts
4. Your Body Text Is Too Small
5. Methods for Controlling Spacing in Web Typography
6. Bold or Italic
7. Webfonts on the Prairie
8. Typography is impossible
9. The New Web Typography
10. Tools And Resources For A More Meaningful Web Typography
11. Better web typography in 13 simple steps
12. Choosing web fonts: 15 expert tips
13. The Good, The Bad And The Great Examples Of Web Typography
14. Web Fonts Performance: Making Pretty, Fast
15. Font Smoothing
16. The State of Web Type
17. Dashes in Web Typography
18. Scale & Rhythm in Typography
19. Typographic Scale
20. The Mathematical Symphony of Typography
21. The Best Free Alternatives to the Most Popular Fonts
22. A History of Typeface Styles & Type Classification
23. 26 digital typography rules for beginners
24. Variable Fonts for Responsive Design
25. Typeface Mechanics
26. Truly Fluid Typography With vh And vw Units
27. Viewport Based Typography
28. Animated Typographic Cheat Sheet
29. Typography for User Interfaces
30. Loading Web Fonts Asynchronously
31. Font-size: An Unexpectedly Complex CSS Property
32. 93 most popular premium fonts alternative Google Fonts

Finding & Using Type

1. Choosing Type and Finding Fonts – Robbie Mason
2. Pairing Typefaces – Mandy Brown
3. Design By Numbers: Typography – Daniel Eden
4. There is no excuse for bad typography on the web. – Joshua Eithun
5. Run Ragged – Mark Boulton
6. Revealing designers’ decisions for all to see – Typ.io
7. 7 Alternatives to Popular Web Typefaces for Better Performance – Katie Kovalcin
8. Selecting Typefaces for Body Text – Tim Brown

CSS

1. Responsive Typography | ARWHD – Charles Peters
2. Fluid Type – Trent Walton
3. Typesetting your CSS Objects – Spiros Martzoukos
4. Aligning type to baseline the right way using SASS – Razvan Onofrei
5. Optimize Legibility – Dmitry Fadeyev
6. Please Stop Fixing Font Smoothing – Dmitry Fadeyev
7. Hyphens, Text Rendering, and Font Feature Settings – Chris Mills
8. There’s more to the CSS rem unit than font sizing – Roman Rudenko
9. Font Sizing Idea – Chris Coyier
10. Minimising Font Downloads – Jake Archibald
11. Loading webfonts with high performance on responsive websites – Adam Beres-Deak

Online Tools

1. Scale & Rhythm
2. Type Set With Me
3. Type Scale
4. FFFFallback – A simple tool for bulletproof web typography.
5. Type.css – A mobile first responsive type scale
6. CSS Font Stack – A complete collection of web safe CSS font stacks and web font CSS.

Purely Visually Stimulating

1. Whitespace – Marcin Wichary
2. Google Web Fonts Typographic Project – Phoebe E

Web Fonts & Web Performance

1. Controlling Font Performance with font-display
2. Lightning Fast Font Loading Techniques
3. Loading webfonts with high performance on responsive websites
4. Font Loading Revisited with Font Events
5. How we use web fonts responsibly, or, avoiding a @font-face-palm
6. Better @font-face with Font Load Events
7. Better webfont loading with using localStorage and providing WOFF2 support
8. Using Web Fonts the Best Way (in 2015)
9. Web Font Loading Patterns
10. Performance and Web Typography – Video

Tools

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

Font Combinations

1. Mixfont
2. Font Combinations
3. Google web fonts in action
4. Beautiful Web Type
5. Top 5 Google Fonts
6. 100 Days of Fonts
7. Google Web Font inspiration in HTML & CSS
8. Google Font Pairing Tool

Talks

1. Web Fonts are Rocket Science
2. Video Screencast – Font Loading with Zach Leatherman