How to Master Microcopy for Web Designers

By Jake Rocheleau. in Web Design. Updated on August 7, 2023.

Content-writing makes up the vast majority of all websites because it’s the easiest content to produce and consume. The style of writing is a big factor in a website’s usability, but it often gets overlooked, with design aesthetics taking priority.

When just starting out, and diving into web copy, you’re bound to make simple mistakes in the writing process. With this post, I’m hoping to help you iron out these mistakes by outlining the basics of copy and microcopy, explaining what they are and how they function on the web.

As you practice writing you’ll find new methods for generating interest from readers. But also keep a keen eye while browsing other sites to study their methods for writing attractive page copy.

How Copy Defines Your Site

Written content is at the heart of most websites. Content is often a primary reason why people visit a site, or it’s at least used to guide people around a site.

Blogs drive readers to consume content. But written content may also cover different features for a new web application. Content is a vehicle used as a means to an end. With blogs, the content actually is the end goal of delivering quality content that’s valuable to readers.

But the way you design copy can have a big impact on consumption and user experience.

For example, take a look at the screenshot of this website below. The layout uses big bold letters to tell you what this app does (a collaboration app for designers). But scroll down, and you’ll find a section with tooltip callouts explaining the interface features.

Visitors don’t like wading through documentation to learn about your product. Say what you do in the shortest amount of time with the clearest copy possible. This is also the foundation of most great landing pages.

Sometimes there is room for a little fun and creativity too, like on the home page of MailBakery.

The content writers for MailBakery use a metaphor that compares coding & designing e-mails with the process of baking sweets. Their home page uses the text "we bake HTML emails" to cleverly describe what they do.

Fun vectors and metaphors sell people a visual idea associated with wordplay. This can be tricky and doesn’t work for every company. But it’s a powerful marketing technique when done right.

Other sites, like Patreon work better with clear and straightforward statements.

The home page heading says "Recurring funding for artists and creators". This doesn’t get overly complex about the technology because the technology is secondary to the purpose. Technology is a tool used to do something – in this case, it’s a donation engine for creatives.

By studying examples like these, you’ll learn how to write content that sells without feeling gimmicky. There’s a lot to learn when you’re just getting started. Reading may help you find a direction.

Here are some posts about quality web copy to get you started:

Finding a Voice

All of your copy for a single project should follow a similar written voice. This is usually subtle but still noticeable and even capable of being documented like MailChimp’s style and tone page.

Lots of people write posts about personal writing tone and how to find your voice.

But remember that your voice may not always be the best strategy for every project. Some websites or blogs require a more serious tone, others more aloof. Some sites work best with humorous copy, or even a mix of all these things.

Generally speaking, my advice is to edit down your writing, and avoid verbose sentences. Everything you write should further the purpose of the content without redundancy.

Also read: Simple tips to write your next killer post

Also be sure to create a structured hierarchy so that your text reads naturally. This is always a good idea for SEO and for page design. But clean text with distinct patterns can also be helpful to readers trying to understand the content.

Here are some tips to get you started:

Be clear and concise
Have a goal in mind before writing
Structure content in a logical flow
Use typography to build a visual hierarchy

The voice you write in may change from project to project. But the strategies for writing great copy typically remain the same.

Looking into Microcopy

All copy on the page can be broken down into segments, like headers and body content. One less explored area is microcopy, a form of web copy as it applies to small elements on the page.

Most page elements that rely on microcopy are also interactive elements. These might be page links, buttons, input fields, or anything that exists for the user’s attention.

A lot of microcopy writing has to do with conversions and further content explanation. Therefore microcopy could also include non-interactive elements like image captions and info/alert messages.

Microcopy is where you examine the smallest bits of writing to see if certain words could increase measurable stats. For example this case study showed how changing one word improved clicks by 161%. That’s how significant microcopy is to the user experience.

Different websites use microcopy for different reasons. The home page of a blog like Hongkiat will be very different than the home page of Zendesk because the user’s goals are different.

This Zendesk screenshot has two buttons that naturally contrast each other. Because the microcopy uses the "or" word midway between these two buttons, they’re presented as opposing options to the same end. You can either get started right away, or take a tour and decide afterward.

And if you take the tour, there’s a big signup button at the bottom asking you to start your free trial:

Someone who doesn’t want to signup might place themselves in “the other” group and prefer the tour. The particular phrasing of this microcopy suggests that a visitor can do either of these two options, therefore, it carefully steers the attention away from the third option, i.e., leaving the site.

Here’s another great example of microcopy from this ConversionXL post. These two screenshots demonstrate the immense difference in removing Buffer’s input placeholder text from the sharing field.

These small optimizations are often achieved through clarity and a deeper connection with the audience. Use microcopy to explain things better, and help visitors interact with the site in a more meaningful way.

Some areas to consider updating or analyzing for great microcopy:

Input field label & placeholder text
Form button text
Navigation link text
Guided instructions
Image carousels
Error/404 pages

You’ll find microcopy on anything that users may interact with or small snippets of text that provide relevant info to all users (like modal signup windows or little info boxes).

Once you understand the benefits of great microscopy, it’ll naturally become a significant part of your copywriting workflow.

Putting it All Together

Page copy and microcopy should have a thematic relationship. The writing style and tone should be familiar across the entire website. This includes techniques for title capitalization and sentence/paragraph length.

The first step is to figure out the goals of your current project. Do you want to increase conversions for signups, sales, or page views? Or are you making a new site and getting content organized for launch?

At each stage of the content creation process, you’ll need to consider what you’re trying to achieve before you can achieve it.

If you have trackable goals, then try A/B tests to gauge metrics.

But the most important thing is to keep writing and keep trying new things. Get yourself in the headspace of your visitors, and consider how they might feel landing on each page of your site. Do your headings make sense? Is there a natural flow of typography down the page? Do you instinctively want to keep reading?

Ask yourself these questions as you write, and you’ll quickly spot your own mistakes. In time, it’ll become like second nature.

Also, if you’re looking for more content on effective writing, check out these related posts.