Problem description

Create a CSS typographic scale for <h1>, <h2>, <h3>, and <p> that:

1. Defines CSS custom properties:

   1. --min-root (16px) and --max-root (24px)

   2. Scale multiplier properties: --scale-h1 (2.5), --scale-h2 (2), --scale-h3 (1.5), and --scale-p (1)

2. Computes a fluid root font size --fluid-root using clamp() and a linear interpolation formula for viewport widths between 320px and 1920px.

3. Applies fluid sizes via rem units:

   1. h1 { font-size: calc(var(--fluid-root) * var(--scale-h1)); }

   2. Similarly for h2, h3, and p.

4. Implements a legacy fallback inside an @supports not (font-size: clamp(1rem, 1vw + 1rem, 2rem)) block that assigns static font-size values equal to the minimum sizes multiplied by each scale multiplier.

5. Ensures all rules appear in an external styles.css file.

Goal

Demonstrate advanced CSS techniques by building a fluid, modular type system with backwards compatibility.

Constraints

• The solution must use an external stylesheet named styles.css.

• Do not use JavaScript.

• Support modern browsers with clamp() and legacy browsers via feature queries.

• Viewport range should be between 320px and 1920px.

• Custom properties should be as follows:

  • --min-root: 16px; --max-root: 24px;

  • --scale-h1: 2.5; --scale-h2: 2; --scale-h3: 1.5; --scale-p: 1;

• Fluid interpolation must use a calc() formula inside clamp().

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.