Font Size Best Practices for Web Design
Font size is one of the most impactful decisions in web design — too small and users strain to read, too large and your layouts feel cramped and unwieldy. Getting the type scale right requires balancing aesthetics, readability, and accessibility across a wide range of devices. Here are the best practices that professional designers follow.
Body Text Size: Start at 16px Minimum
The consensus among typography experts and accessibility guidelines is that body text should be no smaller than 16px (1rem) on the web — this is the default browser font size for a reason. Many modern sites are moving to 18px or even 20px for body text, recognizing that larger text improves readability and reduces cognitive fatigue, especially for long-form content. Never set a base font size on the `html` element using pixels (like `html { font-size: 14px }`) because this overrides the user's browser preferences and breaks accessibility. Instead, leave the `html` font size at its default or use a percentage (`html { font-size: 100% }`) and size everything else with `rem` units. For mobile devices, 16px body text is the absolute minimum — Apple's Human Interface Guidelines and Google's Material Design both specify 16px as the baseline for readable body text. If your design calls for smaller text for captions or metadata, 14px is acceptable for secondary content, but never use anything below 12px for any readable text on the web.
Heading Size Scale: Use a Type Scale Ratio
A type scale provides a consistent mathematical relationship between heading sizes, creating visual harmony throughout your design. The most popular ratios are: Minor Third (1.2) for compact UIs, Major Third (1.25) for general web use, Perfect Fourth (1.333) for editorial content, and Augmented Fourth (1.414) for dramatic headlines. To build a scale with a 1.25 ratio and a 16px base: body is 16px, h6 is 16px, h5 is 20px, h4 is 25px, h3 is 31.25px, h2 is 39px, h1 is 48.8px. Use CSS custom properties to define your scale: `--step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem;` and reference them in your heading styles for easy global adjustments. The tool at type-scale.com lets you visualize different ratios instantly and generates CSS you can copy directly into your project. For mobile, consider using a smaller ratio (like 1.2) than desktop (like 1.333) to prevent h1 elements from dominating small screens — fluid typography can automate this transition.
Responsive Font Sizing with clamp() and Fluid Typography
The CSS `clamp()` function is the modern solution for responsive font sizing — it sets a minimum size, a preferred fluid size, and a maximum size in one declaration: `font-size: clamp(1rem, 0.5rem + 1.5vw, 1.25rem)`. This creates text that scales smoothly with the viewport while never shrinking below the minimum or growing beyond the maximum, eliminating the need for font-size media queries. The preferred value typically combines a fixed `rem` value with a viewport-relative `vw` unit — the `rem` portion ensures the text is never too small, while the `vw` portion provides the fluid scaling. For a complete fluid type system, calculate `clamp()` values for every step in your type scale using a tool like utopia.fyi, which generates all the math for you based on your minimum and maximum viewport widths. Avoid using `vw` units alone for font sizing (like `font-size: 4vw`) because they ignore the user's browser font size preference, failing WCAG accessibility requirements. The fluid approach works best when combined with container queries in 2026 — `font-size: clamp(1rem, 3cqi, 1.5rem)` sizes text relative to its container rather than the viewport, enabling truly modular responsive components.
Line Length and Readability
The optimal line length for body text is 45 to 75 characters per line, with 66 characters often cited as the ideal — this range minimizes the effort of tracking from the end of one line to the beginning of the next. Enforce this in CSS with `max-width: 65ch` on your text container, where the `ch` unit equals the width of the "0" character in the current font, giving you a line length that automatically adapts to different fonts and sizes. Lines shorter than 40 characters create excessive line breaks that disrupt reading rhythm, while lines longer than 80 characters cause readers to lose their place when moving to the next line. Line height (leading) should increase with line length — use `line-height: 1.5` for short lines and up to `line-height: 1.75` for wide text columns. For headings, line length matters less because headings are read as discrete chunks, but very long headings that wrap should still be kept reasonable with a `max-width`. Paragraph spacing also affects readability — use `margin-bottom` between paragraphs that's at least equal to the line height to create clear visual separation between text blocks.
Accessibility Requirements for Font Sizing
WCAG 2.2 Success Criterion 1.4.4 requires that text can be resized up to 200% without loss of content or functionality — this means your layouts must not break when users zoom to 200% or increase their browser's default font size. Using `rem` and `em` units instead of `px` for font sizes ensures your text respects the user's preferred base size, which is a fundamental accessibility requirement. WCAG 1.4.12 (Text Spacing) requires that users can override line height to at least 1.5 times the font size, letter spacing to 0.12 times the font size, and word spacing to 0.16 times the font size without breaking the layout. Never use `!important` on font-size declarations or set explicit heights on text containers, as these prevent assistive technologies and user stylesheets from adjusting text sizing. For users with low vision, `large print` in digital contexts generally means at least 18pt (24px) regular weight or 14pt (18.67px) bold — text at these sizes has relaxed contrast requirements under WCAG. Test your font sizing by setting your browser zoom to 200%, increasing the default font size to "Very Large" in browser settings, and verifying that all text remains readable and no content overflows or gets clipped.
Try Font Finder Now
The fastest way to identify fonts on any website. Install the free Chrome extension and start inspecting typography in one click.