12 Typography Guidelines for Good Website Usability

Typography-Font-Usability
Improving your website usability can be a real headache especially when you are novice in this field. Typography plays a key role in improving the usability of web projects. Even if you classify yourself among the experts in web design, investing some time to learn more about typography would most certainly help you in discovering something new. In this article I will be discussing a couple of interesting facts about usability, readability and legibility which can help you in selecting adequate fonts when designing your next website. I will then provide a list of 12 practical typography guidelines which will help you improve your website usability.

The Elements and Purpose of Typography

More than 90 percent of information on the web is in the form of written language. This inevitably increases the need of proper styling. Typography can be defined as “the art and technique of arranging type in order to make language visible” (Source: Wikipedia). Simply put, typography is about giving better styling to how this information appears. However, the practical implementation of typography is not as clear-cut since typography is proven to impact legibility and readability of any text.

Typography defines the speed and comfort with which text is read by your users. You may choose a type for its style, rhythm, mood and legibility which depends on the font type, spacing, size, orientation and kerning. When viewed as a whole, text is also affected by margins, word choice, line length and image placement – all of which impact the way with which your readers will read the content that you are presenting to them. Thus, whether you are doing a website or a brochure design, you need to have at least an understanding of the basic aspects of typography.

Legibility and Readability in Website Usability

Every language has its own specific typographical approach. For instance, if any particular font looks good in terms of typography for the English language, that does not mean that the same impact is guaranteed in languages such as Arabic and Hindi. You are therefore supposed to work on the letter forms in order to make them look optimal and recognizable by the specific segment of readers that you are catering for. The only way to achieve this is to create or select a font that looks stylistically and anatomically exceptional whilst, at the same time, ensuring that it is readable. This is the mantra of enhancing your user experience and a factor of usability.

When discussing the topic of typography, I have noticed that two facts particularly stand out. The first one is that people are seen to be relatively tolerant for typographic variation and secondly, typography itself is pretty elastic in terms of how it is interpreted. Web designers generally term the factors of legibility and readability as the objective and subjective aspects of typographic experience, whereas the scientists consider readability as an objectively measured thing consisting of a blend of speed of reading and comprehension.

The Usability Factor of Typography

Considering the above perspectives, you need to understand the legibility and readability definitions in relation to the website usability domain. A usable website is dictated by the extent to which it can be used by specified users to achieve specified goals with efficiency, effectiveness and satisfaction in a specified context of use. Hence, it should come as no surprise that legibility and readability play an essential role within usability.

Another point worth mentioning is that legibility and readability are not the same thing. Indeed, despite the fact that these two terms are different in meaning and application, they are still considered as being among the most confused terminologies within the web development realm. Simply put, legibility is what gives you a proper visual perception and scanning of any text, whereas readability means understanding the content and is more specifically related to typography.

Both in terms of accessibility and general user perspective, typography is considered to be an important element. It makes the visitors to easily scan and read the text along with making it more attractive. This therefore improves the overall usability of your site.

Typography Guidelines For Website Usability

