Readable Typography: Line Length, Font Size and Line Height for the Web

At Talha Aslan and team, we often see text treated as the last step of a web project. Yet most visitors arrive for information, not for a hero image. So the way your words sit on the page decides whether your message actually lands.

Therefore, this guide walks through four core settings one by one. For each, we share starting values backed by official sources, simple ways to test them and the mistakes we fix most often. Choosing a typeface is a separate topic, and our guide on how to choose web typography covers it. Here we focus on how to size and space the font you already picked.

Which four settings decide readable typography?

In practice, four settings decide whether text reads comfortably, and together they form readable typography. They depend on each other, so a change in one means you should review the others. For example, a larger font size fits fewer characters into the same box, and that changes your line length too.

• Line length: the number of characters per line. On very long lines, the eye loses the start of the next line.
• Base font size: the size of body copy in pixels or rem. Small text forces mobile readers to pinch and zoom.
• Line height: the vertical space between lines. As a result, tight lines turn a paragraph into a gray block.
• Contrast: the luminance difference between text and background. Light gray text may look elegant, but it strains the eye on most screens.

Paragraph spacing, alignment and heading hierarchy also matter. However, these three become much easier once the core four are in place. That is why we suggest you lock the core settings first and then move on to fine tuning.

What is the ideal line length for body text?

For an official ceiling, look at WCAG, the W3C accessibility guidelines. Its AAA level Success Criterion 1.4.8 Visual Presentation asks that lines stay at or under 80 characters. For Chinese, Japanese and Korean text, the limit is 40. Because this is a AAA criterion, it does not bind every site, but it gives you a solid upper bound.

Typography practice often cites a range of roughly 45 to 75 characters per line. Treat that as a starting range from field experience, not a hard rule. For English body copy, we usually aim for 60 to 75 characters on desktop.

Also, lines that run too short cause problems as well. The eye keeps jumping back to the left edge, and the text reads in choppy bursts. In other words, the target is not the shortest line. It is a comfortable middle width that the eye can follow with ease.

Next, here is a quick check. On desktop, copy an average line from your article and count the characters. If it reaches 90 or 100 characters with spaces, your text container is probably too wide.

How do you limit line length with CSS?

The most practical method is a character based maximum width on the text container. The CSS ch unit equals the width of the zero glyph in your current font. So when you give body text a maximum width of about 65 to 70ch, line length stays in a sensible range regardless of the typeface.

The nice part is that the container also grows with the font size. With a fixed pixel width, a larger font means fewer characters per line. With ch, the ratio stays stable.

A few points deserve attention in practice:

• Apply the maximum width to body copy only. Tables, images and code areas can run wider.
• Center the text column or align it left, but avoid lopsided empty space on either side.
• On templates with a sidebar, account for the width of the main column too.
• On wide screens, never let paragraphs span the full viewport. Balance the extra space with images or a summary box instead.

If you use a ready made theme, the content width setting usually lives in the theme options or the global styles of the block editor. Setting names vary by theme, so look for the relevant section in your admin panel.

What base font size should body text use?

Common browsers ship with a default body font size of 16 pixels. We treat that value as the floor for body copy. On long articles and guides, 17 to 18 pixels often reads more comfortably. That, too, is a starting range, because the x height of your typeface changes the result.

Put simply, x height describes how tall lowercase letters stand relative to capitals. Some typefaces look large even at 16 pixels, while others look small at the same size. For that reason, we suggest you judge the real rendering on a real screen rather than the number alone.

In addition, small text shows up most often in a few places: product descriptions, form labels, footers, price notes and cookie banners. These areas look secondary. Still, they are exactly where readers look at the moment of decision. For instance, a delivery condition in 12 pixel light gray text can slip past a reader, who then feels surprised later.

Meanwhile, headings have no single correct size. That said, H1, H2 and H3 need a visible step between them. When headings and body copy look almost the same, the page reads like a flat wall of words, and scanning becomes hard.

