Fluid Font Size Calculator

Define the size transition

1. Enter smaller and larger viewport widths in CSS pixels, at least 100px apart, and the font size at each width. Sizes may increase, decrease or stay constant. State the assumed CSS pixels per rem.
2. Inspect the current declaration and endpoint table. Change the model test width to inspect another point; this changes the model specimen without changing copied CSS or pretending the card is a viewport.
3. Copy CSS and test it on a non-root element in the receiving page. Its actual root size, viewport, font and zoom behavior matter. Clipboard denial lets you select the same declaration manually.

Understand the expression

The calculator divides the font-size difference by the viewport-width difference to obtain a slope. It multiplies that slope by 100 for the vw term, then converts the offset and numerical size bounds to rem using your assumed root.

Smaller and larger describe viewport widths, not necessarily font sizes. A decreasing design uses a negative viewport coefficient with numerically ordered clamp bounds. Equal font sizes produce a simpler constant rem declaration.

Coefficients are rounded to six decimals with exact halfway values away from zero. The table and test specimen use those copied coefficients, so they can differ slightly from ideal endpoint interpolation. Displayed pixel samples use three decimals and identify rounding.

The root value is a conversion assumption. A receiving page with another root can change both font bounds and transition widths. rem refers to the document root, and vw to the viewport; changing an ordinary div’s width or font size does not simulate either.

Increasing, decreasing and rounded examples

The default design uses 16px at a 320px viewport and 32px at 1600px, assuming a 16px root. It produces clamp(1rem, calc(0.75rem + 1.25vw), 2rem), with a modeled size of exactly 24px at 960px.

Reversing those endpoint sizes produces clamp(1rem, calc(2.25rem - 1.25vw), 2rem). Both bounds stay numerically ordered. Entering 20px at both widths instead produces font-size: 1.25rem; under the same assumed root.

For 17px at 360px and 23px at 1280px, six-decimal coefficients give 17.0000024px at the first width and 20.0000028px at the midpoint in the copied arithmetic model. The endpoint table rounds those samples; it does not claim exact hits hidden behind formatted values.

Authoring and model limits

Viewport widths are integers from 240 to 3840 CSS pixels, at least 100px apart. Font sizes are 1–256 CSS pixels and assumed root sizes 8–32 CSS pixels per rem, with up to two decimals. Signs, units in fields, grouping, exponents and excess precision are rejected rather than silently corrected.

This authors one non-root font-size declaration with rem and vw. It does not import arbitrary CSS, build a type scale, use container units, upload fonts or alter the application’s root stylesheet. The six-decimal error bound belongs to a finite arithmetic model, not browser rasterization.

The specimen applies a calculated pixel size and wraps within its card. It is not a simulated viewport or proof that copied CSS behaves identically on your page. Actual fonts, roots, viewports and browser precision can change the result.

Mixed rem and viewport units do not automatically prove accessible text resizing. Test the receiving page with browser text and zoom settings. The tool provides no universal WCAG badge, fixed pixel-match promise or guaranteed doubling of the font at 200% zoom.

Local numeric authoring without saved settings

The tool adds no upload, remote font request, saved draft history, settings-bearing link or telemetry containing your values. Copy is explicit. Existing site services, extensions and copies you retain are outside a universal privacy or erasure promise.