Advanced Fluid Typography (and more)
summary
A practical method for true fluid typography using calc and viewport units replaces many breakpoints with continuous scaling, demonstrated with concrete formulas like 18px + 3vw => breakpoint at 600px and a max of 24px at 800px. Techniques include setting root REMs, Sass mixins that emit the equations and media queries, fluid modular scales, responsive SVG length attributes and a fluid vertical rhythm. Future work mentions variable fonts interpolation and a W3C GitHub proposal for a native CSS interpolation function.
AI-written summary · about
chapters (4)
- 0:00Start
- 0:37Advanced Fluid Typography (and more)
- 1:11An alternative approach to Responsive Design
- 10:49Fluid Modular Scales
related talks
16mFluid typography
37mResponsive Typography Techniques
32mModern Typographic Systems With Variable Fonts
36mVariable Fonts and Dynamic Typography with CSS
49mDynamic Typography with Variable Fonts
20mDynamic Typographic Systems with Variable Fonts
45mVariable Fonts and Responsive Typography
51mWeb Design Engineering With the New CSS