Good typography makes a website easier to understand. Use headings to create a clear structure, paragraphs for readable content and styles such as bold, highlights and lists to draw attention to the information that matters.

Tip: Keep formatting consistent. If everything is emphasised, nothing stands out.

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

Use headings in order to organise your content into clear sections.

Paragraphs & quotes

Paragraph text is best for your main content. Keep paragraphs reasonably short, particularly when people may be reading on a phone.

A quotation can highlight a testimonial, review, important statement or a memorable piece of information.

Use quotes selectively so they remain noticeable.

Text styles

Bold text draws attention to important words.

Italic text can add subtle emphasis.

Underline text is useful sparingly.

Link text

Badge Highlighted text

Use emphasis to guide the reader rather than decorate every sentence.

Lists

Use bullets when order doesn't matter:

  • First useful point

  • Another useful point

  • One final point

Use numbered lists for steps or sequences:

  1. Start here

  2. Do this next

  3. Finish here

Create a clear heading structure

Headings help visitors scan a page and understand how information is organised. They also provide useful structure for search engines and assistive technologies.

A typical page might follow this pattern:

Main page heading

A short introduction explaining what the page is about.

Main section

Content relating to the first important subject.

Supporting section

More detailed information within that subject.

Another main section

The next major part of the page.

Tip: Choose heading levels because of the structure of your content, not simply because you prefer how a particular heading size looks.

Make pages easy to scan

Most visitors won't read every word from top to bottom. Clear headings, short paragraphs and useful lists make it easier to find relevant information quickly.

Keep paragraphs focused

Try to give each paragraph one main idea. Breaking long passages into smaller sections can make detailed information much easier to read.

Highlight what matters

Use bold text, badges and highlights for information that deserves attention.

Avoid emphasising too much at once.

Use meaningful links

Link text should tell visitors where the link goes or what they'll find there.

“View delivery information” is more useful than “click here.”

Use lists for the right content

Bulleted lists are useful for features, benefits, specifications, requirements and groups of related information.

For example:

  • Clear product descriptions

  • Useful photographs

  • Contact information

  • Delivery details

  • Frequently asked questions

Numbered lists are better when sequence matters:

  1. Choose your product

  2. Select the options you need

  3. Add it to your basket

  4. Complete checkout

Quotes can add another voice

Quotes work particularly well for testimonials, customer feedback, case studies and important statements.

“The information was clear, ordering was straightforward and I knew exactly what to expect.”

When using a genuine customer testimonial, reproduce their words accurately and only identify the person or business where you have appropriate permission.

Use badges for short labels

Badges work best for small pieces of information rather than complete sentences.

New Popular Featured Limited

They can help identify status, categories or short attributes without interrupting the surrounding content.

Use highlights for important information

A highlight can draw attention to something visitors shouldn't miss.

Orders placed before the stated cut-off are normally processed the same working day.

They can be useful for notices, key benefits, instructions or important information, but use them selectively.

Keep formatting consistent

A strong website usually uses a relatively small set of text styles consistently rather than creating a new style for every piece of content.

Before publishing a page, ask:

  • Is there one clear main heading?

  • Do subheadings follow a logical order?

  • Are paragraphs comfortable to read?

  • Can someone scan the page and understand its structure?

  • Are links descriptive?

  • Have bold, highlights and badges been used selectively?

  • Are lists being used where they make information clearer?

  • Does the page remain easy to read on a smaller screen?

A simple rule

Structure first, styling second.

Write and organise the information so it makes sense, then use typography to help communicate that structure.