Websites & patient experience · Practical guide

Keep long page headings readable on phones

Large headings can break into isolated fragments or overflow on small screens. A word split into individual letters makes the page harder to recognise and can push useful content far down.

Healthcare website and appointment calendar displayed on devices at an empty clinic reception.
Make the website useful for the people who use your practice.

What to change

Ask your supplier to let headings wrap naturally at different widths and enlarged text sizes, without breaking words into fragments or covering the introduction.

A worked example

Illustrative example

A service heading occupies three readable lines on a phone and leaves a clear gap before its introduction instead of colliding with the next block.

Healthcare website design showing connected desktop and mobile service and enquiry layouts.
Make the service and next step clear on every screen.
Healthcare website accessibility illustrated by a focus outline, keyboard key, contrast samples and form.
Review keyboard access, contrast and understandable form fields.

Why this matters to your practice

A heading tells a visitor they have reached the right page. It should remain recognisable when a long service name wraps on a small screen. Ask your supplier to test several narrow widths and larger text, rather than adjust a line break to suit one screenshot. Look for isolated letters, words broken awkwardly and collisions with the introduction. The aim is a clear, readable title that adapts naturally, including when your team later publishes a longer heading.

A practical review example

A longer service title may fit two lines on one phone and become an awkward column of fragments on another. Ask your supplier to vary the width rather than check a single preset. Include a realistic future heading longer than today's sample. The full title should remain recognisable, with a clear space before the opening paragraph. Fixed line breaks chosen to repair one screenshot should be reviewed across the other sizes, since they can create a different problem as soon as the available width changes.

How to check the result

Accept when headings stay complete, understandable and visually separate from adjacent content across the supported size range.

A mistake to avoid

Inserting fixed line breaks to repair one screenshot can create unnatural fragments at another screen width.

Turn reading into a next step

Your action checklist

Work through these checks with your team or supplier. Tick the ones you have resolved and leave unknowns open.

Checks to discuss

Record what you know, what is still missing and the answer you need from your team or supplier.

Use project decisions only, without personal, patient or confidential details. Entries stay in this page and are not submitted to Kay & Co. Copy or download before leaving; this page does not save your notes.

Further reading

These sources provide background for the topic. The practice examples and checklist are illustrative planning suggestions from Kay & Co.

Related guides

Need help with this?

Tell us what is getting in the way. Kay & Co. can help you understand the options and turn the next step into something that works for your practice.

Explore websites & patient experience services or discuss your project.

Try the free Healthcare Digital Planner to find your starting priority.