Text that looks fine on a laptop is often too small on a phone, especially captions, footers and labels. The fixes are simple numbers: a 16px base, nothing important below 12px, comfortable line height, and headings that scale down with the screen.
2 min readUpdated 3 October 20264 fixes with code
01
Use at least 16px for paragraphs. Many sites use 17 or 18px on phones for long reading. Set it on the root so rem units follow.
html { font-size: 100%; } /* 16px, and respects the visitor's setting */
body { font-size: 1rem; line-height: 1.6; }02
Captions, legal text and footer links get squeezed first. Keep them at 12–14px, with enough contrast, and never use a fixed tiny size just to fit more in.
03
Safari on iPhone zooms the page in when a form field with text smaller than 16px is focused, and visitors then have to zoom back out. Give inputs, selects and textareas a 16px font.
input, select, textarea { font-size: 16px; }04
A 56px desktop heading breaks into one word per line on a phone. clamp() sets a phone size, a desktop size and a smooth path between them.
h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }16px for body text is the common baseline; keep secondary text at 12px or more.
Safari zooms when the field’s text is smaller than 16px. Set the field’s font-size to 16px.
rem, mostly: it follows the visitor’s browser text-size setting, which helps people who need larger text.
Forms · 2 min read
Fix forms that are hard to fill in on phones: missing labels, the wrong keyboard, zooming on focus, tiny checkboxes and hidden submit buttons.
Read the fixLayout · 3 min read
Your page slides sideways on phones? Find the element that is wider than the screen and fix it with five CSS changes that cover almost every case.
Read the fixText · 2 min read
Headings clipped, buttons with half a label, lines ending mid-word on phones? Here is why text gets cut off on mobile and the CSS that fixes each case.
Read the fixFree account, 5 checks a day, no card. UICheck finds sideways scroll, cut-off text, overlaps and small tap targets on every screen.