Typography on webpages: proximity, distance and style.

This article was created to help new writers to learn the basic principles of writing search engine friendly content for the web and to introduce some of the terminology used when talking about optimising text content for the search engines. Web Pages that use the correct typographic styles make it easier for users of a website to quickly find content on the page. Typography, when used as creative tool, can persuade your readers to ‘scan’ your web page the way you want them to. Reinforce good typographic styling with engaging copy and you can even make a reader respond to your messages.

Typography and Web designers

A quick way for web designers to create a simple set of style elements is in the form of paragraph and  heading tags. As you know, search engines use keywords to score the content of a web page. If a keyword is found in these paragraphs and heading elements, this provides the correct technical basis for a ‘search engine friendly’ website.  How much relevance that content has to what the person typed into the search engine, is one of the methods used to ‘rank’ the content of a web page.

Weighting of on-page content

The search engine’s spider software works by gathering lots of pieces of information about a web page when it is indexed into the search engine.  On finding new content in a website, the spider software  scans many different elements of the page (headlines, sub headings, paragraph copy, footer text, hyper links) and attributes a ‘weight’ based on a set of keywords. Weighting is based on many differentiators (depending on the search engine) but we can say that generally the  relevance, frequency and density of your keywords helps the search engine score whether your content is relevant to it’s users searches. We will look at keyword usage in detail at a later date.  The most relevant search engine results page (SERP) listings are given to those web pages that most closely match the search engine’s search criteria.

Communication & Web Copy

“Do you have what I want?” is the question the reader subconsciously asks when visiting any web page. Does your web copy communicate “why you should get it from us” at all times? Even in the site navigation and layout of all the text in the site? What do you notice about the way easy-to-read websites present their information? Read the following example passage of text about the ‘Purchase Process’ in the way you would casually read any web page. These following passages attempt to demonstrate how typography can change the way you scan/read a page.

Browsers. Find more. These people may not know exactly what they want, but have an unmet need all the same. People that visit websites often know something about the subject they are reading about and more-often-than-not want more information rather than the ‘hard sell’. Evaluators. Why upgrade? People know enough to compare the available options and are looking for detailed supporting information. Why do you visit the websites that you visit? Transactors. Buy stuff here. Having already made a buying decision, these users need to quickly go through the mechanics of the actual transaction process, through e-commerce or by contacting the vendor. Customers. Compare prices. Frequent, returning visitors of your website are probably your customers. Your customers have completed their transaction and need to sustain their satisfaction level until their next decision.

Q: Did your eye land on the first bold word and then dance around to the others stylised words making it difficult to read the paragraph from start to finish? Try reading the same passage again, this time with paragraph breaks added to break-up the block of text.

Browsers. Find more. These people may not know exactly what they want, but have an unmet need all the same. People that visit websites often know something about the subject they are reading about and more-often-than-not want more information rather than the ‘hard sell’.

  • Evaluators. Why upgrade? People know enough to compare the available options and are looking for detailed supporting information. Why do you visit the websites that you visit?

  • Transactors. Buy stuff here. Having already made a buying decision, these users need to quickly go through the mechanics of the actual transaction process, through e-commerce or by contacting the vendor.

  • Customers.Compare prices. Frequent, returning visitors of your website are probably your customers. Your customers have completed their transaction and need to sustain their satisfaction level until their next decision.

    Q: Did your eye land on the bold words then quickly move somewhere else before you finished reading the paragraph? Do you find yourself scan-reading the first sentence, skipping the rest because your eye jumped to the next paragraph? Did you finish reading a paragraph? Try scan reading this next passage as if you’ve never seen it before…

    Browsers

    Find more

    These people may not know exactly what they want, but have an unmet need all the same. People that visit websites often know something about the subject they are reading about and more-often-than-not want more information rather than the ‘hard sell’.

    Evaluators

    Why upgrade?

    People know enough to compare the available options and are looking for detailed supporting information. Why do you visit the websites that you visit?

    Transactors

    Buy stuff here

    Having already made a buying decision, these users need to quickly go through the mechanics of the actual transaction process, through e-commerce or by contacting the vendor.

    Customers

    Compare prices

    Frequent, returning visitors of your website are probably your customers. Your customers have completed their transaction and need to sustain their satisfaction level until their next decision.

    Evaluators

    Why upgrade?

    People know enough to compare the available options and are looking for detailed supporting information. Why do you visit the websites that you vist?

    Q: Does your eye land on the bold headline first and the sub-title second? You probably read the paragraph content if it interested you. If the headline and subtitle was not what you wanted you probably moved to the next headline/subtitle.
    Here’s the same passage with example  HTML tags to demonstrate how to use headings, sub-headings and paragraphs to break up your web copy.

    <h1>Browsers</h1>

    <h2>Find more</h2>

    <p>These people may not know exactly what they want, but have an unmet need all the same. People that visit websites often know something about the subject they are reading about and more-often-than-not want more information rather than the ‘hard sell’.</p>

    <h1>Evaluators</h1>

    <h2>Why upgrade?</h2>

    People know enough to compare the available options and are looking for detailed supporting information. Why do you visit the websites that you vist?

    <h1>Transactors</h1>

    <h2>Buy stuff here</h2>

    Having already made a buying decision, these users need to quickly go through the mechanics of the actual transaction process, through ecommerce or by contacting the vendor.

    <h1>Customers</h1>

    <h2>Compare prices</h2>

    Frequent, returning visitors of your website are probably your customers. Your customers have completed their transaction and need to sustain their satisfaction level until their next decision.