Mobile Font Size Calculator (px, rem, clamp)

Convert px to rem, and generate a fluid clamp() font size that grows from phone to desktop — with a preview at real device widths and plain-language hints on what is readable on a phone.

font-size: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);

Recommended font sizes on phones

• Body text: 16 px (1rem) or more. iOS uses 17 pt for body text and Material Design 16 sp for "body large". Long-form reading is easier at 17–18 px.
• Secondary text: 14 px for captions, meta lines and helper text.
• Never under 12 px for anything people need to read.
• Form fields: 16 px. Safari on iPhone zooms into any input, select or textarea under 16 px when it gets focus, and the page stays zoomed after.
• Line height 1.4–1.6 for body text, and about 30–45 characters per line on a phone.

px or rem?

Use rem for font sizes. A rem is the root font size — 16 px unless the reader changed the default text size in their browser, as many people with low vision do. Sizes in px ignore that setting; sizes in rem follow it. Page zoom works with both. Keep html { font-size: 100%; } rather than a fixed px value so the reader's preference wins.

How the clamp() formula works

A fluid size grows in a straight line from the smallest size at one viewport width to the largest at another, and stops at both ends. The calculator finds the line: slope = (largest − smallest) ÷ (to width − from width) and intercept = smallest − slope × from width. The middle value of clamp() is then intercept (in rem) + slope × 100 vw. With the defaults above — 16 px at 360 px growing to 20 px at 1280 px — that is clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem): exactly 16 px on a 360 px phone and 20 px from 1280 px up.

Keep part of the middle value in rem. A size made only of vw does not grow when the reader zooms or raises their default text size, which fails WCAG 1.4.4 Resize Text. For the same reason keep the largest size within about 2.5 times the smallest — then zooming to 200% still roughly doubles the text. More on the clamp() function: MDN.

Mobile-specific notes

Without a viewport meta tag phones lay the page out 980 px wide and shrink it, so even 16 px text ends up tiny — see the viewport meta tag guide. Safari on iPhone may enlarge text when the phone turns to landscape; -webkit-text-size-adjust: 100% on html stops that without blocking zoom. Never use maximum-scale=1 or user-scalable=no to stop the input zoom: it stops people from zooming at all. The text too small guide covers the rest.

More free tools: color contrast checker · tap target size checker · css media query generator · device mockup generator · all tools