Typography - UX writing

Best practice

Headers

On a landing or brochureware page, headers are usually used to engage a prospect’s attention with a concise, engaging summary of the page’s content.

• Headers should be short, and ideally no more than two lines on all viewports
• They should use Sky tone of voice
• No punctuation, and no full stop at the end. However, you can use full stops for rhythm (see Sky Glass: “Sonic. Boom” and “High tech. Low price”

On a functional page in a flow such as a checkout page, the header should signpost what the user needs to do on that page

• Headers should be short, and ideally no more than two lines on all viewports
• They should be action-oriented and use the imperative mood, like you’d see in a recipe, or instruction manual e.g. “Enter your email address”
• No punctuation and no full stop at the end

Subheaders

When needed, the subheader should add context and clarity to the main idea expressed in the header.

• Ideally no longer than three lines on all viewports
• Should always have a full stop at the end

Body copy

Use this to give the substance of what the user needs to know.

• Sentences should be no longer than 20 words
• One idea per sentence
• Cut out unnecessary words; keep language as clear and concise as possible. Tools like Hemingway can help with this
• Use the active voice, not passive e.g. “We’ll activate your plan in 30 days” instead of “Your plan will be activated in 30 days.”

Make body copy as easy to read as possible by:

• Using the ‘F’ shape to put the most important info at the top and to the left
• Using bullet point lists where appropriate, or otherwise breaking up text into smaller chunks
• Left-aligning any blocks on copy longer than three lines

Error messages

Error messages need to fulfil three goals:

• Clearly and simply explain there is a problem and what the problem is
• Provide a solution so users can complete what they are trying to achieve
• Turn the delay into an experience that is as pleasant as possible.

Call to action (CTA)

Primary CTAs should directly answer the instruction on the page.

• Add context to tell the user what action they’re taking and/or where they’ll go next e.g. “Continue to checkout”
• If needed, add supporting copy below the button to reassure e.g. “You won’t be charged yet”
• Never use the word “Button” in the descriptive text, as screen readers will announce “...button button”
• CTAs should never run over two lines of copy
• CTA text should be unique, i.e. don’t have three “Submit” buttons

A note on conversational writing

We are taught to speak and write in two different styles. The written style is usually formal and considered respectable.

The spoken style is flowing, more commonplace and accessible to all. It is the way in which we communicate with our friends and loved ones and for this reason, among others, it is better to use the spoken style to help you create an emotional connection with your users.

Warning. Using the spoken style can be tricky. A good guide is to not write anything you wouldn’t say out loud.

The spoken style is not rough, confusing and riddled with mistakes. The spoken style is polite, respectful, precise, and clear.