Typesetting for User Interfaces

A good reading experience is smooth, distraction-free, engaging, and immersive. As Adrian Zumbrunnen puts it:

“Distractions have always been a natural constituent of our lives. But with the rise of mobile technology, a circus of notifications, and all the noise going on around us, it’s become harder and harder to focus on a task at hand.”

Making a perfect reading experience in a UI is an incredibly complicated and never-ending task as there is no limit to perfection, and an exciting one as well! But let’s try to explore one aspect of it that might be specifically helpful in understanding typesetting for UIs.

In order to understand writing, you have to understand the mechanisms behind reading.

Is ALL-CAPS legal?

As probably most of you know that we do not read words letter by letter and follow the line of text within a continuous vector. Our eyes jump back and forth as we look at a sentence. These jumps are called saccades. The focus point (fixation) we usually see is seven to nine letters. The saccades are happening between these chunks and during a saccade we can’t distinctly see at all.

We also use our peripheral vision to anticipate what’s coming next. Speech writers use certain techniques considering this and cutting the reading time. The study of saccades led to the idea that within a fixation our eyes detect the words shapes and identify them with certain words. This shape or outline is called Bouma. Later it was proven wrong, making an argument that it’s the typeface that affects word recognition. In the words of Kevin Larson:

“Word shape is no longer a viable model of word recognition. The bulk of scientific evidence says that we recognize a word’s component letters, then use that visual information to recognize a word.”

So if words are not read by their shape, then uppercase texts should be read at exactly the same fashion as mixed-case texts? The answer is yes. But then why no novel has ever been written in uppercase?

Mixed-case words consist of ascending and descending patterns with neutral matter, called x-hight. With long texts where saccades and fixation points are challenged by the density of words above and below the line you are on, it is necessary to aid legibility by providing some “hooks” to decipher meaning.

All caps, or uppercase typefaces are traditionally not used for single-word titles, signs, logos, abbreviations, etc. Wherever they are not surrounded by their peers.

In terms of UI, uppercase text should be left for high level menu items, titles, buttons, some CTAs, and specific parts you want to put additional emphasis on.

We use uppercase typing in specific sections to emphasize their significance

What is word recognition?

Western writing is based upon alphabetical system meaning that basic written symbols or graphemes forming words. Unlike logographic and hieroglyphic systems like Mayan script, where glyphs represent syllables or even whole words, alphabetical systems use phonetic symbols for basic significant sounds composing syllables morphemes, and ultimately, words.

A 2009 research published by Psychology Press has performed a priori feature analysis of temporal recognition of letters depending on their critical characteristics like intersections, terminations, verticals, horizontals, and other features that contribute to letter recognition.

The order of letters comprised of different features affects legibility according to the focus areas (red). The smaller are the saccade gaps between these features, the faster and smoother the word reads.

The analysis results brought out the most important letter features in terms of identification and legibility.

Understanding the mechanism of letter recognition and reading is not only helpful and should be taken into account when creating content, but should also play an important part in typeface selection in user interfaces.

How to choose a perfect UI typeface?

UI is a task-driven element which means it’s parts have to perform a certain action. Textual information remains the most informative and direct means of communication. Taking into account all the science behind reading that we described above, it makes perfect sense that UI elements presented in form of text have to be concise and comprehensive with an obvious visual appeal.

Here are some tips for creating a good UI typeface reading experience:

Recognition. The essence of legibility is clarity and immediate recognition of symbols. UI elements must leave no doubt in distinguishing the meaning behind letters. A classic example is the sans-serif display of uppercase i and lowercase L (including this very font):

The left example in Helvetica leaves almost no difference in the shape of first three letters, while Amble on the right has solved this issue by adding horizontals to the I. Only a few fonts have been specifically developed for UI usage so it’s recommended that test content should be run before the typeface is settled.

Humbleness. Headers and titles do have the function to attract attention, however, it’s important that a fabulous font does not compromise legibility. A good header creates a subtle impression and mood while transferring the information. In one of our previous posts we’ve talked about custom typography trends.

Adaptivity. They say the lesser fonts used the better. A good typeface is universal enough to cover all the requirements and contexts due to their adaptivity. Fancy fonts might suffer on small screen sizes, with compromised loading speed, and weird browsers. So using flexible typefaces that maintain legibility and are distinct is a way to avoid abandonment.

Adaptivity includes the following features:

• Good x-height. X-height is the size of a lowercase letter x. It’s better to use a bigger x-height because it makes letters more distinct in smaller resolutions. However, keep in mind the ascenders and descenders that have to maintain their features.

• Expansion. Tall typefaces are good for titles and headers, however, in text blocks it’s better to use expanded font over condensed ones for the same legibility reasons.

• Even spacing. Spacing inside the word is as important as between words and lines. A steady flow of symbols contributes to reading rhythm and increases its speed.

• Apertures. Openings and spaces between terminations in letters are called apertures. As it was mentioned in the research above, terminations play the most important part in letter recognition, so the more prominent are the apertures – the more distinguishable the letters become. Thus, increasing legibility in extreme contexts. Compare the aperture ratio for Helvetica and Bell:

• Stroke diversity. The more contrast is between hairline (thin) and stem (thick) strokes of a letter the less legible it becomes in smaller size. This is an extreme example of contrast in Bodoni font:

All the technical knowledge and features of different typefaces must be taken with a grain of salt. The context in which textual information is presented must remain the number one priority factor.
General guidelines and rules of reading and typesetting are there to help UI/UX designers get a hold of scientific principles, put some math behind what is widely believed to be a truly emotional and creative process.