Preferred vw coefficient
--
Free · Instant · No signup
CSS Clamp() Responsive Font Calculator
Preferred vw slope between two viewports, then a clamp(min, preferred, max) string.
Page updated 2026-09-04.
Calculator
Calculated Results
One clamp() value that scales font size between two viewport widths
Scaling from a 16px minimum font at a 360px viewport to a 32px maximum at a 1200px viewport produces: clamp(16px, 9.143px + 1.905vw, 32px), with a preferred-value slope coefficient of 1.9047619 (1.905 rounded).
The three clamp() arguments do three different jobs: the first (16px) is a hard floor the font size never shrinks below, the third (32px) is a hard ceiling it never exceeds, and the middle expression (9.143px + 1.905vw) is what actually scales linearly with viewport width between those two bounds -- once the calculated value would go below 16px or above 32px, the floor or ceiling takes over instead.
The slope (1.905vw) comes from the rate of change between the two anchor points: (32px - 16px) / (1200px - 360px) x 100 = 1.905, meaning font size grows by about 1.905% of the viewport width's pixel value for every additional viewport pixel between the two breakpoints.
What this linear model assumes
Linear interpolation between the two viewport widths. Root font-size is assumed 16px only if you treat px as px. This produces a straight-line (linear) scaling relationship between the min and max viewport widths -- below 360px, the font stays fixed at 16px (the floor), and above 1200px, it stays fixed at 32px (the ceiling), with only the range in between actually scaling fluidly.
This calculator works entirely in px units for simplicity, assuming the browser's default 16px root font-size -- if your project uses rem-based sizing with a different root font-size, or if the user has changed their browser's default font size, the effective pixel scaling would differ from this calculation's literal px assumptions.
A clamp()-based fluid font size like this is a widely used modern alternative to defining separate font sizes for several fixed media-query breakpoints -- it produces smooth scaling across the full range instead of visually abrupt jumps at each breakpoint.
Using this inside a broader layout
This fluid font-size value pairs naturally with a fluid grid or flex layout -- see the CSS Grid Layout Builder or CSS Flexbox Layout Generator for the surrounding container structure.
Frequently Asked Questions (FAQ)
What do the three values inside clamp() each do?
The first value (16px) is the minimum -- the font never goes smaller. The third value (32px) is the maximum -- it never goes larger. The middle expression (9.143px + 1.905vw) is the actual scaling formula used for any viewport width between the two breakpoints where neither the floor nor ceiling applies.
How is the 1.905vw slope coefficient calculated?
Slope = (max font - min font) / (max viewport - min viewport) x 100 = (32 - 16) / (1200 - 360) x 100 = 16 / 840 x 100 = 1.905. This represents how many viewport-width percentage points the font size grows per pixel of viewport width in the scaling range.
What happens to the font size below 360px viewport width?
It stays fixed at the minimum, 16px -- clamp()'s floor value takes over below the minimum viewport width, so the font doesn't continue shrinking past that point even on a narrower screen.
Does this account for a user's custom browser font-size setting?
Linear interpolation between the two viewport widths. Root font-size is assumed 16px only if you treat px as px. Not directly -- this calculates in absolute px units assuming the standard 16px root font-size. A user with a customized default browser font size, or a project using rem-based scaling, would see effectively different results than this literal px-based calculation assumes.
Why use clamp() instead of separate font sizes at different media query breakpoints?
clamp() produces smooth, continuous scaling across the entire range between the two viewport widths, avoiding the visually abrupt size jumps that happen at each fixed breakpoint when using traditional media-query-based font sizing.
You might also need
-
Webhook Payload Signer Sign a webhook-style payload with HMAC for provider examples. Not a generic HMAC playground. -
SemVer (Semantic Versioning) Range Matcher Test whether 1.2.3 satisfies ^, ~, >=, or an exact version range. -
SVG Path Visualizer & Optimizer Count path commands, measure string length, and strip extra spaces from a d attribute. -
Binary / Decimal / Hexadecimal Interconvertible Calculator Convert a non-negative integer among binary, decimal, and hexadecimal in the browser.