Pixels or rem: which unit should you use for font size?

We recommend rem for body text. Rem takes its value from the root element font size. When a user raises the default font size in browser settings, values in rem follow that preference. Fixed pixel values, on the other hand, ignore it in some browsers.

This difference matters for readable typography, especially for readers with low vision and older readers. Many of them do not zoom each site one by one. Instead, they raise the global font size in the browser once. A theme that locks the root size in pixels quietly cancels that choice.

Fluid type is another useful technique. The CSS clamp function lets the font size grow with the viewport between a minimum and a maximum. As a result, you get body text near 16 pixels on phones and near 18 pixels on wide screens. Still, define the minimum in rem, otherwise zoom behavior can surprise you.

In short, unit choice is an invisible decision with a large effect. Design files show pixels, and that is fine. Converting them to rem during development is the job of the build team.

How much line height does body text need?

We suggest you start body text at a line height of at least 1.5 times the font size. The MDN line-height reference also recommends a minimum of 1.5 for main paragraph content. According to MDN, this helps people with low vision as well as people with cognitive concerns such as dyslexia.

The same page explains that a unitless number is in most cases the preferred way to set line height. The browser multiplies a unitless value by each element's own font size. A pixel or em value, however, computes once and passes down as a fixed length. On large headings, that can make lines overlap.

WCAG 2.2 adds a different angle with its AA level Success Criterion 1.4.12 Text Spacing. It requires that no content or functionality goes missing when a user raises line height to 1.5 times the font size. So it does not force you to use that value. Instead, it expects your site to survive it.

Headings can use tighter line height, because they are short and large. That is still readable typography. On longer lines, on the other hand, a little extra line height helps the eye find the next line.

Why do paragraph, letter and word spacing matter too?

WCAG 1.4.12 tests four values together, not line height alone. When a user applies these values with a style extension, text must not clip or overlap, and buttons must keep working.

• Line height: at least 1.5 times the font size.
• Spacing after paragraphs: at least 2 times the font size.
• Letter spacing: at least 0.12 times the font size.
• Word spacing: at least 0.16 times the font size.

In practice, boxes with a fixed height break most often in this test. For example, a card with its height locked in pixels hides the overflow once spacing grows. Menu items, tab labels and pricing cards carry the same risk. Therefore, let boxes that hold text grow with their content instead of giving them a fixed height.

Clear space between paragraphs helps scanning as well. Paragraph spacing should look clearly larger than line spacing. Otherwise, readers cannot see where a new thought begins. The AAA level criterion 1.4.8 likewise asks for paragraph spacing of at least 1.5 times the line spacing.

What contrast ratio should text meet?

The AA level Success Criterion 1.4.3 Contrast (Minimum) in WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text means 18 point or larger, or 14 point or larger in bold. The criterion translates these to roughly 24 pixels and 18.5 pixels in CSS.

Specifically, the ratios are strict thresholds with no rounding. For example, a color pair that measures 4.49:1 fails the 4.5:1 requirement. As a result, a gray that looks dark enough to a designer can still fail the test.

We measure every color pair during design with our color contrast checker. In particular, do not skip text on top of images, brand colored links on light backgrounds, muted text that people still need to read and form placeholders.

For the role of contrast in visual design as a whole, our guide on how to use contrast in design offers a wider frame. Our topic here is text legibility only.

What starting values work for the core settings?

The table below collects the starting values we use for body text, along with their basis. Values that come from official criteria carry their source. Values from field experience carry a starting range note.

Use the table as a safe base for a first draft, not as a rulebook, because every typeface behaves differently. Then fine tune with real content on real devices.

How does readable typography change on mobile?

Readable typography on mobile is not a shrunken copy of the desktop rules. Phone screens already produce short lines, so the line length problem often flips. Lines get too short, with two or three words each. In that case, reducing side padding works better than reducing the font size.

