- Just Ship It
- Posts
- Design beautiful websites to sell your product — Paragraphs
Design beautiful websites to sell your product — Paragraphs
Forget creativity, design is about rules. Here’s there 80/20.
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.
Solopreneur update
I launched Insighto on Product Hunt last week and… It got the #1 Product of the Day 🤩
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/fdd5659a-667b-4502-bf54-e66f75005622/GN3Lu3UbMAADBpX.jpeg?t=1716620134)
I also bought my first premium domain name — shipfast.com — for…
🥁
…$5,000. That’s 3x my revenue in April 2023. It feels unreal.
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.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a92f8bfe-88f4-46b7-a8a7-7b4c1744b291/How_to_design_supporting_text_-_colors_secondary.png?t=1716606120)
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.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/29939859-67c6-4106-aaff-be135473391f/How_to_design_supporting_text_-_leading.png?t=1716012766)
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.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4c245d1c-10c7-4183-9e9d-d029a5626914/How_to_design_supporting_text_-_text_left.png?t=1716012758)
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.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b9512908-b3e5-4e89-bbbe-8629d904a946/How_to_design_supporting_text_-_max-width.png?t=1716012740)
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.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1df71cb2-4191-4ed5-abc4-445a8d0b0c7a/How_to_design_supporting_text_-_max_3_sentences.png?t=1716012730)
You can also use multiple paragraphs and emphasize some words to create rhythm.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b936273e-4ca5-4b6d-9483-9629ad7f959a/How_to_design_supporting_text_-_max_3_sentences_alternative.png?t=1716012715)
Use your Base Content color and medium/semibold font weight to emphasize words
I listened to the Hybrid Theory album 3 times. It’s time to have lunch with my wife. Have a good weekend!
Whenever you're ready, there are 5 ways I can help you:
ShipFast: Ship startups in days, not weeks with the NextJS boilerplate loved by 3,100+ developers.
LaunchViral: Grow your startup with viral launch videos.
IndiePage: Join 5,000+ solopreneurs and showcase your startups.
PoopUp: Turn your visitors into customers with wake-up call popups.
ZenVoice: Stripe invoices, without the 0.4% fee.
Reply