Inverted Pyramid

Many people argue for using less text online because “people just don’t read anymore” — that might be the case. But, text isn’t going anywhere, and its use can’t (or shouldn’t, at least) be avoided. While it’s always advisable to use graphical elements within a design, it’s also extremely important to remember the potential power of textual content.

Knowing how to amplify online copy and avoid creating text-related usability issues doesn’t have to be difficult — we’ve provided some simple guidelines around quality, formatting and context to get you started.

Quality

You can produce  high-quality text online by adhering to a few simple rules:

1. Get to the point — immediately.  

When a user first reaches your content, the countdown clock starts for you to engage them. They should know the basics of the piece (who, what, when, where and why) within the first couple of paragraphs.

2. Be direct.  

Just say it, and say it concisely. Use active voice. If the text does not contribute to the experience or inform the user in some way (as in, it’s fluffy), get rid of it.

3. Keep it jargon-free.    

Journalists write at an eighth grade level for a reason: They aim to invite new audiences rather than exclude potential or existing audiences. Know who your audience is and communicate with them as clearly as possible. Using jargon threatens clarity — if you want your audience to actually receive and understand your message, try to refrain from using it.

If using jargon-y terms can’t be avoided, be sure to provide practical examples of terms and concepts to provide your audience with some context.

4. Be positive.   

Avoid overly negative language and terminology, which can be a subconscious turnoff for readers and can also have an impact on how objective (or subjective) copy presents itself. For example, instead of words such as “wrong” or “bad” (which both imply opinion), use words such as “ineffective” or “insufficient”.

5. Stay consistent.  

Don’t let tense, tone or voice waver. Also, ensure that copy across the platform has a consistent format so users know what to expect as they browse and scan.

Formatting

Proper formatting can do wonders for online copy, particularly when it comes to keeping your audience engaged.

Typography

Web typography has come a long way in a short amount of time, primarily because of revisions and advances made to front-end programming languages. Online readability will benefit massively with careful consideration of aspects such as font family, size and spacing, amongst other things.

Because web typography could warrant a whole other article in itself, we’ve provided some brief, general tips to keep your web type clean and clear:

Font Family

The conversation about whether serif or sans serif fonts read better on the Web continues, meaning it really just depends. The point is, use a simple serif or sans serif font with a good weight — don’t use display (showy, stylistic fonts), handwriting (sketchy, usually cursive fonts) or monospace fonts (in which every letter occupies the same width) for body copy.

Font Size

The convention of using a font size of 12px for body copy has thankfully died, giving all of our eyes a well-needed break. Use at least 14px for body copy.

Leading, or Line-Height

Adjusting the space between lines of text can make a world of difference for online reading. Aim to have a line height that’s approximately 150% larger than the size of your text. For example, if you have 14px body copy, a decent line-height might be 21px.

Line Length

Using proper line length means ensuring the width of your body copy incorporates no more than 50 – 75 characters per line. On desktop, this shakes out to a maximum width of around 600px – 700px, not including padding and margins.

The Center for Disease Control's site has a line length of 930px, which is too long for comfort.

The Center for Disease Control’s site body copy has a line length of 930px, which is too large for comfortable reading and scanning.

Chunking

Chunking and typography go hand-in-hand. Chunking text means dividing it into smaller pieces to make it easier to read, scan and remember. Use the following to help you accomplish chunking text for the Web:

  • Short sentences
  • Short paragraphs (1-3 sentences)
  • Short articles or body copy, in general
  • Headings and subheadings
  • Bolded main ideas
  • Bulleted and/or numbered lists (like this one!)

In general, chunking allows for the user to focus on or scan one idea or thought at a time, which makes for a lovely experience.

Links

Providing links within your content can offer your audience the flexibility to dig in deeper. Inserting too many links up-front, however, can lead them away from your content, sometimes with no plan to return. When possible, insert links after you’ve said your piece.

Additionally, (this seems like a no-brainer) make sure your links look like links. While the blue underlined style ain’t the prettiest thing on earth, it’s your best bet for communicating that  “This is a link.”

Context

Optimizing online copy means considering the context in two ways: how context impacts the text, and how the text impacts the context.

Specific, Not Ambiguous

Specific, descriptive headlines and subheads will give your audience a better context. Ambiguous or catchy headlines can work if the context allows for it, but, to be safe, let’s just say that’s rare.

Link text should always be descriptive to provide the audience with enough information to know where they’re going if they click. Never just use “click here” for in-line link text.

Design for Focus

Distractions run rampant throughout the Web environment. Elements such as flashy ads, popups, scrolling carousels and videos that play automatically can obstruct the user experience by diluting the comfort to read online copy. Let white space be your savior.

Popular platforms such as Instapaper, Pocket and Medium have acknowledged this, allowing the user distraction-free, full-force focus on the content. Interestingly, platforms such as these remain incredibly popular despite the fact that “no one reads”.

Instapaper's design allows for the user to have full focus on the text.

Instapaper’s design allows for the user to have full focus on the text.

Empowering Online Copy

We’ve only touched the surface of how to enhance the power of online copy, but the rules and guidelines we’ve provided here offer a good start. And, hopefully they offer some inspiration to use text in a way that’s appropriate, beautiful and, most importantly, usable.

Like this post0
Go top