F-shaped web copy: how shaping content helps your website

by | 11 June 2021

Are you writing F-shaped web copy – for fast, feverish web-page scanning?

If not, you need to, because mostly we read in an F-shaped pattern, including on mobiles.

We don’t read every word.

Instead we skim for the stuff we want, ignore the rest.

We follow the outline of the letter F.

Why the F-shaped reading pattern is important for your web content

Heat maps used in eye-tracking research back in 2006 showed how our eyes scan web pages in the general shape of a capital F. This still applies today.

We take in the top line – the F’s top branch – and maybe the one below.

Our eyes then shift down before again scanning horizontally – perhaps drawn by a sub-heading or highlighted text.

This is the lower bough of the F.

From then on it’s pretty much a downward clamber in that we glance vertically at what’s left.

This is the trunk of the F.

The same is true of right-to-left languages: the F is flipped.

It could also be true of your blog and LinkedIn posts, your online newsletters and even your emails to clients – so think F-shaped eye tracking in everything you post.

Should all my web copy suit F-pattern reading?   

Not necessarily. We don’t all follow the F pattern all of the time.

But, on pages with blocks of text and little formatting, default scanning is likely to follow the F.

This was the case with the product, about and search engine pages used in the 2006 study.

In other words:

  • web copy that doesn’t vaguely fit the F may not be seen
  • if the info readers seek is not within the F they could quickly leave your site
  • a search-page ranking not fitting the F shape could be overlooked.

How to create F-shaped copy on my website

Mostly we search with intent. We’ve a problem to solve, info to find, and don’t have much time.

This boils down to:

  • what you write
  • where you write it
  • how you present it.

Here are a five tips for shaping web copy to match F-shaped eye tracking:

Tip 1: Put crucial info top and left

Place essential detail at or close to the top of your page. The first few words are the most important. They’re the words mostly likely to be seen.

If it’s clear to visitors that your page addresses their question, they’ll delve deeper.

Tip 2: Use headings and sub-headings

First, they fit our F shape; there’s a good chance they’ll be seen.

Second, they’re another chance to use your search words. But don’t overdo it.

And don’t forget to code the headings (H1, 2, 3) on your website’s backend. Search engines like a hierarchy.

Tip 3: Make keywords prominent

Use relevant search terms early in sentences as well as in headings.

These are the phrases readers probably used to reach your page, and the terms they’ll be looking for.

Tip 4: Use bullet points and lists

Bullets, numbers and lists usually lie on the trunk of our F.

And, like headings, they break up text and aid scanning, helping your readers quickly find what they want.

Tip 5: Use bold (but not caps)

Bold text, used sparingly, also draws attention to important info. It makes scanning easier, breaks up text and acts as an extra heading.

Links do this too.

But avoid caps – they’re way too shouty.

Finally, remember to keep sentences short and to avoid blocks of text.

No right-minded F ever got weighed down.

A skilled web copywriter can help you write in an F-shaped pattern on your website pages.

Get in touch if you’d like a hand.

Cath’s writing for ATW websites is imaginative, original and professional. She writes to suit the speedy way we read online and goes the extra mile by proofreading text provided by sponsors.

JAMES SHIPLEY, Director, Active Training World, Herts

Cath provided a swift, professional and friendly service for our website. She has great attention to detail and I wouldn’t hesitate to use her services again. It was so helpful to have a pro cast their eye over what we had cobbled together — thank you very much indeed.

BRAD SMITH, Chairman, Garden City Runners