A practical typography scale for UI design—readable body text, clear hierarchy, and consistent sizing across web and mobile.
Typography is the quiet conversion lever on every interface. When font sizes are inconsistent, users struggle to scan, trust drops, and accessibility fails—especially on mobile.
A practical type scale uses a clear hierarchy: display, heading levels, body, caption, and label sizes that relate mathematically (often a 1.125 or 1.25 ratio).
Recommended UI scale.
For most marketing sites and dashboards, body text at 16–18px on desktop and 15–16px on mobile is the accessibility sweet spot. H1 landing heroes often land between 40–56px depending on line length.
Use fewer sizes, not more. A 6–8 step scale covers nearly all product UI needs while keeping engineering implementation simple.
Line height & spacing.
Body copy typically needs 1.5–1.7 line height. Headings can be tighter (1.1–1.25) but only when lines are short. Increase letter-spacing slightly on all-caps labels.
Pair type scale with an 4px or 8px spacing grid so vertical rhythm feels intentional rather than arbitrary.
Testing on devices.
Validate readability on small phones, low-vision settings, and bright outdoor conditions. If users squint at your body text, the size or contrast—not the font choice—is usually the problem.
Document your scale in a design system file and mirror it in CSS variables or Tailwind config for consistent implementation.
Common questions.
Frequently asked questions about this article
What is the best font size for website body text?
Sixteen to eighteen pixels is the most common accessible range for desktop body text, with fifteen to sixteen pixels on smaller mobile screens.
How do I create a typography scale for UI?
Pick a base body size, apply a modular ratio for headings, and document line heights and weights in a design system.
Does font size affect SEO?
Font size indirectly affects SEO through readability, engagement, and accessibility signals—not as a direct ranking factor.
Should H1 be the largest text on the page?
Yes. There should be one clear H1 per page, visually dominant and descriptive of the page topic.