12-Typography-Font-Guidelines-Usability
The following is a list of 12 practical typography guidelines which will help you improve the overall usability of your website:

  1. Keep the number of fonts used at a minimum: Using a lot of fonts (more than 3 different fonts) makes a web site look unstructured and unprofessional
  2. Use sans serif fonts instead of serif for content: Sans serif fonts are more suited for the screen than serif fonts which are better suited for headings and print
  3. Ensure that proper text and text size is used: It is recommended that Arial Trebuchet and Georgia are at 10pts+, Times New Roman at 12pts+ whilst Comic Sans and Impact fonts are not used
  4. Content must make use of mixed capitalisation: Having all text in caps or small caps makes it difficult for the user to read and scan it. All caps text makes a web site look unprofessional and untrustworthy
  5. Use standard fonts for web site fonts: Users are more familiar with standard fonts and can thus read them faster
  6. Character spacing should not be minimised: Altering the character spacing to fit in more text, makes it more dense and difficult to scan
  7. Limit the use of different colours for fonts: When text is over-designed, it affects its meaning. Additionally, users may mistake over-designed text for adverts. Thus it is recommended that 4 different colours or less are used to colour text
  8. Do not use blue for content: Users associate blue text with links and can thus try and click on it
  9. Avoid colouring text in red or green: Since colour blindness is a common condition, especially amongst men (8% of men are colour blind), it is advisable to always use other cues in addition to colour to distinguish important text. It is also advisable to avoid the use of red and green since red and green colour blindness is the most common form of colour blindness
  10. Do not use the same or similar colours for text and background: The more visible the text, the faster users are able to scan and read it
  11. Numbers having 5 digits or more should have a thousand separator: The thousands separator makes it easier for users to quickly scan and interpret numbers
  12. Do not use moving or blinking text: Although the technologies with which they are implemented has changed, these techniques that have been with us since the early days of the web are still found in some web sites. Their objective is still the same – to draw the users’ attention. However, they convey an unprofessional image and may lead to users leaving the web site
  • http://www.facebook.com/pdonker Peter Donker

    I’d like to add another: use dark font on light background (preferably black on white like this site) for your body text rather than the reverse. If you don’t think this is important try reading an article on dpreview.com. It gives me a headache.

    • http://usabilitygeek.com/ Justin Mifsud

      Hey Peter! Nice to hear from you! Yes definitely agree. Whilst contrast is essential (as per guideline no 10), I totally agree with you that given the chance, contrast should be a dark text (ideally black) on a light background (ideally white) rather than the other way round. Thanks for contributing.

    • http://twitter.com/pjtr Peter Fransen

      Hi Peter,
      I keep hearing people claim that dark text on a white background is better than the other way around. Yet, I’ve never found any research backing that up. The little research that I’ve found usually claims that it doesn’t really matter and that any preference one way or another is just that: a personal preference. If you have any information on the topic (other than articles starting with “It is generally accepted that…” or “Everybody knows…”), I’d be glad to hear about it.

      • PatanjaliS

        Colin Wheildon’s research showed that:
        a) black text on white allowed 70% to have good comprehension.
        b) white text on black revealed 88% had poor comprehension. Similar if black is replaced with violet or blue.
        Basically white on dark is a turn-off!

  • http://www.fransgaard.com/ Fransgaard

    Good article. I wonder if 02 about sans-serif font is still true… probably still is but for how long?

  • Andrew Gill

    11. Numbers are a complexity as they have an impact on internationalisation. The following variations are acceptable in different countries

    1,000,000.00 1.000.000,00 1,000.000,00
    Note that in testing I have seen people from South America confused by $10.00 scanning through and assuming the price was $10000 or $1000 because of the use of the period made them assume that the 0 was there or that the period was in the wrong place rather than a decimal character.

    In terms of black on white and white on black, sometimes it is a choice of context, if a website is generally read in a well lit room then black on white is fine, and if it is to be read in the dark e.g. in a professional video editing suite then white on black is often superior.

    White on black actually offers higher contrast and so for someone with poor visual contrast white on black can be very helpful. Additionally it can be beneficial to have white on black if you are viewing in a mobile context as the higher contrast can be view better if the screen is is being viewed in bright light.

    However, for people with normally or good visual contract ability white on black can “give you a headache”. In fact many find black on white too high contrast and you will find many websites using a very dark grey (#222,#333) instead of black because of this.

    • trlkly

      Yeah, but the contrast problem is usually to do with monitors being set up too bright. It’s really the white that is causing the problem.

      A better reason is that you can make your bold actually be black, and thus create better contrast there. I see some sites where you the text is so dark that the bold just doesn’t stand out enough.

    • PatanjaliS

      Colin Wheildon showed that adding a background tint of up to 10% was more preferable than lowering the text intensity.

  • http://www.facebook.com/tim.suliman Tim Suliman

    Regarding number 9, it should be noted that the background color makes a difference. As a person who is red/green colorblind (Color Vision Deficient is the hot new term), red and green text aren’t invisible, but I have trouble differentiating them from other colors. Also, it should be noted that putting pure red or pure green items on a gray background does not always produce expected results. That’s because gray isn’t neutral on a screen the way that it is in print. Grays on a screen are usually made by using equal parts of red, green, and blue, so when you put a pure color on top of it, you can cause problems where things clash or are indecipherable.

  • Pingback: 5 Common Web Design Mistakes – And Better Options - WrightIMC

  • Pingback: How To Improve Your Site’s User Experience - Admin panel template | Admin panel template

  • Pingback: 9 Guidelines To Make Your Blog More Readable | Usability Geek

  • Pingback: 5 Guidelines For Improving Your Blog User Experience - Usability Geek

  • Pingback: 5 Quick Ways To Improve Your Website’s Usability | Ranign.com

  • Pingback: 40 Free Fonts For Commercial And Personal Use | Ranign.com

  • Pingback: Top 9 E-Commerce Usability Guidelines | Usability Geek

  • Pingback: 5 Guidelines For Improving Your Blog’s User Experience « WhatUsersDo Usability and User Experience Insights

  • Pingback: 5 Ways To Make Your Business Website User Friendly - Usability Geek

  • PatanjaliS

    When it comes to typography, I use Colin Wheildon’s 100 page ‘Communicating or just making pretty shapes’ by the Newspaper Advertising Bureau of Australia Ltd. He has now expanded that into a book ‘Type & Layout: Are You Communicating or Just Making Pretty Shapes’.

    Basically, he tested the effect on comprehension of various typograhical elements.

    Significantly, sans-serif for body text produced much less comprehension than serif. There have been many theories put forward about this, but it was driven home to me when I came across a brochure where they used a sans-serif font, but with less inter-character spacing so they could cram in more.

    What was immediately noticable was that text is mainly a lot of vertical lines, which tended to make obvious Moire fringes at such close distances. My theory is that by using serifs (the small dags hanging off the end of strokes), they add horizontal optical linking between characters, so aiding the process of reading horizontally, as well as breaking up the fringing tendency inherit in the strokes.

    Colin’s research was for print media. Up until the last decade, computers had relatively poor resolution, so had difficulty rendering serifs properly, but the ready availability of hi-res screens, especially on mobile devices, coupled with the increased use of scalable fonts with anti-aliasing in programs, has meant that the readability benefits of serif fonts on displays are more readily seen.

    Personally, I find sites with lots of sans-serif text harder to read, so that I am more likely to want to stop reading, unless there really is a likelihood of something being worthwhile in my persevering!

  • PatanjaliS

    Colin Wheildon:
    a) Justified: 67% had good comprehension, 14% poor.
    b) Ragged right: 38% good, 40% poor.
    c) Ragged left: 10% good, 72% poor.
    Justify has it. Most likely to work for all languages, as you don’t have to use css to change the text-align css attribute depending upon [dir=xxx].
    Just have to avoid long ‘inline-block’ tags, as if they wrap to the next line, the few words left on the preceding line get spaced out rather a lot. Bit of a nuisance as the :before and :after css constructs (as for auto-inserting quotation marks for the q tag) only work properly for mixed-direction language blocks if character formatting tags are ‘inline-block’.