What to consider when designing for on-screen reading

Sarah Edwards

User Experience Consultant

12 May 2022

In today’s information-rich world there are multiple things competing for a reader’s attention. This has created the perception that on-screen reading can cause the mind to wander off. But it’s not quite as simple as that.


The move towards increased digital reading presented a change that has potentially impacted behaviours, but the evidence shows wandering off isn’t just due to the digital media format. It’s also due to the perceived quality of online content and the perception that paper is better suited for “effortful learning”. The research found that users believe the screen is for “fast and shallow reading of short texts such as news, e-mails, and forum notes.”


However, it can be said that if a user’s perception is that screen reading is for fast and shallow reading, then that is the experience they are likely to have. It’s true to say that several factors have an impact, one being the distractions posed by viewing content on a multi-use device. The other, as noted in ‘Reading linear texts on paper  versus computer screen: Effects on reading comprehension’, is the screen resolution, backlighting and illuminative effect of LCD screens. These affect the visual processing of text and therefore a reader’s comprehension.


While print reading offers the ability to absorb and ‘deep read’ information, digital reading can outperform the printed copy by offering the ability to quickly and easily navigate to relevant content. Considering the UX design and improving the reader experience in digital reading can maximise the likelihood of comprehension and intake of information. Similarly, the aesthetic of the content is also linked to reader absorption.


Tips for improving the digital experience

Get the font selection right
Choose a font that clearly separates each letter, offering symmetry and balance. Use bold for emphasis and avoid using italics.


Font size
Ensure the font size matches the font type and offers clarity when reading.


Line height (leading)
Consider the line height (between each line) to help the eye/brain decipher letters. Consider height between each paragraph; it should be 1.5 times larger than line.


Structure content for digital reading
Readers stand in an F shaped pattern. Use clear sections and subheadings help the readers comprehension.


Consider the mobile layout
Display content in a single column and avoid actions such as hover.


Use contrast
Dark text on a light background improves readability and black on white also avoids difficulties with colour blindness.


Some of the key guidance to adhere to includes all text being ‘live’, pre-recorded audio and video should have text captions, text must have a visual contrast of 4:5:1 and text should be resized up to 200.


Designing for disability
Accessibility factors such as age, dyslexia and eyesight should be considered.
Our insight report Best practices for reading online is a great resource for anyone interested in creating accessible and engaging digital reading experiences. Download the full report to learn more about the science of reading online, best practices for visual design and best in class examples. https://makeitclear.co.uk/insight/best-practices-for-reading-online


Have a call

We’d love to talk to you about how Make it Clear can support your organisation. Book a call here.



March 9, 2022

UX Glossary

A glossary of commonly used UX terms to help designers, researchers and developers communicate with clients, stakeholders and fellow team members.

November 22, 2022

A guide to UX surveys

Discover how UX surveys collect qualitative and quantitative insights from a group of users on their experiences using a digital product.

November 16, 2022

UX/ UI tips: A guide to the grid

Unpack how grids provide structure and guidance which ensures your UX is seamless and enjoyable for all screen sizes.

November 10, 2022

Winning Gold in the London design awards

We've won the Gold award in the 2022 London Design Awards for our Reputation Portal UX/UI project with Spamhaus.