3. Give lines and paragraphs enough breathing room

Line spacing affects how easily the eye can move from one line to the next. When lines are packed too closely, paragraphs can feel dense. When spacing is excessive, the lines may stop feeling like one paragraph. Headings often need different spacing from body text, so one value does not suit every element.

Look at the page rather than the setting alone. Can you follow each line without accidentally jumping to the line above or below? Is there enough space between paragraphs to show where one thought ends and the next begins? Do lists feel separated rather than crowded?

W3C’s text-spacing guidance is useful here, but it is often misunderstood. WCAG 2.2 does not say every website must use one prescribed line-height value by default. The requirement is that content should continue to work when a user applies larger spacing settings. That means a rigid text box that clips words when spacing changes is a warning sign.

Avoid squeezing body copy with aggressive negative letter spacing. Also be cautious with fully justified paragraphs in left-to-right languages: forcing both edges of a paragraph to align can create irregular gaps between words, which can make tracking harder.

4. Control line length on wide screens

A desktop monitor gives you more horizontal space, but that does not mean a paragraph should use all of it. Very long lines make the eye travel farther and can make it harder to find the start of the next line.

There is no universal character count that fits every website because font size, letter width and layout all change the experience. The practical fix is to use a sensible maximum width for reading content. If a service-page paragraph stretches almost from one side of a large screen to the other, the content column is probably doing too much work.

On smaller screens, the opposite mistake is common: designers try to preserve a desktop look by shrinking the text. Let the text wrap naturally instead. Mobile layouts should use the available width efficiently without turning ordinary body copy into fine print.

A website can have strong services, good photographs and clear calls to action, yet still feel difficult to use because the text is tiring to read. That problem is often blamed on the font, but website readability is rarely about one font choice on its own. It is the combined effect of typeface, size, spacing, line length, hierarchy and consistency.

For a small-business owner, the goal is not to become a typographer. It is to make sure ordinary visitors can read your pages comfortably on a laptop or phone, understand what is most important and move through the content without fighting the design.

There is no single font, body-text size or line length that is correct for every website. Different typefaces have different proportions, different pages contain different kinds of content, and different screens create different reading conditions. A useful review therefore focuses on practical outcomes rather than one magic number.

Readability is a system, not a font choice

Typography is the way written content is visually presented. On a website, that includes the font family, font weight, text size, line height, spacing, width of the text column and the visual relationship between headings, paragraphs, labels and other text.

A readable site usually feels calm and predictable. Body copy is comfortable to follow. Headings stand out without overwhelming the page. Paragraphs do not stretch endlessly across a wide monitor. Text does not become tiny on a phone. Similar elements look similar from page to page.

That is why changing only the font may not solve the problem. A perfectly usable font can become difficult to read if it is too small, too light, too tightly spaced or placed in lines that are excessively wide.

1. Choose a font that stays clear in real content

Start with the text people actually need to read: service descriptions, prices, instructions, FAQs, contact details and important notices. A font that looks impressive in a logo or short heading may be uncomfortable across several paragraphs.

For body copy, look for clear letter shapes, a weight that does not feel faint and enough distinction between similar characters. Highly decorative faces, very thin weights and unusual letterforms can reduce legibility, especially when the text is small or contrast is weak.

Serif and sans-serif fonts can both work well on websites. The useful question is not “Which category is always best?” but “Can people read this font comfortably in our actual layout?” Test a full paragraph, not just a font sample. Include numbers, punctuation, capital letters and the kinds of names or terms your customers see.

If your brand uses a distinctive display font, you do not have to use it for every paragraph. It can remain part of the visual identity in headings or selected accents while body copy uses a clearer reading font. For broader decisions about brand fonts, colours and visual consistency, see WebWise Management’s small-business style-guide article.

2. Set text size for comfortable reading, not to fit more on screen

Small text can make a website look neat in a design preview while making real reading unnecessarily hard. On the other hand, simply making everything very large can weaken hierarchy and create awkward layouts. The right size depends on the typeface, weight, line spacing, screen and role of the text.

Instead of treating one pixel value as a universal rule, review the page at normal browser settings. Can you read the main body copy at a normal viewing distance without leaning closer or zooming? Are important labels and supporting details still comfortably visible? Does the same page remain readable on a phone?

Also test enlargement. WCAG 2.2 includes a Level AA requirement that text can be resized up to 200% without loss of content or functionality. For a small-business owner, a practical version of that check is simple: zoom the page and look for text that gets clipped, overlaps other elements or disappears behind fixed boxes. If the layout breaks as the text grows, the problem is not just the font size; the surrounding design needs attention.

