Calculate fluid typography using CSS clamp() with min/max size and viewport-based scaling.
This tool converts two font sizes and the screen-width range between them into one CSS declaration: font-size: clamp(min, calc(offset + coefficient*vw), max). You enter a small size, a large size, and the narrowest and widest viewports between which the text should grow; the tool fits a straight line through those two points and emits a ready-to-paste rule. What surprises most users: outside the viewport range you chose, the size stops scaling. Below the narrow width the text holds at the minimum, above the wide width it holds at the maximum. That flatness is the clamp at work, not a bug.
A concrete input and expected output from the current implementation.
Input
Min size 16px at viewport 320px; max size 24px at viewport 1280px
Expected output
clamp(16px, calc(13.33px + 0.83vw), 24px)
The preferred value is a line through (320, 16) and (1280, 24): 8px of growth over 960px of viewport gives a 0.83vw coefficient, and the intercept lands at 13.33px. Check: 13.33 + 0.83 x 3.2 = 16.0 and 13.33 + 0.83 x 12.8 = 24.0 at the endpoints.
At any width the preferred size is minSize + (maxSize - minSize) x (100vw - minVw) / (maxVw - minVw). The tool expands this into a constant plus a vw coefficient, so the calc in the output has exactly two terms. The clamp() min and max arguments then enforce the endpoints: the browser caps the result at the minimum below your narrow viewport and at the maximum above the wide one.
The result is a complete declaration value, so you paste it as font-size: clamp(...) inside an existing rule and nothing else is needed. One vw is one percent of the current viewport width, so the coefficient scales continuously with the browser window, no media queries involved. Units pass through: enter px and you get px; enter rem and you get rem, which the browser resolves against the root font size.
Because clamp() enforces hard limits: the first and third arguments are absolute bounds and the middle calc() only applies between them. The flat top is the point of the tool, not a bug - it is how you stop headlines becoming enormous on very wide monitors. If you wanted unbounded growth, you would need a bare calc() with no clamp.
clamp() has been supported in all evergreen browsers since 2020 (Chrome 79, Firefox 75, Safari 13.1), so the single rule is fine for modern targets. If you must support anything older, put a plain font-size line with a fixed value above the clamp declaration; unsupported browsers ignore the clamp line and keep the fallback.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.