Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Multi-Range Fluid Typography with Media Query Overrides

Solution: Multi-Range Fluid Typography with Media Query Overrides

Let’s build a multi-range fluid typography system with media query overrides and modular scales for headings and body text.

We'll cover the following...

Problem description

Given a page with an <h1> and <p>, write CSS rules to:

  1. Define CSS custom properties:

    1. Mobile root font: --min-root-mobile (14px) and --max-root-mobile (18px)

    2. Desktop root font: --min-root-desktop (18px) and --max-root-desktop (24px)

    3. Scale multipliers: --scale-h1 (2.2) and --scale-p (1) ...