Design beautiful websites to sell your product — Paragraphs

Bali. 09:23 am. Linkin Park in my ears.

Last week, we talked about designing remarkable headlines. Today, let’s redesign the supporting text below your headlines.

The supporting text below the headline is crucial. It’s how you convert attention to action. 

But most people won’t read it. Here are 5 design tips:

Use a secondary color

The supporting text should be written in a color that contrasts less with the background than the headline color.

That’s why we made the Base Content Secondary color previously. It creates a visual hierarchy.

Use the default font weight (400) and font size (16px) for paragraphs.

Let the content breathe

Unlike headlines, reading a paragraph in a small font size requires a visual effort.

Make it easy for your visitors by increasing the height of each line.

Align text on the left (or right)

Our eyes are used to read from the left.

At the end of a line, we know where to look: The line below, on the left.

Centered-aligned text is hard to read because the eye has to scramble around looking for the beginning of the next line.

It’s OK for short paragraphs (2-3 lines). But avoid centering longer blocks of text.

Good design = easy understanding for users.

Write blocks, not lines

Finding the beginning of the next line is hard when the line is long.

Add a maximum width to each paragraph. 500 px is a good range. It makes it easy for the eyes to find the start of the next line.

Don’t write a novel

A big block of text is scary. Most visitors won’t read it.

Structure your text block using bullet points.

You can also use multiple paragraphs and emphasize some words to create rhythm.

I listened to the Hybrid Theory album 3 times. It’s time to have lunch with my wife. Have a good weekend!