The key decision at the beginning of the design project is choosing the font. As soon as it is chosen, it creates the basement on which designer can develop the system to support the process of decision making which helps avoid the terrible situation when you discover that there is nothing to fill in this or that block of interface.Alphabet image from Shutterstock
In order to narrow down the choice among the huge number of font options, I start with describing in general words the design problem which we are facing. This, as a rule, means that I make clear for myself the main goals of the project I am working on. Maybe, it is a content-oriented website giving entertaining information? A web application oriented on the tasks and ensuring they are completed on time? Or is it a website containing both content-oriented elements and elements oriented on the task execution (like CMS)?
Content-oriented sites (on the foreground) and websites oriented on web-application tasks (on the background) often differ by ways they use the text.
Difference between these two types of sites influence the approach used to choose fonts in this and the other cases. Content-oriented websites widely use large long blocks of texts, while web applications mostly oriented on task execution, work with shorter, isolated inclusions of the text. Knowledge of these functional differences can help focus on the right project elements at the beginning of work by giving the set of important criteria and limitations which, in their turn, help us make a balanced decision about the font.
Now I will demonstrate several issues that can have a special influence on font choice for task-oriented web applications (user interfaces) starting with our physiological limitations on text perception and finishing with the way it can affect the font design. My main task is to demonstrate you several methods to facilitate the process of typography decision making and essentially improve your future options of interface design – from both functional and visual points of view.
Peculiarities of reading process
In the user interface area you can often see the screens which, speaking typographically, are the group of words depicted at some distance from one another. The examples of such screens are: web forms, navigation menu, control panels etc. This is a key difference between the content-oriented sites and applications oriented sites, which are focused on task execution. So why is this difference significant?
As it turns out, the effectiveness/easiness of reading is a function depending on the amount of the text available. Within the certain perception limits (15-20 letters) there is a direct link between the reading spped and a number of letters visible to the eye. It means that an isolated word consisting of 20 graphemes will be read slower that the word which is the part of the sentence.
In order to understand this phenomenon better it will be useful to get acquainted with one of the basic mechanism of reading: saccade. Instead of running through the page smoothly while reading our eyes make jumps fixing on one word for the short period of time before jumping suddenly to the other word. Such move pattern is called saccade .
While reading our eyes are not moving linearly but jump from one word to the other.
However, in spite of its “ballistic” nature these rapid movements of the eye improve our ability to read. While our brains process the words which are within the eye focus, we use additional information outside the focus area, and this information guides the reading process. For us, as readers, time spent for understanding the word meaning reduces thanks to the context created by the neighboring words – as the brain processes the shorter units of the sentence, such as prepositions and conjunctions.
This, as it may seem, not quite obvious fact can considerably influence the process of choosing fonts for the interface. When necessary, our task-oriented web applications tend to use separate words or fragments of sentences more actively than their content-oriented colleagues. That is why we cannot expect that contextualization effect, characteristic of saccade, will help us improve perception of text elements of our design, either we cannot increase the volume of the text in order to smooth out negative effect from wrong font we chose. It makes font selection crucial when designing task-oriented websites.
Importance of the elaborated structure
Recent research in the field of cognitive psychology confirms the idea that we recognize the words by determining separate letters first of all. It means that any font, suitable for user interface, must possess perfect clarity of form.
Several years ago the researchers of the Psychology Department of Victoria University made an empirical research aiming to find out which characteristic differences the readers see between visually the same letters.
The Victoria University scientists research results. The enhanced areas include the elements due to which the readers distinguish separate letters with the different text resolution.
According to the authors of the research “the areas of lines interruption are the most important elements of letter identification”, but I think that extremely informative analysis of the research results made by the designer Ralph Herrmann can be applied to our subject:
In the left column we see that in most cases we pay attention to the letter structure elements containing specific features…cross element in letter “e”, looking up stroke in the ending of “c”, presence and form of upward and downward elements in general .
Of course, these structural elements play key role when the readers have to find difference between the alphabet letters which are often confused: с/е, а/о, I/l, и O/0.
Geometrical fonts such as Futura PT (size bigger than15 px), contain big number of similar forms which can negatively affect text recognition when drawing in the font.
Well-made readable font can level the problem of letters recognition, which even being close in form still are clearly distinguishable from each other. Interestingly, such high level recognizability is the feature of fixed-pitch fonts which have become very popular among programmers (whose earnings directly depend on accuracy of symbols typed in code).
Many fixed-pitch fonts, like Source Code Pro (size bigger that14 px), are famous for their well-distinguished forms of letters and high readability.
Screen defects and their neutralization by right fonts
Due to technological nature of data transmission devices the accuracy of visual reproduction in our work is limited by the screen resolution. Consequently, no research on interface fonts can be full if it does not deal say how to deal with texts displayed differently on different screens.
Apart from some extraordinary devices with Retina and HD displays, most of computer screens have relatively low resolution: approximately 100-150 pixels per inch for a high-quality display . (Let me note that this is less than 20% from maximum resolution which can be perceived by a human eye: it is about 800 ppi depending on how you make calculations ).
Screen resolution restrictions are a problem as most of fonts were initially developed for print media with considerably higher degree of resolution. For the texts (often 18 px and less) rough pixel grids of our monitors can limit users’ ability to notice small details. This, in turn, can make our design extremely difficult to perceive. The font designer Peter Bil’ak outlined the nature of the problem as follows:
The outlines of letters are designed and stored as contours, mathematically ideal lines and curves looking perfect at high resolution, but they can become fuzzy and even indistinct when transformed in groups of pixels….
When the text size changes, rough pixel grids of monitors can badly distort the letter form (font Bodoni, size bigger than 24 px, drawn in by 600 times).
To assist this very well-known problem some specially designed to be used on the screen fonts are optimized, the process being called “hinting”, through which “mathematically perfect [vector] contours [of letters] are correlated with monitor pixels ”. In theory, after hinting has been applied, fonts will be displayed on the screen more clearly – or, at least, more readable – and will not change considerably when switching between browsers. And, surely, when choosing fonts for user interface you should pay attention to hinted fonts exactly; hinting can help solve the problem of choice in favor of one of two fonts comparable by other properties. But it is only an additional property, not a guarantee of success.
Hinting can improve font rendering but, as different platforms and applications use different rasterization technologies, the results of rendering can differ considerably. Moreover, according to Peter Bil’ak “hinting is tiresome, time-consuming and is considered outdated almost everywhere”, which is the reason why “99% of all fonts, even commercial, are not hinted”. As a result, we cannot rely solely on this technology to solve the problem of displaying data on low resolution screens.
Instead of this when choosing the font we should double the attention to the letter form and come to terms with requierements of ecosystem of devices with low resolution screens. In particular, good font must withstand the principles of aesthetic balance: it is not too thin or delicate, not too heavy or flashy, it should rather be memorable, have skillfully executed features thanks to which font can look visually attractive and otiginal. From technical point of view such font must have a number of functional features:
- Big lowercase letters – with respect to capital letters
- Enough space between characters, not flattened
- Well-recognized features corresponding to common design principles
- Moderate upward/downward elements
- Enough space between letters
- Low/minimum contrast in strokes
- Firm, hard serifs without brackets (or fonts without serifs)
- Orientation on the vertical axis (suitable for pixel grid)
Verdana (font designed by Mathew Carter) demonstrates great number of features of good UI-font
Typography improves productivity
Eventually, studying differences between choosing fonts for websites and web applications is less important than understanding the basic principles of good typography. In essence, many of tips on choosing the font given above can be used regardless of the text size you are working with: you should understand how users read the text to choose the right font that will improve their reading experience.
Choosing a right font is demonstration of skills and ability to understand the context, form and users demands. Similar to UI-designers, we should remember that our main target is not to confuse the users by a great number of details but to ease the burden of their tasks and help in their execution.