Improving the readability of content cards

🔥 Campfire 31: Content cards are a popular way to organize content in app design. Cards allow users to browse high-level information while consuming samples before clicking on the card to get the full details.

Using cards alone will not result in a fantastic browsing experience. You must also optimize their readability.

Optimal readability is more than whether or not users can read the text and make out the words. It also indicates whether they can scan and process text efficiently.

Cards can be hard to scan when different text types on the card conflict for attention. As a result, users cannot differentiate the most essential information from the secondary and usually get lost.

If you ever found yourself moving your eyes back and forth around the card — you've experienced difficulties processing information. All because the card had a wrong readability structure.

To fix this, as designers, we can add the appropriate amount of visual emphasis to elements on the card.

Typographic hierarchy of the card

A card usually has a few text types that serve different info functions.

There are:

• An eyebrow — a categorical word or phrase that describes the content's subject

• Heading that tells the user what the content is about in a few words

• Metadata that provides relevant context about the card

• Body text that describes the content in a short paragraph

To figure out which text types are more important to users, you must establish the typographical hierarchy of your card.

In our case, the proper typographical hierarchy of the card would be:

1. Heading — The most important because it describes the content the quickest way

2. Eyebrow — provides additional context on the content subject matter

3. Metadata — Provides general context about the content for users to gauge its relevance

4. Body — Contains a descriptive paragraph but takes the most time to read

Users should be directed to scan the text types in this order on your card. You can use visual design techniques to apply proper visual emphasis to the text types.

Controlling the order of what users see

You can control the order of what users scan and dictate a scanning pattern that mirrors your typographical hierarchy with a proper visual emphasis.

The example below illustrates a comparison of how to scan control works. The difference is the emphasis on different text types.

When visual hierarchy is applied, the heading is emphasized to a greater degree. The eyebrow and metadata are emphasized over the body. The result is an efficient scanning pattern that mirrors the typographical hierarchy.

Optimizing for readability is even more beneficial when multiple cards are on the screen. Optimized cards allow users to scan the anchors without visual interference from the surrounding text. Uncontrolled cards are harder to scan because the surrounding text types cause optical interference.

Ways to improve the readability of cards using visual hierarchy

These are some of the visual design techniques you can use to improve the readability of your cards. You can mix and match them to achieve the appropriate result.