Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fluid Heading Letter-Spacing

Solution: Fluid Heading Letter-Spacing

Let’s implement fluid letter-spacing for headings by interpolating between min and max values using CSS variables and viewport width.

We'll cover the following...

Problem description

Given an <h1> element, write CSS rules to:

  1. Define CSS custom properties --min-letter-spacing (-0.5px) and --max-letter-spacing (1px). ...