Improving Readability With Proper Typography

One of the most important ways to engage readers to your blog, product or website is having useful and interesting content. However, it is way pointless if the content is not readable due to an incorrect typography handling.

From the beginning of typographical design, some rules and principles became the standard in order to achieve readability and typographical beauty, and some of these principles are analyzed below, mostly based on T. Kaikkonen’s Interactive Guide to Blog Typography. So please, have a seat and enjoy reading.

General Layout

When a message is strong and important enough, it’s important to avoid distractions at a maximum level and keep blank fields between paragraphs focused on emphasizing important sets of text, giving it strength and hierarchical structure. Text column layout.
Text column layout in print publication.
Interactive Guide to Blog
Blog structure (above) is similar to layout used in printed publications 

This approach is the first step to make an accurate construction of a text column, and it is an strong issue to start considering other topics that will definitely affect this process.

Measure

Typography measurement relies on two main concepts: paragraph width or line measure, which is the amount of characters on a line (including blank spaces), and line height, which is the vertical space (commonly measured in pixels) between two text lines. In typography measurement there are some theories related and contrasted against each other. The first one states that a long line measure affects the readability of texts because the reader’s eyes need to make a bigger effort to reach the beginning of the next line. So in order to improve readability we have to follow this simple rule: the wider the line width, the higher the line height, and viceversa.
Different line measures of text without changing font faces nor types
Different line measures of text without changing font faces nor types
Source : Interactive Guide to Blog Typography

The second theory focuses these concepts on the font been used. It means, word count per line and space between lines are relative to font shape and its characteristics, and there isn’t an absolute rule applicable for every text. It needs to be considered not just x-height but also ascenders and descenders in order to establish a clear scheme for the text to avoid confusing the reader by heaping characters.

Visual Hierarchy

This is all about giving the required importance to each element of a text. Every single text we write may have titles, subtitles, quotations, dense paragraphs, small paragraphs and so on, and these elements become a reference to readers in order to reach the content they’re looking for. Visual hierarchy relies on the first layout and once the content is known, it needs some degrees of importance by identifying titles, subtitles, paragraphs and some other text elements. Once this process is done, it will be easier to translate that designed hierarchy into something visible with the help of fonts, colors and other elements.

Let’s take a look on these elements. See how they behave and how to properly assign typography elements to them.

Title and Body Text Handling

To improve readability, titles need to stand out from the body text; which allows readers creating not only an idea of what the portion of body text is all about, but also help them browse the whole writing and skip topics they may consider pointless.

Example of balanced title and body text
Great example of balance among text, brief intro and body text.
Source: The New York Times

Consequently, the title needs to comply some characteristics to acquire personality, so the text there should be bigger and stronger than the body text, which is possible by choosing a correct font family. There are families that have several typefaces and different weights. This option is needed for the font to add a certain personality to texts without switching fonts. Moreover, some fonts are extremely simple and a combination with a second one is required. That´s why it’s better to keep a contrasting balance between them by choosing the fonts depending on the mood of the message (link to design guide – fonts like chords). It’s important to keep clear that web paragraphs are handled by browsers as blocks with margins at the top and at the bottom, so one good way to highlight each paragraph is by using indentation. Its use makes text looks more dynamic, texts become less rectangular and it helps guiding readers’ eyes to new ideas hidden inside the text.

The Role of the Font in the Text

Paragraphs are handy elements to show an organized writing. However, there is another really important part to consider: the correct use of selected fonts. The choice of a font family or complementary fonts when the main font is simple is not enough. The way they look as a group inside the text is very important and a topic of concern. Let’s start with hinting. Everything is displayed in those pixel grids which compose any devices’ screen and, in a perfect world, everything fits the right way on those grids. That’s the point here, and the only way to achieve some experience and know how effectively hinting fonts is by testing, testing and testing. It’s better if this process is cross-browser because every one of them render differently, and that will make text easier to read. Example of a character before and after hinting according its structure
Example of a character before and after hinting according its structure [source]

Now that the font displays as correctly as possible, other point to take into account is the font’s x-height. That feature is the best indicator of a font’s actual size -instead of its point size- so choosing a big enough x-height for the font guarantees letters would be readable because its size is accurate, or on the other hand, to stand out because it’s bigger than other characters.
Example of how x-height is a reference for Caps Height, ascenders and descenders
Example of how x-height is a reference for Caps Height, ascenders and descenders
Source: Designing for the Web

Since fonts need different heights depending on the role they’re playing inside of text, it’s necessary to keep a balanced proportion to avoid losing interest from readers at any point of the writing. This shouldn’t be taken for granted, and applying a modular scale will help you keep balance between different elements without becoming overwhelming by avoiding absolute contrast among them.
Modular Scale, a useful tool to calculate font sizes according to a specific ratio
Modular Scale, a useful tool to calculate font sizes according to a specific ratio

Finally, acronyms, initial words and some abbreviations are usually written in caps. Keeping regular caps highlights those elements even if the intention is only to quickly mention them. An accurate solution for this is using small caps for the same font by reducing them to the selected x-height. Some fonts have their own characters for small caps; if they don’t, the CSS rule font-variant: small-caps; will force regular caps to x-height and achieve this effect.

In conclusion, it’s really important to pay close attention on readability rules when you take time writing the content for your blog or website. The purpose of web content is engaging readers by making them voluntarily spend a good amount of time interacting with it, enjoying and eventually catch the message you want to share, so for that purpose, all these tips are really worth to be applied and tested.

Recommended readings:


Author:

Shock family is a team of designers, developers and web enthusiasts, with several years of experience in web design. They are the group behind projects like IconShock, the largest icon library on the web; Grid Layout Shock, WordPress Themes Shock