ElementsDaily

These days typography has been redefined to what we all in the web world refer to as “fonts.” And “fonts” means everything from the family of fonts or type faces (Arial, Times New Roman, Verdana) to the font size (a “big” font or a “little” font or actual point sizes - did you know there are 72 points to an pica, 12 picas to an inch?), to the color (a “red” font).

Typography refers to the technique of laying out text on a page - arranging the type (font, point size, line length) and adjusting the space around it (letter spacing, kerning, leading). Typically, it’s easier to recognize these arrangements in printed works - pages of a book or magazine, to ads and posters, packaging and labels. Typesetters were really the “OG” html coders. Back when there were actual type houses, typesetters’ codes directed exactly where and how the type appeared using point and pica measures - and the codes were similar to html.

Web design has come a long way with typography and creating better options for designers to design with type. Most designers create with placement of photos, logos, color and often, flash or other types of movement on the web page. Website designs that are inspired by typography are few and far between.

Designers generally use “web-safe” fonts for the site content. This way the content is displayed in the correct font for the majority of computer systems and browsers. If the content is published in a font the user doesn’t have, browsers will automatically choose an alternative font, often defaulting to Arial or Times New Roman. The most widely recognized web fonts are Arial, Verdana, Trebuchet MS, (sans serif fonts); and Times New Roman, Courier and Georgia (serif fonts).

So how does all of this typography stuff affect your website and design? Good typography design is transparent, really. The content should be easy to read, easy on the eyes and easy to follow. The type shouldn’t distract or confuse the user or take away from the composition of the page.

Some typographical details to consider:

Yes, it Matters

If your users are able to see and read your content, you’ll get your message across so much better! So, mouse-size type doesn’t work for many users…even if you are uber-minimal and only have a few words to say. Consider 10 point being the smallest size you use, but 12 point may be a better point size overall for most readers. Not everyone has bionic vision… If you choose to use a smaller size, generally sans serif fonts are easier to read because of their simplicity.

Get Lost in It

White space, breathing space, negative space - let your users’ eyes rest, let your type speak and tell your message. A good designer is able to manipulate this space in the site to direct your user’s attention to the text and content. Consider the space between your lines of text as well…it’s called leading. Tighter leading makes for a denser paragraph structure and the ascenders and descenders of the letters can get tangled up in the lines above or below. While this may be a creative effect for a few lines or maybe a short paragraph, it would be hazardous for an entire body of text. The larger the leading size, the more breathable room between your lines of text and the deeper your area of content will be. The downside of too much leading is that your paragraph begins to look like rows of text rather than a paragraph. Further, you may be sacrificing web page real estate with larger leading. But, sometimes it’s the space between that counts.

Yes, it Still Matters

Giving your content headers, subheads, using different and varying sizes for text helps the user maneuver though the page. Mixing up the type faces/fonts (a sans serif header with a serif subhead or sans serif header with serif body copy) also gives the user cues about page content. Use these styles consistently throughout your site so your users recognize these items easily - it will help the skimmers, especially! A design that makes it easier to understand information generally keeps users on the site longer.

Color Me Easy to Read

Keep your content easy for the user to read, keeping colors in fonts to a minimum. Generally, stay away from light colors - hard for anyone to read. If your site is informational, people with poor eye sight will have difficulty with light type on a textured background - help get your message across by using a light or no background and darker text….black is good. Busy backgrounds are no help for readability at all…stay away!

If It’s Legible is it Readable?

Readability and legibility are not the same, but the terms are often used interchangeably. Readability refers to comprehensibility, content and language - how easily a written language is actually read and understood. Some factors that affect this are awkward grammar; use of esoteric words or colloquialisms; writing style - very long sentences or paragraphs are less readable than shorter ones.

Legibility addresses how easily text can be read - the size and appearance of type. So mouse type is not very legible nor is a long paragraph set in all caps (the logic being that lower case letters have more unique shapes thus forming recognizable words). Font design affects legibility and there’s the on-going debate between which is more legible: serif vs. sans serif fonts. Other typography factors that can affect text legibility:

• ~ Leading
• ~ Kerning - space between letters based on character pairs: for example, AV
• ~ Letter spacing - space between letters; tracking refers to increasing or decreasing space evenly regardless of the letters)
• ~ Word spacing
• ~ Colors - contrast in background and text
• ~ Text justification - left, right, center, justified
• ~ Roman vs. italics - Roman - “regular” upright text is supposedly more legible