We recommend you keep mobile body text at 16 pixels or above. Also, some mobile browsers may zoom the page automatically when a user taps a form field with small text. Keeping form fields around 16 pixels usually prevents that jump.

On mobile screens, check these points as well:

• Keep paragraphs to four or five lines, because short paragraphs scan more easily on a phone.
• Make tables scroll sideways or turn them into cards.
• Do not let a sticky header and bottom bar cover half of the reading area.
• On pages people open outdoors, keep contrast well above the minimum.

To see how a page holds up on a phone, try our mobile friendly test. For the full design approach, read our guide on what mobile first design means.

How do you run the 200 percent resize test?

The AA level Success Criterion 1.4.4 Resize Text in WCAG 2.2 requires that text can grow up to 200 percent without assistive technology and without loss of content or functionality. This test shows whether your font size and unit choices really hold up.

We suggest this order:

1. Open the page in a desktop browser at normal size and note the key elements.
2. Set browser zoom to 200 percent.
3. Check that the menu opens, text does not clip and buttons stay clickable.
4. Next, try the browser setting that enlarges text only and repeat the same checks.
5. Fill in the forms and watch whether labels overlap their fields.
6. Log each issue with the page name and a screenshot.

In our experience, the most common failures here involve fixed height header areas and text placed over images. Wide content boxes that need horizontal scrolling also make reading hard at high zoom. So a few minutes of testing catches many issues that would otherwise come back as complaints.

Why does justified text hurt readability?

Justified text stretches word spacing to push each line to both edges. In print, hyphenation and fine spacing controls balance those gaps. On the web, those controls remain limited. The result is uneven spacing and tiring rivers of white running down the paragraph.

The AAA level criterion 1.4.8 also asks that text not align to both the left and right margins. Long words make the problem worse, because a word that does not fit pushes the previous line to open up its gaps. For that reason, we treat left alignment as the default for body text in left to right languages.

Centered text carries a similar issue. A short slogan or a two line heading can sit centered. However, in a centered paragraph longer than three lines, every line starts at a different point. The eye then has to hunt for the start each time. In short, save centering for emphasis and keep it out of body copy.

For right to left languages, the rule flips, and you align to the natural reading direction. Multilingual sites should switch this setting by language automatically.

How much does typeface choice affect readability?

The typeface is the ground that the core settings stand on. The same size and line height create very different density in different typefaces. For instance, a condensed typeface fits more characters into the same width, so you hit the line length limit sooner.

For body text, we suggest you check these traits in the typeface:

• It includes every character your languages need, so no glyph falls back to another font.
• Lowercase l, uppercase I and the digit 1 stay easy to tell apart.
• Regular and bold weights differ clearly.
• Body copy avoids thin weights, since thin strokes and light colors together lower legibility.

We cover font pairing in detail in our guide on how to pair fonts the right way. Speed matters here too. Text that appears late or shifts while fonts load annoys readers, so plan font loading together with your type scale.

How does heading hierarchy support scanning?

Web readers rarely read line by line at first. Instead, they scan. Headings, bold phrases and lists act as the stops along that scan. Therefore, readable pages rely on a clear heading structure as much as on well tuned paragraphs.

We follow three rules for heading hierarchy. First, the text under each heading should answer the question that heading promises. Second, avoid skipping levels, since jumping from H2 straight to H4 confuses screen reader users and scanners alike. Finally, keep a clear size and weight difference between headings and body text.

Also, the space above a heading should be larger than the space below it. That way, the heading visually attaches to its own section and separates from the previous one. This small detail often goes unnoticed, yet it plays a large role in how orderly a page feels.

If you want to know how readers move their eyes across a page, our article on the F pattern and how users scan pages explains that behavior in depth.

How does readability relate to SEO?

Google does not publish a ranking value for line length or line height. So a claim such as "set line height to 1.6 and your rankings will rise" does not hold. However, Google Search Central states clearly that its systems aim to reward helpful, reliable content that people find useful.

