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
The following is a list of 12 practical typography guidelines which will help you improve the overall usability of your website:
- 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
- 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
- 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
- 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
- Use standard fonts for web site fonts: Users are more familiar with standard fonts and can thus read them faster
- Character spacing should not be minimised: Altering the character spacing to fit in more text, makes it more dense and difficult to scan
- 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
- Do not use blue for content: Users associate blue text with links and can thus try and click on it
- 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
- 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
- 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
- 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 website.
Want to learn more?
If you’re interested in the intersection between UX and UI Design, then consider to take the online course UI Design Patterns for Successful Software and alternatively Design Thinking: The Beginner’s Guide. If, on the other hand, you want to brush up on the basics of UX and Usability, you might take the online course on User Experience (or another design topic). Good luck on your learning journey!
(Lead image: wilhei via Pixabay)