More and more, text printed on paper will take a backseat to internet-based text…or at least text read on a computer. Writing will always exist, but the canvas it appears on will continue to shift to the digital world. Technology will advance standards further to allow us to design with and use more varied fonts (web) safely. And a wider variety of typographic elements opens up a different world of imaginative and creative design concepts. However, whatever the medium, standards of good typography design, legibility and readability will always apply.

Numerous research groups have conducted studies to determine how people read online (and print) content. Eye tracking research tests the theories and assumptions about this consumer behavior and can help us build a better website and guide better designs.

Although the test methodology may differ, researchers have collected and analyzed data regarding how different aspects of a web page are viewed (headlines, subhead/tag lines, ads, photos and other graphics); how people navigate a website; how long the readers stay with an article and how much of the content they read and content placement may affect any of this. Some research even tests reader retention.

Generally, eye trackers use fancy eye tracking equipment that records the users’ eye movements on a page. The results typically show red/orange/yellow spots where the reader’s eye stops or lingers; green/blue indicate areas that the reader finds less important or interesting, or, in some studies, the areas a reader does not even look at. Some tests also record where the reader clicks on their mouse and how far down the page the participant read or scrolled before bouncing away somewhere else.

Left, Right, Left

Reading in our Western culture flows top left corner to right and has a great influence in these studies. Not surprisingly, the upper left corner of the page (print or web) seems to be the overwhelming favorite gateway to websites. The upper left side of the page was strengthened when strong headlines and company logos (flags) were incorporated into the design of the page. Larger sized headlines obviously being more noticeable than smaller headlines.

Top, Right or Left

After starting in the top left corner of the web page, users’ eyes then moved left to right so logically, users focused on  main navigation bars or other navigational elements that were placed at the top of the page. In some studies, main nav elements in the right hand column got more attention than those in the left hand column. The argument for a right side secondary nav is that the scroll bars are usually on the right side of the browser window. By putting the navigational elements on the right side, you increase your users’ efficiency on your website.

The argument for a left hand secondary nav is that the users’ eye always traveled back to the left side of the page (Western reading), so using the left column for this navigation would seem appropriate. The majority of websites are designed with left hand navigation and users’ are comfortable finding it in this area - force of habit. Forcing a change in this habit could force your user to have to work to figure the page out and potentially spend less time on the important content, or leave the site altogether. A good compromise is to leave the secondary navigation  in the left column and include other calls-to-action items or links in the right column.

Pretty Picture or Catchy Headline?

There’s some controversy over whether people are more attracted to a photo or the web page’s headlines. After landing on a homepage, most users were attracted to content - catchy headlines - more than they were large photos. Content also guides the users’ actions on a site, so good content is critical. Users gravitated toward headlines and summaries leading into the main article as well. In most studies, they preferred content written in short paragraphs. Remember most online users scan for what they are looking for, rather than reading entire paragraphs of content.

However in some studies, users were attracted to larger and more eye-catching photos with good placement: mid-page and above the fold. Users do like content broken up with images (photos or graphics; photos were viewed more than graphics in general), whether larger or icon-sized. Since the text dictates the users actions more than images, compelling images will supplement your content well.

Ads and Folds

Ads placed in those same areas (left side of page, top of page) received a lot of attention, but that placement can cause a design challenge if you want to establish clear brand identity. Ad placement on a web page has more limits on the real estate, so it’s an extremely important exposure issue for advertisers. Users also looked at bigger ads over smaller ones and those placed near content they were interested in reading.

Content and ads placed “below the fold” or in the lower parts of the screen received some attention, but were often overlooked, especially if the user has to scroll too far down. There is some controversy over content placement in the lower right corner or lower parts of a web page, as those areas would be the logical end of the users’ eye movement. The decisions about where to place a call-to-action or an ad are: how far south on the page and above or below the fold. Best practice is usually above the fold.

F+

What we’re really looking at here is an ‘F’. The user enters your web page at the top left corner of the page (top left corner of the ‘F’) . Their eyes them move across the page to the right, comes back to the left side move down the page and then across the page to the right again….a loose ‘F’ pattern. Good web design will take advantage of this almost automatic reading behavior and place critical elements in the page’s strategic hot spots.

• ~ Place a captivating image or a dynamic headline in the top left area is great; combine the two and placing them together has even greater impact.
• ~ Use your left column for secondary navigation - it’s a natural fit for the spine of the ‘F’. And place other important navigational or calls-to-action on the right side of the page where the users’ eye naturally travel makes perfect sense.
• ~ Keep your most important content and eye-catching photographs above the fold helps grab users quickly.
• ~ Write in a way a scanner can rapidly absorb information on your home page to keep their interest. Include links or other strategies to lead users to sub pages where they can read articles in full or gather more information.

