Text readability is a key aspect of improving the user experience on a website, e-commerce, or blog article. We do a lot of work on Core Web Vitals, Internet page load speed, and other substantive aspects. All very important, of course.
But we often forget this very thing: the quality of content also depends on its usability. Result of unreadable text? High bounce rate, low dwell time.
In summary: few conversions. it seems impossible but it is just so, sometimes readability of text is a disaster for the user experience and the website owner pays the economic consequences.
So the readability of the content we write and enrich with images, videos and other multimedia elements must be the focus of our attention. First at the stage of defining the various wireframes that introduce the structure of the website. Then, during the creation of mockups and official web pages. But what are the details of optimizing redability for user experience?
Eliminate walls of text from web pages
Let’s start with one of the pillars of good online text readability: you must divide your content into meaningful blocks. This is helpful in eliminating that annoying effect known as a wall of text. That is, a block of words that impresses the user, repels him, psychologically prohibits any attempt to start reading. The starting point is this: every idea must be included in a block of text.
This block consists of a handful of sentences. And each conceptual element in a paragraph consisting of one or more blocks introduced by a heading. That is, a heading that respects the hierarchy of web pages. These rules for good readability of online texts help orient the reader.
If you want to improve the result you can add internal anchors to make a navigation menu. The benefits: you create an initial summary so that you immediately suggest to the reader what you offer.
Must-read: how to improve font loading.
Create a pyramidal content structure
As Jakob Nielsen, the father of usability, suggests, online users do not read but scan. Of course, many reflections have taken up and adapted this passage but there is an underlying truth.
We need to win the audience’s attention right away. First by allowing web pages to load content right away. But also by communicating in the above-the-fold what we need to:
- Make it clear what the main theme is.
- Suggest the topic to search engines.
- Define the benefits in continuing reading.
You can use persuasive copywriting techniques–like PAS that pinpoints the problem, agitates it, and solves it–to enhance the creative aspect of the introduction. But you should always aim for an introductory summary. It may be a good idea to include a block made up of the title and subtitle.
Questa soluzione è importante e utile per dare subito tutte le informazioni come suggerisce la piramide rovesciata del giornalismo: dai ciò che serve al lettore per capire cosa tratti nel contenuto.
Aggiungi grassetto e liste puntate
Due dettagli semplici per migliorare la leggibilità del testo su internet (ma non solo). In primo luogo devi usare il grassetto solo dove serve, sulle parole necessarie all’utente per capire come puntare sguardo.
Inutile usare interi blocchi di testo in neretto, peggio ancora evitarlo del tutto. Devi dosare con cura questo elemento della formattazione, preferendo a che ha significato semantico. Inoltre è giusto sfruttare le liste puntate per elenchi non ordinati e numerate per quelle che definiscono una sequenza ben definita. Questo aiuta a migliorare sensibilmente la leggibilità del testo online.
Come scegliere il font del testo online
La Leggibilità del testo in chiave user experience passa automaticamente dal carattere utilizzato per presentare i tuoi testi. Primo punto: ragiona da mobile. E, soprattutto, attraverso le necessità del tuo pubblico ma anche del progetto editoriale che proponi. Qual è il font più leggibile su internet?
Definitely an ordinary sans-serif like an Arial or Verdana. Maybe a Helvetica. In any case, a font sticks clean and understandable without much effort. Patterns with graces still work well, though; the important thing is to choose solutions that are not exaggerated. And above all that they respect certain parameters:
- Leading: distance between lines (line spacing).
- Kerning: space between letters (kerning).
- Tracking: the space between characters in the text.
In this quagmire of elements, it is right to strike a balance. Too much white space between terms fatigues reading, and to solve the problem it is usually enough to set the formatting to flag. Reason?
Simple, this solution eliminates the messy, uneven gap between words. For kerning and line spacing, it is useful to reason about specific tables although, in principle, in the most widely used standard themes these aspects are already defined upstream. What needs to be carefully evaluated?
The font size must be comfortable. You have to consider that it will be read mainly from mobile and that the areas must be easy to read, click, highlight. So what is the minimum size? According to health.gov, 16 pixels is the appropriate size for a body that will be read by everyone.
Choice and use of headings (titles)
Another key aspect to improve the readability of text and make a decisive contribution to usability, but also to SEO, concerns the use of headings. That is, headings that help the user understand what the theme of a particular section of content is. These elements range from H1 – that is, the title, the main headline of the web page, the only content with this tag – to H6.
By dividing the text with these headlines and using hierarchical logic you can create a definitely beneficial reading experience. You have to observe some rules for formatting titles, though.
n the first place, headings should not be used to give aesthetic value to the text. If you need a larger font you need to increase the font and not use an H2 or H3. Ditto if you want it bold.
Then you need to use this text for a title and not a sentence or paragraph: 3 or 4 words is enough. Also make sure that there is a font size hierarchy that mirrors that of the header. This means that H1 has a higher font size than H2 which is subordinate and so on.
Obviously they must be larger than the font used for the body copy. Also, it is correct to assume a larger space between the last paragraph and the heading than between the header and the next block of text. This allows you to make it clear which side of the text the heading belongs to.