{"id":"l-css-3-1","courseId":"css-mastery","lang":"en","kind":"lesson","summary":"Build fluid type and spacing with clamp(), calculate the slope and intercept from two design sizes, and keep text resizable for users who change their font size.","html":"

Waypoint’s hero heading, “Two days of front-end, in Lisbon”, is 48px on the design for a laptop and 28px on the design for a phone. The first implementation had three media queries and the heading jumped between three sizes as you resized. Nobody resizes a window for fun, but they do rotate tablets, split screens and open the page in narrow side panels, and every jump in between looked accidental.

\n

Fluid type replaces the jumps with a straight line between the two designs.

\n

A fluid value is a line

\n

You have two points from the design: at a 20rem (320px) viewport the heading is 1.75rem; at 60rem (960px) it’s 3rem. Between them you want it to grow in proportion; outside them, it should stop. That’s clamp() with a linear preferred value:

\n
type.css
.hero h1 {\n  font-size: clamp(1.75rem, 1.125rem + 3.125vw, 3rem);\n}
\n

The middle value is a straight line, intercept + slope × width. The slope is how much the size changes per unit of width: (3 − 1.75) ÷ (60 − 20) = 0.03125, which as a viewport unit is 3.125vw. The intercept is where that line crosses zero width: 1.75 − 0.03125 × 20 = 1.125rem. The calculation is easy to get wrong by hand, so here it is as a function you can run:

\n
JavaScript
function fluid(minSize, maxSize, minWidth, maxWidth, unit = 'vw') {\n  // sizes and widths in rem\n  const slope = (maxSize - minSize) / (maxWidth - minWidth);\n  const intercept = minSize - slope * minWidth;\n  const round = (n) => Math.round(n * 1000) / 1000;\n  return `clamp(${minSize}rem, ${round(intercept)}rem + ${round(slope * 100)}${unit}, ${maxSize}rem)`;\n}\n\nconsole.log(fluid(1.75, 3, 20, 60));          // hero heading\nconsole.log(fluid(1, 1.75, 20, 50, 'cqi'));   // card title, container-based
\n

Try other pairs. Two design sizes in, one clamp() out.

\n

Why the rem matters

\n

You could write font-size: 5vw and call it fluid. Don’t. Viewport units know nothing about the user’s font preferences: someone who sets their browser’s default text size to 20px gets exactly the same 5vw as everyone else. WCAG’s Resize Text criterion asks that text can scale to 200% without loss of content, and type that ignores the user’s settings fails people who need it most.

\n

Including a rem term keeps the user in the equation. With 1.125rem + 3.125vw, the rem part grows when the user raises their default size, and the rem limits move with it.

\n\n

There’s a mathematical edge to watch: if the ratio between MAX and MIN is large and the slope is steep, zooming can shrink the effective range so much that 200% zoom doesn’t produce 200% text. Keep the max no more than about 2.5 times the min for body copy and headings, and you’re safe.

\n

Viewport or container?

\n

vw is right for type tied to the page: the hero heading, the page title. For type inside a component, use container units. A session card’s title in the 280px sidebar and in the 640px main column should differ, and vw can’t tell them apart. With the slot as a size container (from the previous lesson), the same formula works with cqi:

\n
CSS
.slot { container-type: inline-size; }\n\n.session-card h3 {\n  font-size: clamp(1rem, 0.5rem + 2.5cqi, 1.75rem);\n}
\n

Fluid space

\n

Type that scales while padding stays fixed looks wrong at both ends: cramped on big screens, airy on small ones. Define a few spacing tokens with the same technique and use them everywhere:

\n
tokens.css
:root {\n  --space-s: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);\n  --space-m: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);\n  --space-l: clamp(1.5rem, 1rem + 2.5vw, 3rem);\n}\n\n.session-card { padding: var(--space-m); }\n.schedule     { gap: var(--space-l); }
\n

Three or four steps are enough. More than that and nobody remembers which to use.

\n\n

Your turn

\n

The exercise’s card title uses 5cqi, which grows without limits and ignores the user’s font size. Replace it with a clamp() that hits 16px in a 320px slot and 28px in an 800px slot, with rem limits. The checks change the slot width and even the root font size. Next, you’ll make the same page work in Arabic, right to left, with logical properties.

\n","toc":[{"id":"sec-1","text":"A fluid value is a line","level":2},{"id":"sec-2","text":"Why the rem matters","level":2},{"id":"sec-3","text":"Viewport or container?","level":2},{"id":"sec-4","text":"Fluid space","level":2},{"id":"sec-5","text":"Your turn","level":2}],"takeaways":["A fluid value is a straight line between two points: clamp(MIN, intercept + slope × width, MAX), where the slope is the size change divided by the width change.","Put rem in the intercept and the limits so text still responds to the user’s default font size and to zoom; viewport-only sizes don’t.","Use vw for page-level type such as the hero heading, and cqi for type inside components that live in containers of different widths.","Fluid spacing tokens such as --space-m keep padding and gaps proportional to type without a breakpoint for each."],"further":[{"title":"clamp() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp"},{"title":"Typography (web.dev Learn CSS)","url":"https://web.dev/learn/css/typography"},{"title":"Understanding Success Criterion 1.4.4: Resize Text (W3C)","url":"https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html"}],"quiz":[{"q":"

