March 26, 20264 min read

Responsive Font Size Calculator

Calculate fluid, responsive font sizes using CSS clamp(). Create typography that scales smoothly between mobile and desktop without breakpoint jumps.

css typography responsive design font size calchub

Fixed font sizes at breakpoints were fine in 2012. But with the variety of screen sizes in 2026 — from 320px budget phones to 3440px ultrawide monitors — jumping from "mobile font size" to "desktop font size" at a specific breakpoint creates visible snapping. Fluid typography using clamp() scales smoothly across every viewport width.

The CSS clamp() Approach

font-size: clamp(minimum, preferred, maximum);

The preferred value is typically a viewport-relative unit (vw) that scales with screen width. The min and max clamp it at the extremes so tiny phones don't get microscopic text and huge monitors don't get oversized text.

A typical heading:

h1 { font-size: clamp(1.75rem, 4vw, 3.5rem); }

At 320px wide: 4vw = 12.8px — clamped to minimum 1.75rem (28px)
At 900px wide: 4vw = 36px — in the unclamped range
At 1400px wide: 4vw = 56px — clamped to maximum 3.5rem (56px)

How the Calculator Works

The CalcHub Font Size Calculator takes three inputs:

Min font size in px or rem (for smallest screen)

Max font size in px or rem (for largest screen)

Min/max viewport widths (typically 320px–1280px or 375px–1440px)

It calculates the slope and intercept for the linear scaling equation and formats it as a clamp() function ready to paste into your CSS.

The formula behind the output:

slope = (maxSize - minSize) / (maxViewport - minViewport)
intercept = minSize - slope × minViewport
preferred = slope × 100vw + intercept
result = clamp(minSize, preferred, maxSize)

Suggested Scale for a UI Design System

Element	Mobile (375px)	Desktop (1440px)	clamp()
Body text	16px	18px	clamp(1rem, 0.96rem + 0.22vw, 1.125rem)
Small / caption	13px	14px	clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem)
H4	18px	20px	clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem)
H3	20px	26px	clamp(1.25rem, 1.11rem + 0.6vw, 1.625rem)
H2	24px	36px	clamp(1.5rem, 1.22rem + 1.2vw, 2.25rem)
H1	30px	52px	clamp(1.875rem, 1.37rem + 2.16vw, 3.25rem)
Display	36px	72px	clamp(2.25rem, 1.42rem + 3.54vw, 4.5rem)

The larger the heading, the more dramatic the fluid scaling — display text can afford to scale aggressively because it's short and decorative, while body text should barely move to maintain readability.

Viewport Units for Typography

Besides vw, newer viewport units are now available:

svh / svw — small viewport (accounts for mobile browser chrome being shown)
dvh / dvw — dynamic viewport (updates when mobile browser chrome hides/shows)
lvh / lvw — large viewport (assumes mobile chrome is hidden)

For font sizes, vw is still the right choice. For full-viewport layouts (hero sections, modals), dvh is preferable to avoid the mobile chrome overlap problem.

Tips

Set font-size on :root in rem terms, then use em internally. This gives you one lever to scale the entire UI up or down by changing the root font size.
Line height should scale differently than font size. As font size increases, line height ratio can decrease: body text at 16px might need 1.6 line height, but a 48px headline only needs 1.1–1.2.
Don't forget to set a base size. If you haven't changed the root font-size, browsers default to 16px. 1rem = 16px in that context. All your rem calculations assume this.

Should I use px or rem for font sizes?

Rem is strongly preferred for accessibility: users can set their browser's default font size to 20px (common for people with visual impairments), and rem-based sizes will scale accordingly. Px sizes ignore user preferences. Use px only for values that should never scale (border widths, etc.), not font sizes.

What's the minimum font size for readability?

Body text should generally be 15–16px minimum. For supporting text (captions, helper text), 13–14px is acceptable but shouldn't be the primary reading size. WCAG doesn't specify a minimum font size, but 9px is the smallest browsers typically render, and anything below 12px is poor practice for extended reading.

Can I use this for line-height or padding too?

Yes — the same clamp() approach works for any CSS length value. Fluid padding and gap values are increasingly common in modern designs. The CalcHub calculator works for any length property, not just font sizes.

Typography Scale Calculator — create a complete modular type scale
Spacing Calculator — fluid spacing system alongside typography
Pixel to Rem Calculator — convert between units