- Just Ship It
- Posts
- Design beautiful websites to sell your product — Headlines
Design beautiful websites to sell your product — Headlines
Forget creativity, design is about rules. Here’s the 80/20.
Last week, we discussed how colors impact your conversion rate and why less is better.
Now, let’s focus on the most important part of your landing page — headlines.
Solopreneur update
I launched a new micro SaaS on Product Hunt yesterday!
Introducing Insighto — Ship features users (really) want:
✍️ Collect feedback from customers
💡 Prioritize features
😍 Build a product users love
It's a tiny alternative to Canny, and it’s 100% free :)
Rule #2: Emphasise your headline
People don’t read text.
At least, not until you get their attention. Your headline must be remarkable if you want people to read your copy. Let’s redesign it.
Make it big
The default font size is 16px. Headlines should be bigger (of course, Marc). But how big?
The sweet spot is somewhere between 36px and 60px. It depends on the typeface you use.
Your first headline (<h1> in the hero section) is usually bigger than the secondary ones (<h2>).
Once you set a system, use the same for the entire landing page. Here’s mine:
60px for <h1>
48px for <h2>
Make it bold
The default font weight is 400. Headlines’ font weight should be big too.
The sweet spot is between 700 (bold) and 900 (black). It depends on the typeface you use.
Pick a font weight and keep it all across your website.
Make it tight
Headlines should be compact to be read easily.
Reduce the letter spacing by -0.4px
Reduce the line height to 1
But make it light
Headlines must be short or your visitors will never read them. Use 70 characters max.
If your headline is larger than 1000px, break the line. Find a semantic breakpoint, not a visual one.
Avoid using more than 2 lines.
Make it pop
Use the most contrasted color towards your Base (yep, the Base Content one).
Avoid dropping another color. It breaks the reading flow. And conflicts with your main Call-To-Action.
If you need to highlight a word, use visual clues.
You can use the primary color to highlight numbers though
Use responsibly
There’s nothing easier to understand than a website section with:
1 headline
1 paragraph
1 image
1 button
Write one headline per section of your landing page. Not 0, not 2, just 1.
Make it responsive
All rules above work on mobile devices, except for the font size.
Make your headlines a bit smaller than on desktop — 32px to 40px is the sweet spot.
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 2,200+ developers.
DataFast: Grow your startup with actionable data.
IndiePage: Join 3,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