Typography as a Tool for Improving User Experience and Usability

Jun 15, 2011

As you may know enhancing your website usability can turn up a real headache, especially if you don't imagine where to start. Many web masters on the net claim that design begins with the proper typography. And today we are touching on the subject of typography as a tool for enhancing usability of web projects.

Whether you are a newbie or an experienced web design guru, there is always something new to discover about improving your websites to bring more regular visitors.

Below you will find some interesting facts about usability, legibility and readability as well as recommendations about selecting fonts, font sizes and other parameters in a proper way to make your pages more readable.

Components and Mission of Typography

Typography diagramAccording to the stats 95% of web information is written language which requires good shaping. Typography is actually all about shaping this information. Logically enough typography affects reading. Typography is known to affect legibility and readability of text. It defines the comfort and speed of reading and emphasizes the proper ideas.

You may select the type for its rhythm, style, mood and legibility which are being set by font type, size, spacing, kerning, orientation etc. The text features such as margins, line length, word choice and pictures placement into the text body can also affect reading.

F-shaped eye pattern
You should also consider the flow of the eye movement through the body text. According to eye-tracking visualizations there is even specific F-Shaped pattern for reading web content. This means that users follow two horizontal stripes and a vertical stripe instinctively, so it's highly desirable to place all important information right in that area.

Legibility and Readability in Terms of Web Design Usability

Features affecting readability

Recently we fell across an interesting material about BBC experience of playing with text in different languages. They conducted a research about what font would be the best one for various languages and made a conclusion that Nassim is that very font that meets the typographic hierarchy they need. They worked out the customized editions of Nassim (c) for Arabic and Persian versions of BBC website. The font has been created by Titus Nemeth in 2007. This search proves that each language requires specific typographical approach. You should work at the letterforms to make them look exquisite and recognizable by the audience. This can be achieved by creating the font to look anatomically and stylistically outstanding and at the same time readable. That is their recipe for improving user experience and usability.

Based on the analysis of typography and legibility made by Ellen Lupton, we came to the conclusion that people are quite tolerant for typographic variation and that typographic system is quite elastic. According to Ellen, “designers often distinguish “legibility” and “readability” as the objective and subjective sides of typographic experience”, while for scientists readability is often “objectively measured, as speed of reading + comprehension”.

Improving usability

Considering the abovementioned studies, we would like to clear up the definitions of legibility and readability in terms of web design usability.
First and foremost, what is usability all about? In simple English that means a group of features which make the website efficient, visually consistent and easy to use. Not less important is meeting the needs of your potential audience.

Usability is associated with legibility and readability first of all. In case the website is not efficient and difficult to use, the number of visitors will fixedly decline. Not surprisingly, the visitors tend to return to the sites with perfect usability. The best way to achive maximum usability is to walk in user's shoes meaning look at the text from the user's point.

Legibility and readability

Legibility and readability

You may find it useful to discern the difference between “legibility” and “readability”. Ellen Lupton in her research explained the definitions in the following way: “legibility” concerns the ease with which a letter or word can be recognized (as in an eye exam), whereas “readability” describes the ease with which a text can be understood”. So legibility serves for visual perception and scanning of information, while readability means understanding and is more associated with typography.

The separation of legibility and readability is oft misunderstood. Robin Williams in his work “The Non-Designer's Web Book" states that readability means how "easy it is to read a lot of text, extended text, pages and pages of text". Kevin Connolly adds that readability is defined by reading rate and comprehension as well. It's obvious that both type font and line length are at the forefront of readability.

Psychology students at Wichita State University conducted a survey on the legibility of various font types and came to the conclusion that Courier, Verdana, Georgia, and Times are the most legible fonts.

So legibility serves for visual perception and scanning of information, while readability means understanding and is more associated with typography.

Despite these fonts have been recognized as the most legible ones, the case about typography is by no means closed: there are other essential visual factors that affect readability on the whole.

Major factors affecting readability

Serif font Type font choice. Choosing the best font for your website is not an easy task. The font has a variety of parameters like bold or regular, serif or san serif, different sizes. Robin Williams, an authoritative American educator, states that a long passage of text is easier to read with a serif typeface. Many sources recommend to use maximum two font types for your web page design. The optimal type size is considered to be 10-14 points for the online content.
The Times of London are using Times New Roman for the decades not occasionally. And professional webmasters often use Arial or Verdana fonts for body copy deliberately, considering typographical experience. Verdana, Arial, Times New Roman and Tahoma are recognized as the most readable fonts to use. Try to avoid extra usage of funky fonts damaging the clean and readable layout.

Line length. Over the decades there have been debates about the optimal line length.
E.g. Williams recommends to use shorter line lengths since human eyes can't grasp the text across the whole screen. Humanfactors.com have compiled results of several researches and made a conclusion that the perfect line length is four inches. The other studies show that the best width for a text line is 45- 75 characters including spaces. The ideal line is believed to contain 66 characters.

Word choice. The proper word choice impacts readability as well. Although it is closer to copyrighting than to typography, it affects typographical representation of ideas as well. Short slogans and headings require brief and precise wording. The number of syllables, the number of words, their meaning and addressing to audience plays important role in the content perception.

The following simple rules about the words usage will help you to improve the readability and, as consequence, the usability of your website content:

1) less syllables eases reading and understanding;
2) less words and short sentences improve readability;
3) wordings about people and addressed to the specific audience provoke more interest;
4) technical information should be presented with the traditional English words instead of Latin borrowings.

Hoping that using these simple rules and recommendations will make your texts friendly and memorable for the readers. Keep in mind that readability and usability are in the forefront of conversion and retention, and typography is the perfect instrument to improve the situation.

Usability in web design

Let's cast back the basic keys of effective typography:

  • specify the target audience so that you could offer more relevant information in a more efficient way;
  • improve legibility of content;
  • consider optimal type font, line length, word choice and other things affecting readability.

Just play with fonts and give your readers a more enjoyable experience of working with your website!

Helga Weber
v Complain

Recommend this post to others!

Found the post interesting? You might also like:


2011-06-16 08:40:00

enjoyed this very much ... Thanks Helga, and as a new columnist to TM ... you are a pro ... this topic really would of lost my interest along the way if it wasn't so well put and sensable

2011-06-15 21:59:00

A most impressive and useful account on the subject, well chosen and researched.  Thanks very much Rob Whalley

2011-06-15 20:19:00

Excellent article Helga and welcome to the team. Very relevant and useful.

2011-06-15 08:49:00

I was reading what you were saying about the results of studies showing that long blocks of text are more easily read in serif, but then you said that web designers are using Arial and Verdana for a good reason. What is that good reason? Thanks for this useful article, by the way. :-)

2011-06-15 08:06:00

Very informative article, Helga!  As a regular customer of Template Monster, and a huge fan of fonts, I wanted to share a great resource for web-ready, "Webfonts": http://webfonts.myfonts.com/.  MyFonts webfonts are packaged in self-contained kits for easy upload to your own site, or any hosting service. You can use the CSS styles that they’ve put together, or fiddle and tweak until your happy.

Last Updated : Jul 26, 2017

Rating of post