The three values of clamp() and the scope of this tool
CSS clamp() takes three values: clamp(minimum, preferred, maximum). The browser uses the preferred value as a baseline while ensuring the result does not fall below the minimum or exceed the maximum.
This CSS clamp() responsive font calculator computes the preferred value to scale text size linearly according to the screen width.
You input the minimum viewport width where scaling begins, the maximum viewport width where scaling ends, the minimum and maximum font sizes corresponding to those two points, and the root font size used for REM conversion.
The initial values are 360px, 1280px, 16px, 48px, and 16px. Under these conditions, it creates CSS that uses the minimum value if the screen width is 360px or less, a linear equation value between 360px and 1280px, and the maximum value if it is 1280px or more.
Instead of switching values in steps at specific widths like media queries, it connects the specified two points with a straight line.
However, it does not automatically determine text readability or appropriate line lengths. Users determine the minimum and maximum values while observing the actual text volume, fonts, and the layout area.
Calculating the slope and intercept from two points
If the X-axis is the viewport width and the Y-axis is the font size, the input minimum and maximum conditions form two points on a straight line.
The slope is found by dividing "maximum font size minus minimum font size" by "maximum width minus minimum width". With the initial values, (48 - 16) / (1280 - 360) calculates the font size increment when the screen width increases by 1px.
Next, the Y-intercept is found by subtracting "slope multiplied by minimum width" from the minimum font size. Since CSS vw represents 1% of the viewport width, the slope multiplied by 100 becomes the vw coefficient.
The preferred value is "intercept + coefficient vw", and it is output as px + vw in the PX version, and as rem + vw (intercept divided by the specified root font size) in the REM version.
The minimum and maximum values are also output as the input px values in the PX version, and as rem values (each font size divided by the specified root font size) in the REM version.
Assuming a root font size of 16px, entering 16px becomes 1rem, and 48px becomes 3rem. If the root font size differs on the actual site, the px-equivalent values of the REM version will also change, so please enter the same baseline as your project's settings.
Input conditions and rounding upon display
All five parameters—minimum viewport width, maximum viewport width, minimum font size, maximum font size, and root font size—must be finite positive numbers greater than zero.
Furthermore, the maximum viewport width must be strictly greater than the minimum width, and the maximum font size must strictly exceed the minimum font size; equal, reversed, or decreasing values are rejected.
If any input is invalid or results in non-finite derived calculations, the tool blocks calculation entirely, rendering empty output fields and disabling all copy buttons.
When inputs are invalid, the preview simulation falls back to a default font size of 16px. The interactive preview slider provides an isolated simulation of font scaling across widths and does not alter the actual browser viewport.
The calculations themselves are performed using JavaScript numbers, and the number of digits is adjusted when creating the output strings.
The REM conversion values, the intercept for the REM version, and the vw coefficient are displayed up to 4 decimal places, while the intercept for the PX version is displayed up to 2 decimal places.
Trailing zeros in the fractional part are removed, so 1.0000rem is shortened to 1rem. The minimum and maximum values of the PX version use the input values directly in the strings.
Because the coefficients rounded for display are pasted into the CSS, there may be small differences around the specified two points, rather than perfectly matching the mathematical infinite-digit line.
This tool does not guarantee zero errors or special high-precision calculations. If you have strict internal standards, check the output coefficients and calculation results at the endpoints, and adjust to the required number of digits.
Usage of REM, PX, and Tailwind configuration snippets
The REM version represents the minimum value, maximum value, and fixed intercept in rem. While it can reflect user settings and the site's root font size, you must ensure the root font size entered into this tool matches the application target's settings.
The PX version indicates the fixed parts in px, making it easier to read the correspondence with the input values. Both output only the clamp() expression that can be used as a font-size value.
The Tailwind CSS field provides a fontSize object snippet where the REM version expression is assigned to a name like responsive-heading.
It does not generate the entire configuration file, plugins, imports, or procedures for registering utility classes. Since the configuration method differs depending on your Tailwind version and setup, incorporate it into your existing settings according to the official documentation you are using.
Each generated format—REM expression, PX expression, and Tailwind configuration—includes an individual copy button. When input values are invalid, the outputs remain empty and all copy buttons are disabled.
When valid, clicking copy awaits confirmation from the Clipboard API, presenting a checkmark icon and visual success state for approximately 2 seconds upon success.
If clipboard permissions or browser policies block the write operation, guidance appears prompting you to select and copy the text manually.
Updating any input field immediately clears active copy indicators and resets the copy button. The three formats are derived from the same mathematical calculations, so you only need to choose the single format that matches your styling workflow.
Verification with the assumed screen width slider
The slider at the bottom of the screen is not an input field for calculation conditions, but a simulator to check the text size at a temporary screen width.
In the English version, the slider starts at an initial value of 768, with a minimum of Math.max(200, minWidth - 100) and a maximum of maxWidth + 100.
It displays the current assumed width and the text size calculated from that width numerically on the screen.
If the assumed width is below the minimum viewport width, the size is fixed to the minimum font size, and if it is above the maximum width, it is fixed to the maximum font size.
In between, instead of re-reading the CSS string, the same slope and intercept are calculated on the JavaScript side and set to the font-size of the preview text.
This allows you to check the linear change within the range and the relationship where the values stop at both ends.
This slider does not change the actual width of the browser window or the preview area itself. Since it only derives the text size from the assumed width, it does not reproduce actual wrapping, line height, container width, or overlap with other elements.
The appearance also changes depending on the font family, character count, OS, and browser, so perform final checks by applying the output code to your actual page.
Unsupported features and usage notes
This tool generates a single clamp() expression for font sizes. It does not generate media queries for individual breakpoints, multiple condition presets, arbitrary CSS units, or code for element widths, heights, and margins.
When applying the formula to other properties, you must independently judge whether the units and minimum/maximum values are appropriate for that purpose.
It also does not automatically determine readability, accessibility, design quality, or layout maintenance across all screens. Even if the text size matches the formula, long headings may not fit, and small text may not be readable.
It does not output browser clamp() support status or fallbacks for older environments, so determine your target browsers and test accordingly.
There is no saving of input values, history of multiple settings, file output, or loading of settings; reloading the page resets it to initial values.
Although formula calculations and previews are performed locally in JavaScript, this does not mean there is zero network activity, as initial loading of the page and assets occurs.
There is no absolute guarantee of a completely offline experience, absolute security, no third-party collection, or determining legal terms of use for the generated code.