What to consider when designing for on-screen reading

User Experience Consultant

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.



September 1, 2023

Mobile UX: unlocking higher conversions for a mobile-first world

Here we covered the importance of mobile UX in conversion optimisation, understanding mobile users' behaviour, and what to consider when designing for mobile devices

August 25, 2023

Usability testing for conversion optimisation: optimising UX to drive conversions

In this article we discuss how usability testing reveals nuanced user behaviours and can lead to more effective conversion strategies

August 21, 2023

UX Audit checklist for optimal website performance

Throughout this article, we will outline the essential areas to evaluate within a user experience audit checklist, along with key insights and recommendations