The Big Deal About Text Formatting in Web Design

While you may be able to use many attention-grabbing elements to make your Web design more effective, your site’s text formatting should not be set aside. Plain text actually bests faces and sensual body parts when it comes to getting attention on the Web.

The human psyche will always be looking for faces in everything (thanks to the phenomenon of Pareidolia), and the id will always tend to focus on ‘private’ body parts (like cleavages and shapely bottoms), but your website’s visitors are there for information, so they are intent on scanning the text of your site.

The Best Deals For Digital Design Assets - Learn More>>

Scanning to Reading

It’s often said that Internet readers and lazy readers. Who could blame them? There’s a wealth of information on the Web on any single topic – they need to ascertain which of the websites they visit are able to present them with the data they need.

Therefore, for the sake of saving as much surfing time as possible, the typical website visitor would scan the text first, looking for keywords and phrases, then read any part of the text partially when they find what they are looking for. He would also read the content thoroughly if it engages him enough – but the very first thing he does is scan the text.

Image credit SXC.HU

In attempts to make Web content more “scanable,” styles and formatting are applied to make the text more readable. Simply putting key words and phrases in boldface might suffice, but then there are some bits of info that really need to stand out. The problem begins in formatting them to make them stand out.

Fancy and “Salesy” Formatting

Most of the time the easiest way to make text stand out is to perform some fancy formatting on it and make it appear like a banner on your webpage – much like how a banner ad is formatted to gain attention. Unfortunately, thanks to banner blindness, this is not ideal.

Banner blindness is a term applied to how people tune out anything that looks like an ad. Studies into this phenomenon have proved that almost everyone intent on finding something of consequence in a website does not fixate on the ads and banners on that website, but instead focuses on content. Important text made to stand out through fancy formatting, therefore, is likewise ignored, because they resemble ads too much. At first this may not seem realistic, but research into Web usability presents us with evidence to the contrary.

Jakob Nielsen’s guidelines to Web usability lay out the groundwork for best practices and things to avoid, and some of those guidelines pertain to fancy formatting.

Image credit SCX.HU

But even if you don’t consult with any sort of guideline, it’s plain to see how banner blindness extends to fancily formatted significant text. It’s a given that people are adept at tuning out unwanted elements when browsing the Web, and ads and ad banners are among the most unwanted nuisances.

When visitors drop by your website to look for specific information, they scan the text. During the quick scanning phase, people tend to stop scanning at the first sign of ad-like text or promotional banners, and go elsewhere. They never even get to the partial reading stage, much less the thorough reading stage. If a piece of important text does not even merit their attention, how can it engage their senses long enough to make them realize its significance?

Too much fancy formatting defeats its own purpose.

Best Practices Vs. Things to Avoid

So what do you do when attempting to make important text stand out seems to only backfire? Well, you need not be self-contradictory in your efforts. Your goal is to emphasize high significance or priority tasks relevant to your website, and you can do just that without making the information look or feel like a promotion or ad.

Image credit SXC.HU

Keep in mind to veer away from these elements that deflect attention:

– Marketing lingo. The moment you sound like you’re about to pitch, people will scan somewhere else. Even clever catch phrases might have the same effect. So to be safe, deliver the information in a straightforward way, and don’t add some punch lines or sales talk.

– Superficial use of font faces and styles. This actually depends on the design and concept of your website, but for small and medium business websites, it’s best to be scantily clad in font styling and formatting whenever emphasizing important parts of Web content. If making out the text in boldface is underwhelming, try changing the position of the text relative to other elements in the webpage. Go for locations where visitors’ eyes naturally fixate on or gravitate towards.

– Ad banner-like appearances. This is the top “don’t” in the dos and don’ts of text formatting in Web design. Avoid formatting your text to appear like an ad or promotion, lest it fall victim to banner blindness.

Is Text Formatting Really so Important?

During the course of formatting your Web design to emphasize important text without making it look like an ad, you may find yourself thinking if what you’re doing is worth the trouble. Is it really that big of a deal?

Your website may have great design and smooth user interfaces, nice tools that help users with high priority tasks, and may even be able to present examples of its content on the homepage, but despite all the right things you did with your design, if you fail in the simple aspect of text formatting, it might as well be all for naught.

Generally, homepages present the most significant or the highest priority information or tasks relevant to the website, and they do it through text. The tools, apps, and widgets installed might help, and the search bar is a handy feature, but if your visitors don’t see what’s plain to see – what they are actually looking for – as they scan your landing page, then chances are they’ll simply look somewhere else. Isn’t that a big deal?

Image credit SXC.HU

(Visited 601 time, 1 visit today)

9 Comments The Big Deal About Text Formatting in Web Design

  1. Simon Clavey Jan 5, 2012 at 18:35

    Text formatting is a huge part of UX Design and UI Design these days, although it’s normally called typography. Typography plays a huge part in every type of marketing and advertising as the text on your website is what gets the message across.

  2. Michael Griffin Jan 5, 2012 at 20:53

    Great points here, especially on the subject of “banner blindness.”. I wrote on a similar topic on my own blog that your readers might enjoy ( I will be tweeting this post to my followers because I believe that the correct use of typography is the most overlooked detail in web design. Thanks for sharing!


  3. Torsten Jan 6, 2012 at 00:01

    I think the most important thing is, that a long text should be interrupted by images, like in the article above. Because if you have to scroll and scroll only to find more and more text, you’ll stop reading.

    And a nice font should be used, which is no big problem nowadays. Web fonts are available at moderate prices, some of them even for free. I personally hate Helvetica for text, it’s only nice for headlines.

  4. Marc Niola Jan 6, 2012 at 16:35

    Great insights… while you mention to avoid using marketing lingo due to the related consequences with banner blindness, I’m now wondering if “calls to actions” fall under the same purview.

    Not being a marketing expert, I try to express content in an informative style, but as I realize I need to promote and market my business I have reluctantly included call to actions in my website.

    Can anyone suggest any best practices about the use of calls to action in relation to banner blindness as mentioned above.


    1. Michael Griffin Jan 6, 2012 at 17:13

      Hey Marc, I think that is a GREAT question. My personal rule of thumb is to use the 80/20 rule . . . that is simply that at least 80% of your content should have NO call to action in it. You probably have a call to action somewhere else on the page anyway, so having it in your article/post is more than likely redundant. If you do decide to include a call to action in your content, it should flow with the conversation you are creating, and make sense in the context of the overall article. So if you are talking about widgets for example, by the time you have included your call to action, the reader should be shaking their head “yes that mirrors my experience with widgets” and thinking “this guy knows what he is talking about, maybe he can help me with my widget problem.” Hopefully that makes sense. Curious to hear what others think as well.


  5. Andre Morris Jan 9, 2012 at 06:37

    Text formatting is definitely one of the most overlooked aspects of design. When done right it can make a huge impact on the overall appeal and readability!

  6. Pingback: Best practices for formatting text in web design | SHEER design TRAINING

  7. Pingback: Best practices for formatting text in web design | SHEER design TRAINING


Leave A Comment

Your email address will not be published.