If I had to choose an invention that changed humanity forever, it might be written communication. It has allowed us to capture knowledge and convey stories and has become a powerful tool for progress.
Even now, it is the main means of communicating and helping us understand the world, whether through a scientific paper, a text message in a messaging programme, or a post on the web.
You may have approached this article for CSS tricks and easy-to-implement design recommendations. That is not the objective; instead, it is to provide a broader view for enhancing the reading experience and learning in digital contexts. There will be multiple solutions, and people will decide what works and what does not. We, as designers, are simply “the means” to make this happen.
My objective is to offer you options and, above all, help change your mindset when approaching this problem. It is no longer sufficient to copy and paste a text and use the usual font. In a competitive context, we need to reduce the effort and ensure the time spent reading a piece of content is worthwhile.
What to consider
The first thing we need to consider is cognitive burden. We are exposed to thousands of impacts, decisions, etc., throughout the day and to the visual fatigue caused by our continued exposure to screens. Not only the monitors at our workplace but also our cell phones in our free time, televisions, projections in public places, etc.
That is why I strongly agree with the concept of invisible technology. G. Krishna already said it in his book The Best Interface is No Interface: first, we must ask ourselves if it is worth it and ensure that what we do is as non-invasive as possible. In fact, when we work well with typography, the content is the focus; everything else revolves around it.
That is why what we write is so important. We do not write for SEO (or at least we should not) but for people. If you can express it in one paragraph, it is better than in two… It is a matter of respect. Always think about the people who will read it and treat them at least as well as you would treat yourself.
In the end, what we look for when composing a text is to create a moment of enjoyment and reflection, just as when we read a haiku. The most valuable thing today is attention, so ensuring that our readers enjoy both what we are telling and how we present it is one of the most effective ways to achieve this.
Think about the context of use. We design differently for in-depth, thorough reading or for someone on the go. Medium.com is designed to favour reading time. Its business model is based on how long people stay on the platform and making them willing to pay for it. Instead, Citymapper.com seeks effectiveness, ensuring you get the necessary information and nothing else at the right time. That is why it shows us only the information about the station and the dock from where to take our transport, and only a bit more information since it is either no longer necessary or will be in the future.
One mistake we committed in digital design has been to replicate the physical world too much. First, with icons that were metaphors such as the bin or floppy disk; then, organizing the information in pages as if they were printed; and, now, homogenizing all designs for ease of use by following the patterns of the printed material. In my opinion, that takes away some of the opportunities that technology can provide us.
In any case, in the first days, it was the best way to bring a new digital world to people.
One of the problems with digital design, of which we need to be aware, is that we have distractions too close, such as an icon or a movement on the screen, and that we are in a new medium. Therefore, it is essential to design the reading and learning contexts as whole spaces, incorporating all relevant information; if there are external links, we must place them appropriately. For example, this could be in a resources and literature section at the end.
Improving the reading experience, a crucial aspect
As digital media consumption (web, apps, facilities, signage, etc.) continues to grow, how users interact with on-screen text significantly impacts understanding, information retention, and overall user comfort.
It is something we must remember in any case.
As a company, we need users to understand the value of our services and the quality and characteristics of our products.
As individuals, we must communicate effectively. Our future may depend on it.
Organizations (governments, city councils, associations, NGOs, etc.) must efficiently convey decisions and information. Without leaving anyone outside, adapting the content so everyone can access it. Fortunately, accessibility is no longer negotiable and is often guaranteed by law.
Not only typography
Some of the main factors that influence a compelling reading experience are typography and all the techniques we have learnt to use over the centuries. But merely making good use of these is not enough. It is also essential to consider the context of use, the circumstances in which people need to decrypt that information and create appropriate conditions for communication to be possible. We need to think globally: font, composition, format, interaction, etc.
Dispelling some myths
I want to start with something of paramount importance: critical thinking. On many occasions, something repeated invariably ends up being accepted, and we should always ask ourselves why things are happening and, whenever possible, validate it. If something helps us understand the world, that is scientific thinking, which formulates hypotheses and, through experiments, endeavours to make them replicable. This means that whenever A happens, B follows until someone proposes a new hypothesis that may invalidate previous knowledge. This is how humanity progresses.
That is why I am sure the ideas below break some preconceived ideas about reading.
There is no “most readable typography”
Some fonts are specifically designed for optimal screen use: larger sizes, generous “x” heights, and easily recognizable characters, among other factors. We can even use our skills and research to create the ideal font, but that does not necessarily mean it will always be the best choice. This is one of the myths I aim to dispel. The truth is that we read better what we are accustomed to. Let us see a couple of examples to illustrate this. The first example involves a good friend, one of the most eager learners I know. He is accustomed to reading scientific papers, which tend to feature pretty narrow columns. If you download one in PDF format, it may surprise and unsettle you. This is normal; it is not the most suitable format for display, but it is a convention. In fact, it happens so frequently that when faced with a text outside this format, he tends to adapt it, seeking that sense of “familiarity” that allows him to ignore the medium and focus on the content.
The same will happen to any of you. If the town hall communications are written in Comic Sans, and it is what you are used to, you will find it more comfortable and effective than a more professional yet less common font format.
The second example is the Gutenberg Bible, regarded as the first printed book, which marked the beginning of a new era of knowledge. There are several myths: one is that Koreans had been printing with movable type long before; another is that Johannes Gutenberg was primarily focused on achieving economic efficiency. Instead, he aimed to “imitate” the manuscripts that monks copied individually. If you do a quick search for example pages from this Bible, I challenge you to read them as swiftly as you read work emails. It is complex. The format features few variations, subject to metrics, and offers little space, but surprisingly, that was the most legible style at the time.
So, remember that the most legible things are those to which people are accustomed. We must not be elitist; we should adapt our formats to people’s needs and customs. We intend to solve problems, not create them.
My favourite flag is flush left
Another myth I would like to dispel is that just because something is always done a specific way, it does not mean it is the best way. Generally speaking, one of the best ways to solve a problem is to bring people to the table who are not “contaminated” by interests, specializations, or lack of vision. That is why it is so important to work with diverse teams. Junior profiles in companies provide a different, valuable perspective on problems; even when we validate our decisions, they will help us see the world differently.
With this said, why do 99.9% of printed books have justified texts? Equally aligned left and right.
Well, because “it is usually done this way” (which is one of the biggest enemies of innovation).
It makes some sense; as we discussed earlier, we read better what we are accustomed to. However, let us dig a little deeper.
Why is it usually done this way?
For technical issues. The pages were comprised of lead types mounted on a metal frame called “branch”. This structure was then secured for placement in the press for copying. Everything needed to fit together; otherwise, the types would fall, resulting in a slow and laborious process. Small pieces were inserted between letters and words to adjust the spacing, allowing for adjustments on both sides and ensuring the entire assembly formed a block. We became accustomed to this due to technical issues. While it is true that aesthetically, we appreciate order, geometry and harmonious designs, if we genuinely consider legibility, we encounter a problem.
Spacing words creates inconsistent visual space.
Let me explain. One day, you will need to wear glasses. Even if you do not have myopia, a time will come when your eyes lose flexibility. This is known as “eye fatigue”. In fact, we do not read character by character; instead, we scan the text and process it in blocks, which requires more effort and leads to reduced accuracy over time. Therefore, although the variations in distance may seem minimal, they significantly influence our comprehension and affect our reading experience.
To sum up, do not let yourself be swayed simply because something has always been done in a certain way. That does not mean it is always the best method. Adapt to the context and circumstances of those who will interpret that information.
Let us look at some recommendations.
Reading fast has a cost
You can find courses and recommendations for reading more books in less time. We cannot hack our brains. If you genuinely want to help people learn more, adjust the content and duration to what they ask for. How many books have you read that contained only two ideas and numerous examples? The problem is that we tailor the content to what the market demands: this occurs with music, film, and, of course, ideas that must take the form of a book when they could be an article. However, if you really want to help a person read faster, you have several options that you can implement in your designs:
Provide a visual guide. If you want to read faster, you should use your finger or a pencil to follow the line. A typical example is tables, where coloured cells, strokes, and borders may help differentiate rows.
Design for presbyopic readers. You will be helping everyone. Accessibility is not negotiable, and we all benefit from it. To alleviate the problem of “saccades”, we can control the width of the paragraphs (maximum and minimum sizes) and adapt the experience at different breakpoints per device. There are recommendations for a paragraph width of 2.5 alphabets, but I do not believe much in formulas and best practices. It depends on various factors: the device itself, the language (of course, German is not the same as English), and even the subject matter we are dealing with. As with any digital project, I recommend testing with users, particularly by evaluating their ability to retain and understand what has been read. In digital formats, it is always advisable to compose by justifying to the left (“right flag”) and carefully managing the shape of the saw teeth, so they are not too pronounced while controlling how words are grouped. Do not be afraid; we technically have resources at our disposal.
Compose as if it were poetry. This may be my primary recommendation. Whether it is a brand, a slogan, or any paragraph, you must ensure it all makes sense when read aloud. This is the best way to guarantee that the text is understandable and the reading experience enjoyable. Here, we can detect the rhythm, whether the paragraph’s width is too short or long, and if there is too little space between lines, etc. Sometimes, a simple unbreakable HTML space “ ” will prevent, for example, “New York” or a first and last name from appearing on different lines.
I believe editorial design is the best discipline for learning about composition, information architecture, and visual design for digital projects. This is because of its centuries of accumulated knowledge and the perfect balance it offers between beauty –something non-negotiable– and content transmission. Everything we see in classic magazines focused on fashion, architecture and similar subjects can significantly benefit our digital projects. One crucial aspect for content designers to consider is working with different levels of information. I illustrate this with an example that may seem unrelated but is shared across all communication fields. Imagine you go to the cinema with your siblings to watch a Pixar film. Both of you enjoy the story, but you might interpret it differently or laugh at different times. This occurs because all quality cultural content contains various layers. There are jokes for children, nods for older audiences, apparent references, and subtleties that might be missed on a first viewing, reserved for those passionate about a particular topic. Has it also happened to you that your favourite music album was not easy to appreciate on the first listening? Yet, as you listened to it repeatedly, you discovered its details and layers. The same concept applies to content. A journal article should have different layers for quick skimming, casual reading, and in-depth understanding of the subject. For the first level, provide a clear headline (avoiding clickbait), an abstract with essential information (the 5Ws), and key highlights (like statements, quotes, statistics, etc.); for the second level, incorporate expanded elements (such as a chart with an explanation of a particular area), intermediate headings, bold text, etc. Lastly, for deeper engagement, include well-organized text, references, footnotes, and a references section so that readers of all types may gain insights and knowledge from our writing. This applies equally to scientific texts and product sheets in online stores.
Beware of conventions; context prevails. What size should the text be? The usual recommendation is 10-12 points for printed text and 16 pixels for display. However, in the real world, there are no recipes that work for everything. An editorial might publish an 18-point body collection and become a hit when readers realize how comfortable larger bodies and generous margins are. The same applies to digital: are 16 pixels on a mobile screen while reading on a crowded subway the same as on a 13-inch tablet in the peaceful surroundings of home? Clearly, we must allow users to customize their experience, whether through adjustments or directly via interactions. Yet, there are decisions we can make to enhance the reading experience. If users are in a very bright setting and the device has a reflective screen, a dark background may not be the best choice; if we know our users separate the mobile screen from their face, we can adjust the size and distance to the device’s frame. This is a subtle refinement, but sensors and successful tests indicate that text size can change based on brightness, movement, etc. You may have seen the feature that prevents dizziness while reading on transport, a capability Apple has deployed on their devices. It is not necessary to overdevelop; instead, it is more important to cultivate a mindset of questioning things to discover the best possible way to solve problems. Unlike many, my opinion is that experiences should differ based on the device, the person, and the context. I do not want to read the same amount of information in a digital newspaper at home on my e-ink reader as I would from a social network link.
Design according to context. In line with the above, font size calculators are a good tool to determine the appropriate font size by defining distance and perceived size.
Finally, although it is a topic we could explore in greater depth, there are times when we must force users to proceed slowly. When we need them to read slower, we must also consider that a challenging procedure might be suitable. For instance, if you want to format a hard drive, you must understand the implications and the associated consequences. We can present the text gradually, emphasize that there is no turning back, and, as one of my favourite approaches, show them a statement like, “I’m going to format the hard drive and lose the information on it forever”, and require them to reproduce it via keyboard, rather than simply pressing a button.
Best practices for improving the reading experience
As you can see, the topic covers many bases. Always considering our sector’s design fundamentals and conventions, quality publications can inspire us, but we will collect some recommendations that we can implement immediately.
Break the contrast
The option with the most contrast is black on white; the second is the opposite: white on black, though the text should be made slightly thicker, and thirdly, yellow on black. However, there are better solutions for digital environments. Screens have significantly improved, but such extreme contrasts can be bothersome to the eye, may “burst” (expand uncontrolled), and ultimately lead to a less-than-ideal experience. To remedy this, we can “break” that relationship. We might use dark backgrounds that are not 100% black (for example, #303030) and light backgrounds that are not entirely white either (something like #E7E7E7 or a grey that aligns with the project’s dominant colour, tending towards blue, magenta, etc.), with text not in black on a white background but in a deep grey instead. You can find examples in the primary design systems. Still, it is crucial to create your own colour palettes tailored to the project’s branding and to validate them for accessibility using specialized tools. There are dozens of these, available both online and integrated into your work tools.
Light is the key
If photography is painting with light, it’s an element we should always consider, encompassing both the light projected by the screen and the context in which that information will be read.
For example, in a presentation, it is interesting that the background of the presentation is not pure white because that will be light in all its intensity and will annoy attendees. As for the light that the device projects, an application that should be read at night should adopt a dark theme not to dazzle us and adjust its contrast to warm options.
The importance of details
And that encompasses typography and legibility, vital to ensuring that text is clear and easy to read. The choice of font size, line spacing, letter spacing, and colour contrast are critical factors influencing readability. Additionally, ensuring the design is responsive is crucial, meaning the content adapts to different screen sizes to provide a consistent experience across devices. Text should be able to fit both large screens and mobile devices without losing clarity or structure. In my opinion, not pervasive, content should also be customized for the device, context, history, and so on.
It is easy to notice when texts have been professionally composed. And text composition through centuries of creation has given us the ability to create engaging compositions through details such as:
Hung punctuationrefers to situations where, for instance, in a quote, the quotation marks do not align with the surrounding text. This results in an imperfect composition.
For large bodies, specific settingsare created. The text occupying the entire browser is not the same as something smaller; we must track the characters, reduce the line spacing – even to the point of being negative – and, consequently, treat the styles not as an extension but as an entity.
In numbered or bulleted listings, we must treat them as we do with hung punctuation and apply a French indent, where the second line has a more significant margin than the first. This ensures that the element used to differentiate each section, whether a dash, a circle, or any other symbol, does not disrupt the text alignment.
Of course, we must create a rule for any element that does not fit and breaks harmony to ensure it works well visually. This applies to ordinal numbers, element alignment, and underlines, which were crucial in the early days of the internet to indicate that an element was interactive. As a platform specialized in content for thorough reading, Medium has a good article on how they implemented it: “Crafting link underlines on Medium”.
Conclusions
My objective with this article is not to provide you with overwhelming recommendations and best practices. The topic is broader than it appears, and if there is interest, I would be happy to expand on something I am passionate about. This is a rethinking of how we design reading experiences and other aspects of our digital products. Seek not only functionality but also the enjoyment of the experience because what truly matters is not whether you can read it but whether you will want to.
References / Related Links
The studio Ashler study is a good example of quality work. One of its founders, Octavio Pardo, is a researcher in typography and legibility. Available at: https://www.youtube.com/watch?v=EQL0hWlHHew~
ARILLA, Pedro (2024). Per què és bona aquesta Tipografia. Editorial Campgràfic.
BRINGHURST, Robert (2002). The Elements of Typographic Style. Hartley & Marks.
LUPTON, Ellen (2004). Thinking with Type. New York: Princeton Architectural Press.
GARFIELD, Simon (2010). Just My Type: A Book About Fonts. London: Profile Books.
TIDWELL, Jennifer (2011). Designing Interfícies: Patterns for Effective Interaction Design. Sebastopol, California: O’Reilly.
KUNZ, Willi (2000). Typography: Macro and Microaesthetics. Switzerland: Niggli.
WILLIAMS, Jim (2012). Type Matters!. London and New York: Merrell Publishers.
STRIZVER, Ilene (2013). Type Rules. John Wiley & Sons Inc.
KANE, John (2002). A Type Primer. London: Laurence King Publishing.
Recommended citation: RODRÍGUEZ, Diego. How to improve reading experiences on digital devices. Mosaic [online], January 2025, no. 202. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n202.2409
Deja un comentario