What Font Size Body Text Should Be on a Website

You finish a page, it looks tidy in the design file, and then someone opens it on a phone and squints. Or the opposite happens: you set the text large to be safe, and the article now feels like a children's book with three words per line. Picking a body text size looks like the simplest decision in web design. It turns out to be the one beginners revisit most often.

The trouble is that "16px" gets passed around as the answer, and it is only half of one. Two fonts set at the same pixel size can look a full size apart, and the size that reads well on a laptop at arm's length can feel cramped on a phone held closer. This guide walks through how I choose a body size for a real site, which numbers to start from, and how to check the result with your own eyes rather than a rule of thumb.

Why the same number looks different in every font

A font size in CSS measures the invisible box around each letter, not the letters themselves. What your eye reads as "size" is mostly the x-height, the height of a lowercase x compared with the capitals. Fonts with a tall x-height, such as Verdana, Inter or Source Sans, look big at 16px. Fonts with a short x-height, such as Garamond or many elegant book serifs, look small at the same setting and often need 18 to 20px to feel equal.

This is why copying another site's number rarely works. If the site you admire uses a tall x-height sans at 16px and you pair 16px with a delicate old style serif, your page will read smaller, even though the CSS says the same thing.

A quick test helps: set two paragraphs side by side, one in your chosen font and one in a system font like Arial, both at 16px. If yours looks visibly smaller, bump it up by 1 or 2px until the lowercase letters match in height. That is your real starting point.

Starting points that hold up

Browsers default to 16px for body text, and that default exists for a reason: it is roughly the smallest size that most adults read comfortably on a screen at normal distance. Treat 16px as the floor for body copy, not the target. For long reading pages, many designers settle somewhere between 17 and 20px on desktop.

These ranges are what I reach for first, not laws. The form row is the one firm number: iOS Safari zooms the whole page when someone taps an input set smaller than 16px, which is an easy bug to ship and an irritating one to experience.

The common advice to go bigger on mobile is backwards

People often assume phones need larger text because the screen is smaller. In practice, phones sit closer to the face than laptops, so the same CSS pixel size looks roughly similar or even larger on a phone. What changes is the line length. A 20px font on a 375px wide screen leaves room for maybe six or seven words per line, and reading turns choppy.

So on small screens I usually keep body text the same as desktop or drop it by 1 or 2px, while I trim the heading sizes much harder. A 48px headline on desktop that becomes 28 or 30px on mobile matters more than any change to the paragraphs. Line length is the quiet partner in all of this, and I covered it separately in how line length decides whether people keep reading.

Line height and spacing do half the work

A size that looks too small is sometimes a size with too little breathing room. Before you increase the font, try raising line height from 1.3 to 1.5 or 1.6. The text often reads as bigger without any change to the letters. The accessibility guidelines (WCAG 1.4.12) also expect a page to survive users forcing line height to 1.5 times the font size, so building with that spacing from the start avoids broken layouts later.

Paragraph spacing matters too. A gap between paragraphs of about 1em, the same as the font size, keeps blocks distinct without making the page feel loose. Many beginners use a smaller gap than their line spacing, which makes paragraphs blur together.

Use rem, not fixed pixels

Write your sizes in rem units instead of px. 1rem equals the browser's base size, normally 16px, so 1.125rem gives you 18px. The difference shows up for readers who raise their default font size in browser settings, often people with low vision. With rem, your text grows with their preference. With fixed pixels, it ignores them. This takes no extra design effort and quietly makes the site friendlier.

How to check your choice in ten minutes

Numbers only get you close. The final call comes from reading. Open a long page on your actual phone and on a laptop, set them at normal distance, and read three paragraphs out loud in your head. Notice where you slow down. If your eyes jump back to reread line starts, the lines are too long or the spacing too tight. If you feel like you are scrolling constantly, the text may be too large for the column.

I also ask one other person, ideally someone over 45, to read the same page. Comfort with small text drops noticeably with age, and a size that feels fine to a 25 year old designer can tire an older reader within a minute. That single test has changed more of my type decisions than any guideline.

If you are still building your foundation, the basics in typography basics that improve any design pair well with this, and the rest of the typography section covers pairing and hierarchy.

Something to try this week

Take one page you have already built and change only two values: set body text to 1.125rem and line height to 1.6. Leave the font, colours and layout alone. Read it on your phone and laptop next to the old version. If the new one feels calmer, keep it and adjust by one pixel at a time from there. If it feels too big, your font probably has a tall x-height, and 1.0625rem will be your number.