Your guide for ensuring the best readability

Reading is akin to muscle memory; it is one of the most fundamental skills we have developed. However, we often take good typography for granted. Typography is essential in design and serves as the most effective means of conveying information, forming the cornerstone of our work.

Crafting a well-designed piece with good readability is nuanced, skillful, yet straightforward. Despite this, many designers still struggle with it. Have you ever visited a website and felt frustrated by its tiny font, inadequate contrast, or poor font choice?

How can you improve readability so your message gets across clearly?

What type of design are you going to make?

Before we dive into how to ensure your design’s readability, it’s crucial to determine if your design is text-heavy or interaction-heavy.

Text-heavy design (such as articles, blogs, and news) focuses primarily on reading.

Interaction-heavy design (like apps, feeds, and forms) prioritizes user interaction or quick skimming instead of deep reading.

For example, a blog post falls under the text-heavy category, while a contact form or dashboard is considered interaction-heavy.

In text-heavy designs, the primary aim is to ensure that the text is comfortable to read for extended periods.

Conversely, interaction-heavy designs focus on presenting information clearly and efficiently, allowing users to easily view and understand the relationships between text elements.

If you design for long-form content, such as blog posts, you have to take into account eye fatigue and much more about readability.

When you design for interaction-heavy design, you need to make the text easy to scan, have a good design hierarchy, be concise, and be quickly understood. 

Typically, this means that text-heavy pages end up with slightly larger font sizes than interaction-heavy pages. 

How we read text-heavy design

According to the Nielsen Norman group, people read in 3 ways: Casually, scan with purpose, and in an engaged manner.

Casual Reading: This is when readers skim through the text, picking out words and sentences to get a general idea of what it’s about. They spent time on the product image, read the first few sentences, and quickly scanned the bullet points. 

Purposeful Scanning: In this style, readers are looking for specific information. They jump from one section to another, sometimes just reading a word or the first few letters.

Engaged Reading: Finally, when readers find something they like, they slow down and read the entire text, often getting lost in it. Their eye movements are more steady, with more time spent on the text and less jumping around.

Micro typography and macro typography

Micro and macro typography is crucial for creating effective, engaging, and visually appealing designs that communicate effectively.

Micro typography refers to the fine details of typography that enhance readability and overall visual appeal, such as font choice, letter spacing (kerning), line spacing (leading), and font size. It focuses on the arrangement and treatment of individual characters and words.

Macro typography, on the other hand, deals with the larger structural aspects of typography. This includes the choice of layout, white space, hierarchy of text elements (such as headings and body copy), and overall composition of a page or screen. It emphasizes the broader context in which text is presented, impacting how information is organized and perceived.

Micro typography

Font family

Tip: choose a popular font with multiple varieties. You can not go wrong with it. There are some fonts are created for readability, to name a few: 

• EB Garamond
• Montserrat
• Inter
• Work Sans
• Lato
• Times New Roman
• Calibri
• Noto Sans
• Open Sans
• Roboto
• Arial
• Merriweather
• Helvetica
• Georgia

You need to prioritize fonts that have clear and distinct letterforms. Avoid highly stylized or decorative fonts that may sacrifice legibility for aesthetics.

There is no single best font for all users. Some studies show there are clearly groups of fonts that perform better than others. But to pinpoint the best font – the holy grail of readability is impossible. 

Each person with a different reading behavior and age will have a different most suitable font. The only solution for this problem is personalization to present individual users with text in the font that’s best for them.  Of course, this is just a fun suggestion as presenting users with ever-changing fonts will cause many other problems to arise. But who knows? The future is full of possibilities, maybe one day we will have an answer to this problem

Serif or Sans-serif?

Sans-serif fonts like Arial, Helvetica, and Verdana are often preferred for their clean and modern look, especially in smaller sizes and on screens. Serif fonts like Times News Roman, Bodoni, and Garamond are famous for their professional look.

Apart from differences in the mood that they create, as I have stated above, there is almost no difference in readability between them.

Countless studies have been conducted to shed light on this comparison. However, the results are about the same: either the differences turn out to be statistically insignificant, or the Sans-serif font is slightly ahead of the serif.

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4612630

The small advantage of San Serif is they may be a little easier to read for some people with dyslexia.

Font Size

As always, you want to start by knowing whether you’re designing a text-heavy or interaction-heavy page. The minimum font size is not fixed, it depends on the context and devices. For example, when designing for smart TVs, of course, the minimum font size will be much much bigger because the distance between the user and the screen is so far. 

The further the device is from your view, the bigger the minimum font size has to be. 

Bellow are minimum font sizes for desktop

• For interaction-heavy designs, your minimum font size should be 12px
• For text-heavy designs, your minimum font size should be 16px

Bellow are minimum font sizes for mobile

• For interaction-heavy designs, your minimum font size should be 10px
• For text-heavy designs, your minimum font size should be 14px

Choose a font size that is large enough for comfortable reading. For body text, a font size of around 14-16 pixels (or equivalent) is the minimum requirement.  You should avoid using font sizes that are smaller than 12px. In some rare situations, you can use 10px for small labels that only have 1-5 characters if the hierarchy of the text is not important. 

Letter Spacing

Opt for fonts with adequate letter spacing (also known as tracking) to ensure that individual characters are distinguishable and do not blend together. Avoid fonts with excessive or overly tight letter spacing.

If you are not accustomed to adjusting letter spacing, it is best not to change the default settings. Instead, choose a font with good letter spacing as the default.

Font weight

