The Valerian Greenhouse logo.

Formatting Your Website Copy

It’s incredibly helpful for everyone involved in a website project if the copy isΒ formattedΒ to indicate how it’s supposed to be used. In theΒ Headers, Subheaders, and Body Text lesson, we talked about options forΒ heading formatting, but there are a few more things you might want to do to make your copy as clear as possible for the designers who will be turning it into a website.Β 

Use lines to divide sections

It can be helpful for designers to know when you’re changing gears, especially if you’re moving from one section to another that is related logically. πŸ’­ When you’re imagining a new section occurring in your copy, make that evident with a horizontal line, a series of dashes, or by simply hitting enter several times to leave a bigger gap between sections. 

Clearly designate any design input

Designers are great at what they do, but they also know that sometimes the client has a picture in their head that they’re hoping to see on the website. 🀩 If you want to indicate how the copy should be translated to design, make sure to set that text apart in some way so the designer doesn’t think it belongs on the website itself!

As a copywriter, I’ve done this in a multitude of different ways over the years, depending on the situation. Right now, my preferred method is to put the design direction in double curly brackets:

{{icons with text}}

You could also use another special character that isn’t likely to end up on your website, but just make sure that it’s obvious or include a note to the designer to let them know what you used. 

If you’re working in Google Docs, you could include any design input in comments so the designer can see what you’re referencing without it having to be in the text itself. πŸ’¬

Remember the button copy!

One last thing that can often get missed or be confusing isΒ button copy. Like we talked about in theΒ Next Steps + CTAs lesson, you’ll want your website to have lots of opportunities for your visitors toΒ do the thing you want them to do, whether that’s sign up, buy, or something else. πŸ™‹ A lot of time, this will appear as aΒ button, and that button is going to need copy.Β 

We’re looking for the easiest way to communicate that you want a button and what you want the button to say, so I typically just put it in the copy document like this:

Button text: Buy now!

Simple and straightforward. 😎 We like it!

Was this helpful?

Thanks for your feedback!

Leave a Reply

Your email address will not be published. Required fields are marked *