Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fluid Typography with Scale Multipliers

Solution: Fluid Typography with Scale Multipliers

Let’s use CSS variables and scale multipliers to apply fluid typography that proportionally sizes headings and paragraphs across viewport widths.

We'll cover the following...

Problem description

Given a section containing <h2> and <p>, write CSS rules to:

  1. Define CSS custom properties --min-root (16px) and --max-root (20px).

  2. Compute --fluid-root using clamp() to ...