Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Viewport-Based Fluid Typography with Height Constraint

Solution: Viewport-Based Fluid Typography with Height Constraint

Let’s implement viewport-based fluid typography that scales with both width and height while constraining extremes using nested clamp() logic.

We'll cover the following...

Problem description

Given a full-screen <section class="intro"> containing an <h1> and a <p>, write CSS rules to:

  1. Define CSS custom properties:

    1. --min-font: 18px

    2. --max-font: 48px

    3. --min-vw: 320px

    4. --max-vw: 1920px

    5. --min-vh: 480px ...