5. Make visual hierarchy obvious

Visitors rarely read a business website from the first word to the last. They scan. Typography should help them see what the page is about, where one section ends and another begins, and which details deserve attention.

Use a small, repeatable set of visual levels. A page title should clearly outrank a section heading; a section heading should clearly outrank body copy; supporting notes should look secondary without becoming unreadably small. Size, weight and spacing can work together to create that difference.

Do not make every sentence bold or oversized. When too many elements compete for attention, hierarchy disappears. Bold text is most useful when it highlights genuinely important words or short pieces of information.

This section is about visual hierarchy: how size, weight and spacing help readers scan the page. The underlying H1, H2 and H3 heading structure is a separate subject; here, focus on what readers can see and follow.

6. Keep typography consistent across the site

A website becomes easier to scan when the same kinds of information are presented in the same way. If service-page headings use one style on one page and a completely different size, weight or font on another, visitors have to keep reinterpreting the layout.

For many small-business sites, a restrained typography system is enough: a dependable body style, a small set of heading styles and consistent treatments for labels, buttons and supporting text. One font family with multiple weights may be sufficient; some brands may use a second family for headings. The important point is not the number itself but whether each style has a clear job.

Where possible, set typography through the website’s global styles or theme rather than formatting individual paragraphs one by one. That makes later improvements easier and reduces accidental inconsistencies.

If you are still deciding which fonts belong to the brand itself, keep that decision in the brand system. The style-guide article covers that broader responsibility; this guide is about whether the chosen website typography is readable in use.

7. Check desktop and mobile without turning this into a full mobile audit

Typography should survive a change in screen size. A heading that looks balanced on a laptop may wrap into five awkward lines on a phone. A comfortable text column on desktop may become cramped if mobile padding is too large. A fixed-height card may cut off text when the font grows.

Review at least one real phone as well as a desktop browser. Check the homepage, one important service page and one text-heavy page such as an FAQ or article. Look specifically at text size, wrapping, spacing, clipping and the consistency of headings and body copy.

For the broader mobile questions — navigation, tap targets, forms, horizontal scrolling and real-device usability — use WebWise Management’s mobile-friendly website checklist. Blog 079 only owns the typography part of that review.

A practical 10-minute website readability check

You can spot many typography problems without specialist tools. Choose three representative pages and work through this quick check:

· Read a normal paragraph on desktop at 100% zoom. If it feels cramped, tiny or unusually wide, note it.

· Zoom to 200% and check whether text is clipped, overlaps other content or disappears.

· Open the same page on a real phone. Make sure ordinary body text is comfortable without pinch-zooming.

· Compare headings, body copy, labels and small supporting text. Their roles should be visually clear.

· Look for paragraphs that run almost the full width of a large desktop screen.

· Check whether line spacing and paragraph spacing make longer sections easy to follow.

· Look for inconsistent fonts, weights or sizes across similar pages.

· Check fully justified blocks, very thin text and decorative fonts used for long passages.

Do not try to redesign the entire website in one sitting. Fix the most obvious reading barriers first, then check the same pages again. Small adjustments to body text, spacing and content width can make a site feel noticeably calmer without changing the brand.

Typography is only one part of a usable website

Readable typography supports a better website, but it does not replace broader accessibility work. Colour contrast, keyboard access, image alternatives, form labels and other requirements still matter. WebWise Management’s website accessibility guide covers that wider framework.

Typography also cannot rescue unclear or incomplete content. If you are preparing a new website, the website-content checklist explains the business information, page content, images and approvals that should be gathered before or during a build.

The useful boundary is simple: Blog 079 helps you judge whether the words already on the page are presented in a way that people can comfortably read.

Make the website easier to read before making it more decorative

Good website typography is rarely about finding the trendiest font. It is about reducing friction. Choose clear letterforms, size text for real reading, give paragraphs breathing room, control line length, create a predictable visual hierarchy and test the result on more than one screen.

If a change makes the page more stylish but harder to read, it is not an improvement. If a modest change makes the same content easier to scan and understand, it is doing useful work.

If you are planning a new website or updating an existing one, WebWise Management offers mobile-friendly small-business website design and assistance with page structure and content layout. Keep readability on the review list from the start, rather than treating it as a final cosmetic adjustment.

Contact

Reach out anytime for personalized support.

Email:

Phone:

info@webwisemanagement.co.za

+27 72 709 7557

© 2026. All rights reserved.

Services

Home

Portfolio

Contact