⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

16px to 24px Fluid Font Size

Compute a real fluid CSS clamp() value from a min and max size across two viewport widths, with the slope and intersection shown step by step and a live resize preview.

Processing... 0%

Result

Scaling a font size fluidly from 16px to 24px is one of the most common questions in CSS clamp() searches, because 16px is the near-universal body-text default and 24px is a frequent step up for a slightly larger heading or lead paragraph. This page opens the calculator with exactly that pair prefilled against a 320px to 1280px viewport range, so the clamp() line is ready the moment it loads.

If you only need the static rem or em equivalent of 16px or 24px — without any viewport-based scaling — the px to rem converter answers that in one step; this calculator is for the case where the value itself should change smoothly as the browser window resizes rather than stay fixed at one rem value.

The breakdown underneath shows exactly how 16px and 24px turn into a slope, a vw coefficient and a y-axis intersection, and the live preview slider lets you drag through the 320–1280px range to watch the text grow from one size to the other in real time before you copy the CSS line into your stylesheet.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Real fluid-typography math: slope, vw coefficient and y-axis intersection shown explicitly, not just the final clamp() line.
  • Live preview: drag the viewport-width slider to watch sample text resize exactly as it would while a real browser window is resized.
  • Type-scale mode: a base size and a ratio from 1.125 to 1.5 generate six fluid clamp() steps — small, base, h4, h3, h2, h1 — as copy-ready CSS.

Key Benefits

✓ The clamp() line, the slope and intersection numbers, and the live preview all update as you type — no button to press.
✓ A viewport-width slider drives a live preview box, so you see the exact fluid scaling in action between the min and max breakpoints, not just a formula.
✓ A separate type-scale mode turns one base size and ratio into a full 6-step fluid heading scale, ready as a block of CSS custom properties.

Use Cases

  • • Turn a min/max font size and viewport range into a real clamp() line — slope, vw coefficient and intersection included — instead of eyeballing one from a tutorial.
  • • Drag a viewport-width slider to preview a fluid heading or body size resizing exactly as it would while a real browser window is resized, before committing it to a stylesheet.
  • • Generate a full 6-step fluid type scale (small through h1) from one base size and ratio, copied as a ready-to-paste block of CSS custom properties.
  • • Build a fluid clamp() for spacing (margin, padding, gap) instead of font-size — the same slope/intersection formula applies to any CSS property.