How To Design Text To Keep Visitors Engaged On Your Website

Digital typography is made for content consumption. The color, size, placement, and space surrounding text usually correlates with the content style.

But in web design you have to consider how these text elements fit into the page so that they’re also easy to consume. In the past, we’ve shared awesome font resources to help design pristine typographic layouts.

But in this post I’d like to share tips & tricks for designing text that encourages users to stick around and even interact with a page. Engrossing web copy isn’t always enough. It also needs to fit well in the page and keep readers fixed on the content.

How to Design Text

Crisp Navigation Links

I try not to specify how to design links, but rather share common link design features used in navigation menus.

All of the best design styles you can apply should aim to improve readability. This can occur with higher contrast, more letter spacing, or thicker typography. But the end goal is a crisp navigation that stands out right from the first pageload.

Take a look at the Fitz navbar. This uses fairly small text with all-caps and bright letters to jump out from the darker background. The header uses a large fullscreen background image behind a darker gradient.

Since the links practically jump off the page it’s much easier to read what they say from a distance.

Also the font Lato is a fantastic choice for the small text with all caps in the navigation. Links are crisp, thick, and they have the same heights so the links all appear even horizontally.

Another example I like is the Everchron design which uses two different nav menus on the homepage.

First you’ll notice the top links in the header are placed atop a background photo. This is a common technique and if you do it right then the text will be super easy to read.

But as you scroll down you’ll get a fixed bar with little icons attached to the top. As you scroll further these links change highlight colors based on the section of the page.

I don’t think icons can improve every navigation menu. But they’re an easy way to build content that draws the eye and encourages users to click.

Spacious Page Copy

Each paragraph should promote a new idea or draw readers further into the site. Use lots of space between paragraphs to keep people browsing further and reading more.

You can apply this technique to a landing page, a portfolio site, a blog, or anything similar. The goal is to separate content into readable chunks so users don’t feel overwhelmed.

Neil Patel’s QuickSprout Blog is an excellent example of this technique in action. His writing style is unique and the blog’s content structure gives his writing an even-toned pace.

Extra space after each paragraph pushes content further down the page. New visitors can consume 1-2 paragraphs and then decide if they want to keep scrolling for more. It’s a handy design technique that’ll keep people on your page for longer and keep them more engaged with your writing.

But one thing I don’t like about Neil’s blog is the small font size. In the modern era of design you should really use larger text to make reading content easier from a distance.

The post layout on the Washington Post uses much larger text while keeping true to excess white space. Each paragraph pushes text further down the page to encourage more interaction.

And since this is a news website they follow the traditional serif font with dark text for contrast. It’s a simple aesthetic that works well for any news organization.

But spacious text applies to content beyond a blog or news site. Check out the Hulu homepage and find the chart detailing their subscription plans.

Since this information should be consumed as a comparison in a chart it’s designed with a table layout. Each row uses plenty of white space and the rows use zebra striping to make browsing easier.

Check mark icons are easy to see and the text contrasts brilliantly off the background.

Use space to your advantage when designing anything. It will always make reading easier and encourage visitors to keep scrolling a bit further down the page.

But there is such a thing as too much space, and the best way to gauge is with your own judgement. Tinker with pixel values until you feel like you’ve gone too far, then back up a smidge and call it done.

Enticing Action Items

I know this seems vague but most webpages today are interactive. Most will have different items that encourage specific behaviors. These “action items” can of course be the obvious call-to-action buttons. However they can really be anything that drives a visitor further into a site and/or keeps them engaged with content.

Let’s take the homepage of Stripe as a simple example.

The design uses a lot of bright colors that feel easy on the eyes. The page itself is simple to browse and the colors/icons blend subtly into the background.

Their CTA buttons use green and white in the background. When you hover either one they animate which makes them feel more reactive to user input.

Keep this in mind if you’re designing a page with the goal of increasing user behaviors. Page elements that animate or draw attention to the content often work well for increasing user behaviors.

For more traditional sites like blogs I prefer carefully blended “action items”. Take a look at the RetroCollect homepage using a content slider right above the newest blog posts. This widget uses background photos to draw users further into the content.

This site also uses big bold navigation text that’s easy to read and easy to browse at a whim. The crisp design and beautiful typography actually encourages visitors to check out more of the content.

It doesn’t matter how you attract attention. What matters is that you provide a reason to browse and that you give visitors the right links or buttons to dig further into the site.

Less Is More

When designing a website with a focus on text just remember one short statement: less is more.

Never try to cram text together or make it as small as possible. Your goal should be to design a natural experience with typography that feels fitting to the page.

The homepage of InsiteVR is a great example of very simple text with lots of space. The paragraphs are pithy yet technical.

Also since each block of text is so short it’s super easy to read. Visitors don’t feel as much commitment to a sentence compared to a long block of text.

Design for simplicity and you’ll draw your visitor’s attention from there.

But also think about engagement and how you can signify that something is engaging. The Crew homepage uses very large text with a blue underline for “let’s talk” in the header.

Since this is universally known as a hyperlink style it signals to visitors that they can click that text.

Use these simple yet effective features in your own design work and I guarantee you’ll find more engagement and higher retention rates.

Wrapping Up

There is no secret formula for designing text on the web. It has changed a lot in the past 10 years, but it’s always moving towards a better experience for the user.

I hope these tips can guide you in the right direction to help you craft brilliant typographic styles for all audiences.