What font size should a website use? A practical sizing guide

Short answer: for most websites, body text should be at least 16px, and often a little larger on marketing and article pages. The longer answer matters just as much, because a page is not only body text. Headings, subheadings, buttons, captions, form labels and data tables each need a size, and those sizes should relate to each other. This guide sets out a practical approach to website font size: a body baseline, a type scale for everything else, the units developers should use, and how the numbers change between a sales page and a busy admin dashboard.

Setting the body text size first

Every other size depends on the body, so start there. Browsers default to 16px for normal text, and that default exists for good reason: it is comfortably readable on most screens at typical viewing distances.

Practical guidelines for body copy:

• 16px is the reasonable minimum for paragraphs on most sites.
• 17 to 20px suits long-form reading, such as blog posts, guides and service pages with detailed explanations.
• On phones, keep body text at 16px or above. Form inputs below 16px cause iOS Safari to zoom in when tapped, which is disruptive.
• Typefaces differ in apparent size. A font with a large x-height at 16px can look as big as another at 18px, so judge by eye as well as by number.

Building a type scale for headings

A type scale is a set of sizes generated by multiplying the base size by a consistent ratio. It stops headings from being chosen at random and makes pages feel orderly.

Choosing a ratio

Common ratios include 1.2 (sometimes called a minor third), 1.25 (major third) and 1.333 (perfect fourth). Smaller ratios produce subtle steps suited to dense content; larger ratios create dramatic headings suited to marketing pages.

An example scale with a 16px base and 1.25 ratio

Rounded to whole pixels, each step multiplies the previous one by 1.25:

1. Small text (captions, fine print): 13px
2. Body text: 16px
3. H4 or large body: 20px
4. H3: 25px
5. H2: 31px
6. H1: 39px
7. Display (hero headline): 49px

You rarely need all of these. Most business sites use body, two or three heading sizes and one smaller size. What matters is that every size on the site comes from the scale.

Reducing headings on mobile

A 49px hero headline that looks strong on a laptop may break into five awkward lines on a phone. A common approach is a smaller ratio on small screens, for example 1.2, so headings shrink while body text stays at 16px. Developers can also use the CSS clamp() function to scale headings smoothly between a minimum and maximum size.

Pixels, rem or em: which unit to use

Designers usually think in pixels, but developers should generally set font sizes in rem.

• px is a fixed unit. It is easy to understand but does not respond to a visitor’s browser font-size preference.
• rem is relative to the root font size of the page, typically 16px by default. 1rem equals 16px, 1.25rem equals 20px, and so on. If a visitor increases their browser’s default text size, rem-based text grows accordingly.
• em is relative to the parent element’s size. It is useful for spacing inside components like buttons, but nested em values multiply and can produce surprises.

An important caution: avoid setting the root font size in pixels (for example html { font-size: 10px }) as a shortcut for easy maths. It overrides the user’s browser preference, which is exactly what rem is meant to respect. Keep the root at its default or use a percentage.

Sizes for the smaller elements

Small elements are where readability problems hide.

• Buttons: match body size, 16px, or go one step smaller only if the label is short and the weight is medium or bold.
• Navigation links: 15 to 18px on desktop. On mobile menus, 18px or larger is easier to tap and read.
• Form labels and inputs: 16px for inputs, as noted earlier; labels can be the same or slightly smaller if bold.
• Captions, footnotes and legal text: avoid going below 12 to 13px, and never use small sizes for anything customers need to act on, such as delivery charges or refund terms.

How sizes differ on marketing pages and dashboards

The right website font size depends on what people are doing on the page.

Marketing and content pages

Visitors are scanning and deciding. Larger body text (17 to 20px), a generous type scale and big headlines create strong hierarchy and help visitors find key points quickly. There is room on the screen, and persuasion benefits from clarity.

Dashboards, admin panels and web apps

Users are working with lots of information at once: tables of orders, filters, forms and status labels. Here, space is valuable, and a tighter system makes sense. Body text of 14 to 16px, a small ratio such as 1.125 or 1.2, and fewer heading levels keep screens dense but organised. Table cells and secondary labels around 13 to 14px are common. Even so, keep contrast strong, because smaller text is less forgiving of pale grey colours.

If a business has both a public website and a customer portal, the two can share the same typeface and base size while using different ratios.

Putting your sizing system into practice

Document the scale once, with each size named by role: body, small, H1, H2, H3 and so on. Give developers the rem values and designers the pixel equivalents. Then check your live pages on a mid-range phone and a laptop, reading a full paragraph on each.

If you are planning a new site or a customer portal and want sizing handled consistently across both, our team covers it in website development and custom software projects.

Frequently asked questions

Is 14px too small for website body text?

For marketing and article pages, generally yes. 14px can be acceptable for dense data interfaces like dashboards, provided the typeface is clear and contrast is high.

What font size should an H1 be?

There is no single correct value. On desktop, many business sites use roughly 32 to 48px, reducing on mobile. The H1 should be clearly the largest text in the main content without wrapping onto many lines.

Why does my phone zoom in when I tap a form field?

iOS Safari zooms into input fields whose font size is smaller than 16px. Setting inputs to at least 16px prevents it without disabling user zoom.

Should font sizes be the same in every browser?

Using rem units with the default root size gives consistent results across modern browsers, while still allowing visitors who have changed their default text size to see larger text.