Comfortable text. How to make text easier for the reader.

Rushan Khabibullin
Flatstack Thoughts
Published in
9 min readDec 4, 2020

--

I think everyone saw hard-readable texts on the internet, presentations or documents that are very difficult to read. You can read the text several times, but you won’t remember anything. What’s the problem? Some may say: “I am not a writer. Why should I work on the text?”. The answer is simple — to be understood. The good text improves communication, responds to questions and saves your colleagues’ time.

The quality of the text depends on two main criteria:

  • visual design (fonts, headings and subheadings, text width, highlights, spacing between lines and paragraphs, illustrations and diagrams).
  • logic and meaning (focus on what is important, answering questions, arguments for theses, no unnecessary words).

Visual Design

You don’t have to be a designer to clean up the text. It is enough to know a few techniques that will make it easier to understand the text.

1. The view moves from left to right and from top to bottom.

No need to get carried away with aligning the text in different directions. If the text is centered, our view moves too chaotically, because the beginning of a line is always in different places. If all lines are aligned on the left side, the text can be read more easily.

Centre alignment and left side alignment of text.

2. Reduce the length of the line.

The line length has a direct impact on reading speed. The reason for this is that after reading the line the reader should look at the leftmost word of the new line. Also if the line is too long, the reader may return to the wrong line. To make the text look comfortable, the width of the line should be around 60 characters.

A line of 110 and 60 characters long.

And the line spacing for comfortable reading is 130–150% greater than the font size. For example, if the character size is 16 px, the convenient line spacing is 24 px.

The difference between a line spacing of 20 and 24 pixels.

Each paragraph of the text carries a certain thought. To help the reader navigate between them, paragraphs should be separated from each other by a certain distance. The distance between paragraphs must be no less than the font size. Therefore, if we have used a 16 px font, the distance between paragraphs should be at least 16 px.

Distances between paragraphs 8 and 24 pixels.

The sequence of spacing between the elements makes the text more attractive, so it’s not good to align the text in width. The width alignment of the text creates a chaotic distance between words. Because of this, the beginning and end of a line are always in the same place. This creates a large difference in the spacing between words and the eyes is hard to move evenly horizontally.

Width and left edge alignment of text.

3. Highlight keywords

When we reading a lot of text, it is difficult to keep focus for a long time. In most cases the text will be readed diagonally, stopping at the words of interest. So we can simplify the task for the reader and highlight key information in the text. This trick will manage the reader’s attention, but it will not work if we highlight every second word of the text.

Example of key information highlighting.

Some people also try to highlight important information in CAPITAL LETTERS, but this is a bad idea. It’s more difficult to read a word when it’s written in capital letters. This happens because the height of all capital letters is the same, but lowercase letters have elements sticking up or down. For example, the letter “b” or “y”. Thanks to these elements, we read the text much faster than when all letters are the same height.

Comparison of different text highlights.

Another way to highlight important information is to use factoids. This technique allows you to take key information beyond the text and focus the reader’s attention on this information. An example of a factoid could be a quote, numbers or even a photo.

Example of factoids that are placed to the right.

4. Use the list to enumerate something

A horizontal enumeration is seen more complex than a column-written enumeration. The list helps the reader to focus on each item, clearly see the total number of items and quickly find the right item if necessary.

Example of enumeration of elements in the text.

5. Make headlines and subheadings

Simplify the reader’s navigation and let the structure of your text be seen. Perhaps the reader is looking for something specific in your article, so make it easier for the reader to navigate. The titles of the headings and subheadings should describe what this part of the text decides. If you are writing instructions for connecting to the database, the informative title will be “How to connect to the database” or “Connecting to the database”, but not just “Database”.

The difference between solid text and text with titles.

Also make sure that the size of the title, subheading and main text are different and visually recognizable. For example, the size of the main font can be 16 px, the subheading 18 px and the title 24 px.

Example of headings and subheadings in the text.

6. Clear your visual waste

Don’t get carried away by adding pictures or visual elements that may distract the reader from your text. Each element attached to the text must help the reader understand the information. So before you add something to the text, think about how it might be useful to the reader.

Two versions of posts for Instagram.

