GitHub

Install it as an agent skill

npx skills@latest add vojtaholik/good-css

For Claude Code, Codex, Cursor and any other agent that reads skills. The source and the other ways to install are on GitHub.

Entry 05

Fluid sizes with clamp()

Use it for anything that should grow with the screen, starting with font sizes and section spacing. One declaration replaces a ladder of breakpoint overrides.

Open
Change the width. The text is 16px up to a 400px viewport and 28px from 1600px. Open it in its own tab for the full range.
Code CSS · 4 lines 
:root {
  --text-body: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --space-section: clamp(3rem, 1rem + 6vw, 8rem);
}
Why it works, the rules and the credits 3 reasons · 6 rules · credits

Why it works

  1. clamp(min, preferred, max) uses the preferred value and stops at the two bounds.
  2. The vw part of the preferred value grows with the viewport. The rem part sets where the growth starts.
  3. --text-body above is 16px up to a 400px viewport, 28px from 1600px, and a straight line between.

Rules

  1. Write the preferred value as rem + vw, never vw alone. clamp(1rem, 1vw, 1.75rem) stays at 16px on every screen narrower than 1600px, because 1vw is smaller than 1rem until then. A bare vw value also ignores the reader's font size setting.
  2. Work the preferred value out from two points. The slope is (max - min) / (wide - narrow), in px over px, and times 100 it is the vw number. The rem part is min - slope × narrow.
  3. Keep both bounds in rem so they follow the reader's font size.
  4. For a font size, keep the maximum at or below 2.5 times the minimum. The vw part does not grow when the reader zooms, so fluid text grows less than the page. Past 2.5 times, 500% zoom cannot double the text at some widths, and that fails WCAG 1.4.4.
  5. Put fluid values in tokens. Components use the token and never repeat the math.
  6. For more than two or three sizes, derive a whole scale as One fluid scale for type and space does.

Credits

Borrowed from: Kyrylo Silin, @kyrylo on X, 2026-05-10 · James Gilyead and Trys Mudford, Utopia · Adrian Roselli, Responsive Type and Zoom · Maxwell Barvian, Addressing Accessibility Concerns With Using Fluid Type, 2023-11-07, for the 2.5 limit

Docs: MDN: clamp() · Adrian Bece, Modern Fluid Typography Using CSS Clamp

01 / 08 6 entries

Foundations

  1. 01 The reset
  2. 02 Logical properties
  3. 03 OKLCH color
  4. 04 One set of color tokens for light and dark
  5. 05 Fluid sizes with clamp()
  6. 06 One fluid scale for type and space