How to Choose the Right Font – An Introduction

Tobias Gölzer

October 31st, 2011

Texts are important parts of most user interfaces, be it, e.g., as form field labels or longer help texts. This article is aimed at providing a common introduction to the topic „choosing the right font”. It contains some hints an pointers that simplify the search for the right typeface.

When creating an interface, every designer will be confronted with the question of the right typeface. At a first glance, this task can be solved with the help of simple decision rules:

“Which font will I use?” and „How large will the font be?“.

In reality, you will be surprised by the complexity of trying to answer just the first question – the number of typefaces seems to be unlimited.

Simple, complex, playful, straight-line, two- as well as three-dimensional fonts… there are obviously no limits to the typesetter’s phantasy. Furthermore, parameters like font weight, the use of small caps and so on must also be dealt with.

After finding the right typeface, you will probably shift your attention to the right font size. But this is also about more than just a single number. Apart from the letter’s height, line distance, paragraph height, spacing between letters and many more factors must be considered.

But how can you find the font suitable to your interface?

Unfortunately, there is no formula for success, which delivers the perfect typeface for your special interface. But if you follow some basic rules of typography, you will be able to reduce the list of qualified fonts to a small number.

How do fonts differ from each other? The normative aspect

If you leave out fun-typefaces like Hypmotizin, the field of fonts suitable for interface design can be split into two parts: fonts with or without serifs.

Serifs are the small lines, running across the end of the strokes of a letter.

A finer grained classification of fonts is proposed in the German DIN norm 16518 (“Typefaces”). This norm categorizes typefaces into eleven groups, e.g. group II: french rennaisance-antiqua, group IV: classic antiqua or group XI: foreign typefaces. These groups differ from each other in their time of origin, the kind of painting strokes, whether or not they have serifs, special axes, the axis and form of possibly existing serifs and many other characteristics. Additionally, there are some special font groups like group VIII: cursive handwritings, which is specified only by the connection of the characters and the look of a contemporary handwriting.

Legibility and Readability – the theoretical aspect

At first glance, legibility and readability seem to be the same thing, but in fact, they are not.

The legibility of a typeface refers to the design of one single letter, affected by e.g. stroke thickness, serifs and other form factors. Legibility refers only to the form factors. Color, Contrast etc. are part of the readability. As an example, decorative fonts have got a low legibility, because they are optimized for looking good and not for being read with ease. Typefaces designed for newspapers or letterpress printing have the distinction of being highly legible.

To maximize legibility, you should consider the following points:

The typeface should not use unconventional letterforms
- Letterforms with unconventional shapes (special decorations, unusual proportions…) “catch” the reader’s eye and impair reading. As a result, the character as an individual entity is given more weight than the text itself.
Find the right spacing
- Use generous spacing for small fonts, because otherwise, the human eye will have problems distinguishing the letters.
- Use tighter spacing for big fonts to clarify word structures.
The letter’s width should not be too small
- Letters with a small width make it difficult for the reader to distinguish some characters, e.g. an “e” from a “c”. This should be considered in combination with the first point mentioned – the width should only be so large that a natural typeface is still guaranteed.

A typeface‘s readability, on the other hand, does not refer to the individual character, but to the combination of characters in a text. It is not about how the reader recognizes each character, but about how readable the text is in its entirety. Therefore, facts like weight, size, alignment, color etc. are important in order to judge the readability.

There are also some hints regarding readability:

A typeface does not work equally good at every place of an interface
- A font, which is suitable for a headline is mostly harder to read if the text that it is used for becomes longer.
Ragged right instead of full justification
- Too large or uneven spaces between words, as they are often resulting from full justification, impair text readability.
Find the right line spacing
- If the lines of a text stick together, it is difficult for the eye to jump from a line to the next one. There is no hard formula to determine the perfect line spacing. As a rule of thumb: The line spacing should lie between 120% and 130% of the type size. As an example: If your type size is 10pt, line spacing should be about 12pt -13pt.
Find the right character size
- With the help of different character sizes, hierarchies within your text can be described.
- In his article article „16 Pixels: For Body Copy. Anything Less Is A Costly Mistake” Bnonn Tennant claims that fonts smaller than 16pt are just too hard to read for a large percentage of the population.

The aspect of readability is especially important for the content area of an interface, if continuous text is provided in the form of help texts, information etc. For navigation- and header areas on the other hand, legibility has priority.

Context-dependent restrictions – the technical aspect

Limitations resulting from the context of use of an interface must also be taken into consideration. This concerns, e.g., the use of fonts in web applications, since the correct display depends on whether the selected font is installed on the computers of individual users.

To address this issue, web fonts are a good approach, because they do not need to be installed but can be downloaded and integrated from the web on demand.

Furthermore, the completeness of the font package must be checked.

Aesthetics – the emotional aspect

Finally, the emotional component should also not be neglected. An accountant will not be able to offer a website in a Comic typeface without sending a detrimental message regarding his trustworthiness.

Every font conveys a certain „impression”. Whether it is the childish look of a comic typeface (Comic Sans MS), the clear, serious appearance of a typeface, designed for print, with a particularly high legibility (Garamond) or the oppressive, almost aggressive appearance of a compact, bold font (maybe even with a negative character spacing) (Weltron Urban) – the same text generates a completely different effect by using a different font.

This does not mean that a different font should be used for each area. When containing a large number of different fonts and sizes, an interface appears extremely uneven and is difficult to perceive.

When looking out for font, not every existing one has to be tested. At http://bonfx.com/the-100-best-fonts-in-a-huge-sortable-table/ you will find a listing of the hundred most used fonts – and they are not used that often for no reason.

Conclusion

The correct choice of a good font is a science in its own right. However, the seemingly endless number of options can be reduced to a manageable level by using a few simple rules. In addition, personal taste and the emotional appearance of a typeface play a decisive role.

Furthermore, if you focus on the fonts used most often by other designers, you will be able to find one or more suitable fonts for your own interface. Countless sources on the internet (e.g. http://www.typosuche.de/ (German) and many more) assist your searching.

Blog