7. Simplify charts and diagrams

If you use complex schemes, the reader may not understand the meaning of image. If you need to add an illustration, scheme, graph or screenshot to the text, don’t leave it out of your context. Highlight the key points to which you want to pay attention and add a signature that explains the meaning of your image.

Example of a complex and simplified chart.

The examples above shows two completely different graphics. The upper graph is designed for experts and is oriented to study in a quiet environment within minutes. Each scale of this chart has value so that the expert can most accurately understand the difference between the elements. The lower chart was used by Apple when speaking about their M1 CPUs. This graph is as simple as possible so that the viewer who does not understand the nuances of technology can roughly estimate the power of the new CPU in a few seconds. These graphs cannot be compared with each other to find out which one is better, as they are made for different audiences and for different situations.

8. Corners of a document or screen — ideal place for captions

The layout of texts on the main page of a document or screen is particularly difficult. How we can arrange elements when there is so much space? Many choose to centre all information, but the corners of our page are the most favorable places for the less important (secondary) information.

The captions on the corners of the sheet look the most stable.

The occupied corners of a sheet or slide allow the elements to be arranged in a rectangle. The more obvious the arrangement of the elements reminds a rectangle, the more better it looks.

The example below shows two options for arranging the elements. The red color highlights the rectangle on which the elements are aligned.

Arrangement of elements by rectangle shape.

To avoid chaos, elements can be placed inside visible rectangles. In this way, the sheet will resemble a table and each element will be placed in its own block. The example below shows how this technique can simplify the perception of large amounts of content.

Location of elements inside rectangles.

Logic and meaning of text

Beautiful text will improve the text visually, but the presentation of information also has a significant impact on the perception of the text. There are several things you need to consider in order for the text not to appear empty or complex:

1. Not talking about yourself

Do not focus on your emotions and stories. When we form a thought, we usually focus on ourselves, our results and actions. This is not a bad thing, this is the way a human being works. However, we do write a text for the readers, so we have to talk about solving their problems.

Text about yourself: “We have long analysed projects and selected the best specialists to work on this system. During this stage so many interesting events happened to us […]. Our team has already released over 10 products in the past few years and we continue to conquer new horizons! There are still so many interesting things ahead of us […].” (The text tells only about how good we are.)

Text aimed at the reader: “We report on progress every day, so you will always be aware of the latest developments. […]. Before we start development, you will be able to evaluate the application with a clickable prototype. This will allow the design to be corrected before the development stage […].” (The text indicates what the reader will receive.)

2. Arguments and examples

When you explain something to a client, colleague or reader, it is important to provide proof of your words. And the example must be familiar not only to you, but also to the reader. If we are in the field of development, we can load the client with complex terms and show how cool we are. Only a client who works on a farm and grows vegetables is unlikely to understand us. Perhaps your words can be explained on the example of Facebook, Twitter or other things that are familiar to the client.

3. Concrete information only

Use accurate information, without abstract words that do not make any sense.

Useless information:

  • “We have been working for over 10 years!” (Okay, how does this help me?)
  • “We will execute the project using modern technologies” (What benefits will I get from modern technology?)
  • “Our best developers will take care of your project!” (Thank you, but do you offer customers bad developers?)

Concrete information:

  • We have been developing products in the medical field for several years now, so we are consulted by doctors during development. This helps us adapt projects to the needs of hospitals.
  • We are increasing the number of developers as the project grows. This allows us to develop improvements on time and monitor the quality of all parts of the product.

4. Conclude your thoughts

Once you have formed some thoughts in the form of text, ask yourself the question “so what?”. This helps to get rid of content that is of no use to the reader.

For example: “Due to the large number of bugs in the application after the release, we involved a QA department in the project. (so what?) This will help us find the bugs during the development phase and produce a more stable product.”

Conclusion

The tips described above will make the text look comfortable to read, but none of this makes sense if the text does not solve the reader’s problem. A text that is difficult to read can be more useful than an attractive text if it contains answers to readers’ questions. So think about the usefulness of the text before you design it. It will help you to look more professional and the reader to solve the problem and be grateful to you for that.

I hope you have found something useful here. Thank you for your time!

--

--