Generally, avoid using light or bold weights for long-form content. For larger and shorter text (i.e., headlines), lighter weights are easier to read. For longer and smaller text, it is better to use regular weights and reserve heavier weights for emphasis. 

This approach also falls in line with studies that show people don’t read, they scan copy online.

Stay away from all Cap text

All cap texts have bad legibility because their forms are too similar. We can quickly recognize text thanks to its shape. Mixed-case text has a variety of shape forms, which help us better identify each word. 

There are still cases where all-cap fonts are acceptable. Such as when you use it for short labels, only 1-3 words. And you want it to stand out to other texts. 

Color contrast

Black and white are the best for readability. However, a white background sometimes can cause eye fatigue for users when reading for a long time. In this situation, you can consider using dark mode with white text on a black background or using a more subtle background like off-white.

See more on this article

Macro typography

Be generous with white space

I spend a lot of time iterating to adjust the design’s white space. When used appropriately, it can create flow, and balance, and guide users through the design in alignment with the designer’s intent.

More precisely, white space helps attract users’ attention to the content within it, whether it be cards, text, or images and creates a visual divider between sections.

As designers, our job is to guide users’ eyes through our design with minimal effort. The more important a design element is, the more white space it should have around it. Conversely, the more closely related the elements are, the closer they should be positioned to each other.

You can find more in-depth information on this topic in this article.

When optimizing your text content, it’s crucial to consider heading margins, paragraph margins, and line spacing (the gap between each line).

Common values for heading margins, paragraph margins, and line spacing can vary depending on the design and style of a document or website. However, some typical values are:

Heading Margins: Heading margins are often larger than paragraph margins to visually separate headings from the content below. Common values can range from 10px to 40px or more, depending on the design.

Paragraph Margins: Paragraph margins help create space between paragraphs for better readability. Common paragraph margin values range from 10px to 20px.

Line Spacing: Line spacing, also known as line height, refers to the vertical space between lines of text. The rule of thumb is that for long-form content, the line height should be 150% of the font size. Too little line height will make content mingle together. Too much line height will make the lines floating apart from each other.

Consistent formatting

Maintaining consistent formatting is crucial for enhancing readability and improving user experience. Here are some key points to consider:

Font Styles: Use a limited number of font styles (typically one or two) to create a harmonious visual identity. Mixing too many fonts can lead to confusion and distract the reader.

Color Schemes: Stick to a cohesive color palette for text and backgrounds. Avoid using too many colors, as this can create visual clutter. For text color,

Spacing and Alignment: Consistent use of spacing (margins, padding, and line height) helps create a clean layout. Proper alignment of text (left, center, or justified) can also impact readability and visual flow.

Clear visual hierarchy

Font Sizes: Establish a clear hierarchy by using different font sizes for headings, subheadings, and body text. For example, headings should be larger and bolder to draw attention, while body text should remain smaller and easy to read.

Use bullet points and lists: When presenting information that can be easily structured into lists or bullet points, use them to enhance readability and make content easier to scan.

Clear and concise paragraphs

Break up large blocks of text into smaller paragraphs to improve readability. Aim for concise and focused paragraphs that convey a single idea.

Body text should have 50-75 characters per line

For text-heavy designs, if you know how large your main column of text is, that can help you figure out the best font size to use. Simply put, you want 50-75 characters per line. Why? It all has to do with “tracking from the end of one line to the beginning of the next”.

If you have fewer than 50 characters per line, readers can spend too much time tracking and not enough time reading

If you have more than 75 characters per line, readers can find it difficult to track from one line to the next

Responsive design

Design layouts that adapt well to different screen sizes and devices, ensuring readability is maintained across various platforms.

Based on this article, here are some items you may include in a readability checklist:

1. Design Type

• Identify if your design is text-heavy (e.g., articles, blogs) or interaction-heavy (e.g., apps, forms).

2. Font Selection

• Choose a legible font family with clear letterforms.
• Consider popular fonts known for readability (e.g., Arial, Helvetica, Georgia).
• Avoid overly stylized or decorative fonts.

3. Serif vs. Sans-serif

• Decide between serif (e.g., Times New Roman) and sans-serif (e.g., Arial) based on context and audience.
• Be aware that while sans-serif may be easier for some, both can be equally readable.

4. Font Size

Minimum font sizes:

• Desktop: Interaction-heavy (12px), Text-heavy (16px)
• Mobile: Interaction-heavy (10px), Text-heavy (14px)
• Ensure body text is comfortable to read, typically 14-16px.

5. Letter Spacing

• Use adequate letter spacing to enhance readability.
• Avoid excessively tight or loose letter spacing.

6. Font Weight

• Use regular weights for long-form text and lighter or bolder weights for headings.

7. Case Usage

• Prefer mixed-case text for better legibility; restrict all-cap text to short labels.

8. Color Contrast

• Ensure sufficient contrast between text and background (black on white is ideal).
• Consider alternatives like dark mode for extended reading.

9. White Space

• Use generous white space to create balance and guide the reader’s eye.
• Adjust headings and paragraph margins for clarity.

10. Consistent Formatting

• Limit font styles to one or two for visual consistency.
• Maintain a cohesive color scheme and proper alignment.

11. Visual Hierarchy

• Use varying font sizes for headings, subheadings, and body text to establish hierarchy.
• Utilize bullet points and lists for easy scanning.

12. Paragraph Structure

• Break text into concise paragraphs of 50-75 characters per line for optimal readability.
• Avoid large blocks of text.

13. Responsive Design

• Ensure your design adapts well across different devices and screen sizes.