Fluid typography
summary
Shows how to compute a pixel-perfect fluid scale: pick a minimum and maximum font size and the corresponding viewport widths, then use viewport units plus calc() to linearly interpolate font-size so each viewport pixel maps to a predictable font value. Implementation uses a capped fluid value with media-query fallbacks for the min/max, a small Sass mixin to generate the math, and examples that keep headings to a target line count and ~70 characters per line. Notes Safari quirks with some calc/vw combos.
AI-written summary · about
chapters (7)
- 0:00Introduction
- 0:45What is fluid typography
- 3:20Problems with breakpoints
- 5:06Viewport units and calc
- 8:45Smooth interpolation solution
- 12:40Benefits of fluid typography
- 14:07Summary and Q&A
related talks
18mAdvanced Fluid Typography (and more)
56mDirty Little Tricks From The Dark Corners Of Front-End
37mResponsive Typography Techniques
48mWeb Typography
32mModern Typographic Systems With Variable Fonts
30mVariable Fonts and the Flexible Nature of Screens and Devices
36mVariable Fonts and Dynamic Typography with CSS
29mVery Responsive Typography with Variable Fonts