Readable typography puts that aim into practice. When readers can read comfortably, they find what they came for, follow related links and remember your brand. Text that people cannot read, on the other hand, fails to show its value no matter how good the content is. In other words, readability is not a direct signal. It is a precondition for good content to show itself.

On the mobile side, small text forces readers to zoom and weakens the page experience. It also helps to measure the language side of your copy. Our readability checker shows indicators such as sentence length and paragraph structure.

In short, readability in design and readability in writing complete each other. Without one, the other stays half done.

Which mistakes make text hard to read?

Below are the readable typography mistakes we meet most often in web design projects. Most of them come from decisions that make a design look good in a screenshot.

• Mid gray body text on a light gray background.
• Paragraphs that span the full width of a wide screen.
• A thin font weight for body copy.
• White text over a photo with no dark overlay behind it.
• Text that overflows and clips inside fixed height cards.
• Mobile body text dropped to 13 or 14 pixels.
• Long headings and paragraphs set in all caps.
• Links inside body text that rely on color alone, with no underline.

Above all, each of these mistakes looks small on its own. Yet when three or four appear on one page, readers leave instead of reading. That is why we suggest you run your prelaunch check against the whole list, not against a single item.

For the wider accessibility picture, our article on web accessibility and WCAG standards sums up the full set of criteria.

Example scenario: how do you fix a crowded service page?

This is an example scenario, not a real client case. For example, picture a service company page with 14 pixel light gray body text. On desktop, lines run to 110 characters, and line height sits at 1.2. The content itself is good, but readers face a wall on the first screen.

We would fix it in this order:

1. Raise body text to the rem equivalent of 17 pixels.
2. Give the text container a maximum width of around 68ch.
3. Set a unitless line height of 1.6 and increase paragraph spacing.
4. Darken the text color so contrast sits comfortably above 4.5:1.
5. Split long paragraphs and add subheadings and lists.
6. Confirm the result with the spacing test and the 200 percent resize test.

In this scenario, the page becomes far more inviting without changing a single word of content. Of course, results differ from page to page, and we promise no success rate here. Still, our experience shows that text settings are often the lowest cost design improvement you can make.

What belongs on a readable typography checklist?

Before launch, we suggest you walk through the list below for every template. Once you apply it to your main templates, new pages inherit the same settings automatically.

1. Body text equals at least 16 pixels and uses rem.
2. Desktop line length stays near 60 to 75 characters, with 80 at most.
3. Line height is unitless and 1.5 or higher.
4. Paragraph spacing looks clearly larger than line spacing.
5. Normal text reaches 4.5:1 contrast, and large text reaches 3:1 or more.
6. Body text aligns left and avoids justification.
7. Heading levels never skip, and their size steps look clear.
8. Links stand out by more than color alone.
9. Nothing clips or overflows after the WCAG 1.4.12 spacing test.
10. Menus, forms and buttons work at 200 percent zoom.
11. Mobile paragraphs stay short, and tables scroll.
12. Form fields and labels read clearly on mobile.

Keep the checklist in a shared team document and update it with each new template. That way, readable typography turns into a lasting standard for the site rather than a one time fix.

Who should set these values on your site?

Text settings start in the design file. In practice, though, they live in the theme code. So the healthiest path is for designer and developer to agree on the same values. Once you define the values at theme level, every new page and post carries the same legibility.

If you use a ready made theme, you can change many settings from the admin panel. However, issues such as fixed height boxes, a root size locked in pixels or styles injected by plugins usually need code work. On the other hand, if you are building a design from scratch, writing these values into the design system from day one costs far less than fixing them later.

In our web design service, we build the type scale, line length, line height and contrast values into the design system at the start of the project. Then we run the WCAG spacing and resize tests as part of our prelaunch review.

If your site's text is hard to read and you want a lasting fix, share your current pages with us. We will prepare a quote with scope and timeline. You can request one from our web design page.