Advanced Web Typography

on YouTube ↗42m

" summary

Claim: good web type reduces cognitive load and is now practical. Evidence: browser default is 16px default, fonts render differently across OS rasterizers so test on Windows and mac, and font loading behavior flips around a 3s threshold (FOUT vs FOIT). Tools and tactics: use rems (root ems) with a polyfill for old IE, declare fonts with font-face unicode-range, subset and cache fonts, consider Adobe Blank or base64-embedding to reduce flashes, and check support on caniuse.com.

AI-written summary · about

" chapters (32)

1. 0:00Introduction
2. 1:12Typography
3. 2:58Scribes
4. 4:42Control
5. 6:58Type Size
6. 11:51Polyfill
7. 12:31Tape
8. 13:03Font Families
9. 15:03Fontface
10. 15:54Unicode
11. 16:41Fonts
12. 17:33The Flaw
13. 20:50Adobe Blank
14. 22:04Caching
15. 22:29New spec
16. 22:56Tools
17. 23:48Web Fonts
18. 25:08Windows
19. 25:54Test
20. 26:29Literatures
21. 27:21Numerics
22. 27:46Types of Numbers
23. 29:11Flat Future Settings
24. 29:42LMT
25. 30:10Mainstream
26. 30:39Free Enhancements
27. 31:13Go Make Stuff
28. 31:35Different Fonts
29. 32:44Critical Pieces
30. 34:57Content Taking Last Space
31. 38:36Finding Fonts
32. 39:05Type Selection

" related talks

• 46mResponsive TypographyJason Pamental · FITC Web Unleashed 2014
• 48mWeb TypographyRichard Rutter · CSS Day + UX Special 2018
• 51mTypography on the WebJohn Daggett · CSS Day 2015
• 27mEfficient Web Type, c. 1556Kenneth Ormandy · CSSConf Australia 2015
• 47mYou can save Web TypographyOliver Schöndorfer · International JavaScript Conference Munich 2017
• 47mYou Can Save Web TypographyOliver Schöndorfer · iJS 2018 Spring
• 45mOnce Upon a Drop Cap: A Look at Typography as UXJason Pamental · Web Unleashed 2016
• 45mTypography and accessibilityMarie Guillaumet · DevFest Nantes 2018