A heading should be 24px when its container is 400px wide and 40px at 1200px, growing linearly in between. Which preferred value does that?

","options":[{"text":"16px + 2cqi","why":"Correct. The slope is (40 − 24) / (1200 − 400) = 0.02, so 2cqi; the intercept is 24 − 0.02 × 400 = 16px."},{"text":"3cqi","why":"3cqi is 12px at 400px and 36px at 1200px; with no intercept the line passes through zero, so it can’t hit both targets."},{"text":"24px + 2cqi","why":"That’s 32px at 400px. The intercept is the value where the width is zero, not the size at the smallest width."},{"text":"2px + 2cqi","why":"The slope is right, but 2px + 8px is only 10px at 400px; the intercept must make the line pass through 24px there."}],"answer":0},{"q":"

Why is font-size: 4vw on body text an accessibility problem?

","options":[{"text":"Screen readers can’t read text sized in viewport units.","why":"Screen readers ignore font size entirely; the problem is visual."},{"text":"Text sized only in vw ignores the user’s default font size, so people who set larger text in their browser don’t get it.","why":"Correct. vw doesn’t involve rem at all; mixing in a rem term (and rem limits) keeps the user’s preference in the calculation."},{"text":"vw units are not supported on mobile browsers.","why":"Viewport units are supported everywhere; the issue is that they don’t respond to font-size preferences."}],"answer":1},{"q":"

A session card appears in a 280px sidebar and a 700px main column on the same page. Which unit should its fluid title use?

","options":[{"text":"vw, because it’s the standard unit for fluid type.","why":"The viewport is the same for both cards, so vw gives both titles the same size despite very different slots."},{"text":"em, because it scales with the parent font size.","why":"em responds to font size, not to available width, so it can’t make the title fluid."},{"text":"cqi, inside a clamp() with rem limits.","why":"Correct. cqi measures the card’s container, so each card scales to its own slot, and the rem limits keep the result readable and user-adjustable."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
\n

Fluid Type Without Breakpoints

\n

One clamp() instead of three media queries.

\n
\n
","css":".slot {\n container-type: inline-size;\n width: 480px; /* the checks change this width */\n}\n.session-card {\n padding: 16px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n.session-card h3 {\n margin: 0 0 8px;\n line-height: 1.2;\n font-size: 5cqi;\n}\n"},"solution":{"html":"
\n
\n

Fluid Type Without Breakpoints

\n

One clamp() instead of three media queries.

\n
\n
","css":".slot {\n container-type: inline-size;\n width: 480px; /* the checks change this width */\n}\n.session-card {\n padding: 16px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n.session-card h3 {\n margin: 0 0 8px;\n line-height: 1.2;\n font-size: clamp(1rem, 0.5rem + 2.5cqi, 1.75rem);\n}\n"},"checks":[{"id":"min-at-320","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; return Math.abs((await at(320)) - 16) < 0.3;"},{"id":"max-at-800","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; return Math.abs((await at(800)) - 28) < 0.3;"},{"id":"linear-between","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; return Math.abs((await at(560)) - 22) < 0.3;"},{"id":"clamped-outside","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; const small = await at(200); const big = await at(1200); return Math.abs(small - 16) < 0.3 && Math.abs(big - 28) < 0.3;"},{"id":"respects-user-size","test":"const setW = async (w) => { $('.slot').style.width = w + 'px'; await tick(16); }; const fs = () => parseFloat(style('.session-card h3', 'font-size')); const at = async (w) => { await setW(w); const v = fs(); await setW(480); return v; }; const root = document.documentElement; root.style.fontSize = '20px'; await tick(16); const small = await at(200); const big = await at(1200); root.style.fontSize = ''; await tick(16); return Math.abs(small - 20) < 0.3 && Math.abs(big - 35) < 0.3;"}],"title":"A fluid card title","prompt":"

The card title uses font-size: 5cqi, which grows forever and ignores the user’s font size. Replace it with a clamp() so the title is:

\n\n

Write the limits in rem: the last check sets the root font size to 20px, and the limits must scale with it (to 20px and 35px). The slot is already a size container, so cqi measures it.

\n","hints":["Slope = (28 − 16) / (800 − 320) = 0.025, which is 2.5cqi.","Intercept = 16 − 0.025 × 320 = 8px. Write it in rem so it follows the user’s font size.","font-size: clamp(1rem, 0.5rem + 2.5cqi, 1.75rem);"],"explanation":"

The preferred value is the straight line through the two design points: a slope of 12px over 480px is 0.025 (2.5cqi), and the intercept that puts 16px at 320px is 8px, or 0.5rem. clamp() holds the result between 1rem and 1.75rem. Because the limits and the intercept are in rem, a user who sets a 20px default gets a 20px to 35px range instead of being clamped back to the designer’s sizes; px limits would have failed that last check.

\n","checkLabels":{"min-at-320":"16px in a 320px slot","max-at-800":"28px in an 800px slot","linear-between":"22px halfway, at 560px","clamped-outside":"Stays at 16px below and 28px above the range","respects-user-size":"The limits follow the user’s font size (rem, not px)"}},"words":669,"readMinutes":3}