Your web site’s home page design should be insightful and creative. It should engage your clients and guide them through your site, compelling them to take action in the places you specify. Your home page is also your client and future clients’ first impression of you as a person, company, brand, product and/or service. And at the hyper-speed with which everything technological moves these days, you want your home page to do it all and say it all – all in a few minutes.

Eye Contact

A visually appealing design will draw your clients into your site, but placing your important messaging and calls to action in prime locations encourages them to stay and participate. By structuring your home page effectively, you’ll create a visual hierarchy that provides users with an intuitive path through your home page.

Understanding how users’ eyes typically move on a web page will help give some logic to getting the most from your home page’s real estate. Most users’ eyes begin either in the upper left corner of the page or in the middle of the page and then move to the upper left corner. So, placing your company logo and possibly your brand messaging in the upper left corner is a great start.

Your clients’ eyes may then scan across the top of the page to the upper right corner. This path is logical based on Western readers reading from left to right and generally follows your main navigation bar. The users’ eyes may then zig back left and down, so putting calls to action or action items in a left side bar (buy now, join now, learn more) tells your users how to participate.

Typically, your users’ eye movement zags the rest of the page ending in the lower right corner of the page. So, this gives you another chance to make an impact on your client.

Remember, these are general eye movement theories*. There are many other synergistic factors that draw your clients into the site and compel them to move through the page and stay on your site.

This Company Speaks to Me

Establish your credibility immediately on your home page with accurate and compelling content. Your home page introduction should not be a dissertation because users “scan” and “skim” more than read. Convey what you do or are offering to your audience and why you do it better than your competition. Get this message across in the first minute of their visit.

Make your headlines inspiring and informative. “Welcome to my home page” misses the boat…think Ferris Bueller’s econ teacher, “anyone…anyone.” Establishing what you do or what you want your clients to know in your headline is much more interesting. For example, we want our clients and our future clients to know that we “Know why. Know how.” We know why our clients need our products and services and we know how to implement solutions to achieve our client’s goals.

Your content should be relevant to your target audience and make clients say, “this company speaks to me.” Educating your customers with information they want and need gives them a reason to visit, stay, and return, again and again.

Are We There Yet?

Easy and intuitive navigation is a must for your home page and web site. Web sites that use breadcrumbs help their clients navigate backward. This is especially helpful if your site is large. Also, limiting the amount of levels your users need to “drill down” into to find the info they want is good user-friendly design. Making your clients and users work to find information is a great tool to drive them away. Users equate a poorly organized site with the quality of your company, product or service.

• ~ Place important page links in several place on the page (main navigation, side bars, call to action buttons)
• ~ Offer different ways to get there. Use both text links and graphic buttons for site navigation.
• ~ Organize content on your page so it’s logical. Place the most important message pieces in prime spots “above the fold.”

Less is More

Graphical elements can add elegance to your home page. But, if your design is not thoughtful, your site can look and feel like a three-ring circus. Your graphics should fit your company’s messaging and branding. Flash might be snazzy, but it can also be distracting to search engine spiders and eat up valuable user time. Automated slide shows are a nice alternative. Used wisely, slide shows dynamically feature multiple images in one place. If your business requires other images on the same page, give careful attention to the number of other images and their sizes relative to your main image area.

Interactivity

Calls to action such as joining your e-newsletter, signing up for a monthly email, donating online or buying your product offer your users direct interaction with you in a click of a button…well, a click and then some data entry. These links or graphic button links should be clearly labeled and strategically placed. Putting an important call to action or two in various places on your home page gives your clients several opportunities to participate.

Keyword Relevancy and Density

Search engines are looking for relevant keywords within your content. This doesn’t mean just repeating your keywords over and over; they need to be written logically into the text. A good rule of thumb is between 150-250 keyword rich content. You can write more, but keep in mind that scrolling can sometimes be an issue for users. Keep your main messaging “above the fold” for good measure.

Double-Check and Check Again

Links that go back home, nowhere or contain 404 errors are frustrating for your clients. Typos and grammatical errors are a big no-no. Invest in the time to make sure your message is proofread and spelled correctly. With spelling and grammar check programs, there is no excuse for these errors on your home page. It destroys your clients’ confidence in you and creates the impression that you are not competent, therefore whatever your offering is of poor quality.

Make your page visually stimulating and easy to navigate. Optimize your branding and calls to action by placing these messages in strategically smart locations. Make your sparkling content accurate and error-free. Remember, your home page is your first impression and sometimes, you only get one chance to make it a lasting one.

*We will discuss eye movement and web site design more in-depth soon!