Responsive Typography

on YouTube ↗46m

" summary

Claim: make web type responsive by controlling load, fallbacks, scale and micro‑typography. Uses Google Web Fonts/Typekit via the web font loader, noscript fallbacks and tuned CSS to avoid FOUT. Shows a real size cost dropping from 449k to 120k, notes Opera Mini’s continued reach (350 million devices) and the 5‑second abandonment risk. Demonstrates widow‑fixing (widow tamer), OpenType features, font‑smoothing tweaks and a Vanity Fair recreation built quickly that actually reads and performs.

AI-written summary · about

" chapters (9)

1. 0:00Introduction
2. 3:46Art and Science
3. 7:00Why Web Typography Matters
4. 11:20Designing for Context
5. 15:00Performance Considerations
6. 19:44Progressive Enhancement
7. 26:12Proportional Design
8. 29:10Adding Polish and Detail
9. 43:57Conclusion and Q&A

" related talks

• 47mYou can save Web TypographyOliver Schöndorfer · International JavaScript Conference Munich 2017
• 42mAdvanced Web TypographyIdan Gazit · Write the Docs Prague 2014
• 37mResponsive Typography TechniquesVal Head · CSSConf US 2013
• 45mOnce Upon a Drop Cap: A Look at Typography as UXJason Pamental · Web Unleashed 2016
• 49mDynamic Typography with Variable FontsJason Pamental · beyond tellerrand Berlin 2019
• 45mVariable Fonts and Responsive TypographyMandy Michael · You Gotta Love Frontend 2020
• 46mRESPONSIBLE RESPONSIVE TYPOGRAPHY: A CRASH-COURSE ON VARIABLE FONTS AND ACCESSIBILITYDamien Senger · jsday 2020
• 27mEfficient Web Type, c. 1556Kenneth Ormandy · CSSConf Australia 2015