Typography Basics to Avoid UX Problems

One of the most epic battle of wills I ever engaged in with a client was over typography. The client did not want to listen to me because I was hired for research, not for design. Yet, the purpose of a UX specialist is to alert the client to all things that could negatively impact the user experience, and that was my intent. (I also spent years studying spatial vision, so sometimes I latch onto these issues.)

Without revealing too much about the client or the project, the problem was simple: The fonts used in the website design were not the best choice.

One of the things I always recommend to clients is this: Look at your design in its intended medium. If you have a hard time reading the text on it, then so will many others. This particular client, however, assured me that all would be well since the designer said it would be OK to use this font because it was optimized for that specific font size. Looking at it however, the issue to me was very clear: Serif font packed densely into a small on screen area. Broken down at the font level, the component parts of the issue can best be described as:

  1. Inadequate kerning, leading, and measure.
  2. Creation of unnecessary ligatures.

Unless you have a background in typography the terms kerning, leading, measure, and ligature probably mean nothing to you. Not to jump ahead too far in this posting but, kerning, leading, and measure all relate to spacing. Ligature is a result of spacing, and refers to the creation of shapes from letters. Before we begin, I’m assuming everyone reading this post knows the difference between serif font and sans serif font. If not, here it is:

An example comparing serif and sans serif fonts

 

Next, are the concepts of baseline, meanline, and x-height. Baseline is just what it sounds like, the line upon which the main body of a letter rests. Meanline is the line resting on the top of the body of lowercase letters. The meanline usually cuts through an uppercase letter. Finally, x-height is the height of the body (main element) of a letter that equals the distance between the baseline and the meanline. Baseline and meanline give rise to two important pieces of letter anatomy: Descenders and ascenders. Descenders are the portion of a letter extending below the baseline. Ascenders extend above the meanline. Just to be clear, descenders and ascenders DO NOT contribute to a letter’s x-height. Please see the image below for a clarification of these different concepts:

The basic components of letters in a font.

Before we move on, one last point about x-height. As I mentioned earlier, x-height is the distance between the baseline and meanline of letters. It’s this feature that impacts a reader’s perception of the size of a font. For example, look again at the first image in this post showing serif and sans serif fonts. The sentences “This is serif font.” and “This is sans serif.” are both 60pt. font. However, the serif font, Times New Roman, looks smaller than the sans serif font, Lucida Grande. This is because of the difference in x-height. A smaller x-height means a font will look smaller to readers.

Finally, we can understand the first issue mentioned earlier in this post: Inadequate kerning, leading, and measure. The definitions of each term are found below:

  1. Kerning, the adjustment of space between individual letters.
  2. Leading, spacing between lines of type. (Note, it is pronounced ‘ledding’, referring to the use of lead strips to add space between lines in the early days of printing and typesetting.)
  3. Measure, the length of a line of text.

So, based on these definitions, we can now understand a few key concepts…

Kerning, if too small, can lead to overlap between letters, rendering them illegible. Rounded letters (o, c, e) will experience this sooner than straighter letters (i, l). On the other hand, too much spacing can destroy the perception of a word itself, or make the whole copy look ugly. This concept applies to paragraphs of text as well: too much spacing between words can destroy the continuity of the paragraph, making it difficult to understand and less than aesthetically pleasing.

Leading can also make or break the legibility or aesthetic quality of copy in a design. For fonts that tend to have less whitespace around them, such as smaller fonts and fonts with larger x-heights, larger leading is necessary to ensure readability of the text. Leading also interacts with line length, or measure. To sum that relationship up, the longer the line length is, the more you should consider increasing leading to reduce the likelihood of readers doubling over lines.

With measure, a bit more explanation is required. As stated before, measure refers to the length of a line of text. Research has demonstrated that long lines of text force readers to search for the start of new lines of text in paragraphs. Also, longer lines of text with inadequate leading will cause readers to lose their spot and read the same line multiple times. (This plays a bit on short term memory–so much information coming in over an extended period of time will make it hard for the reader to recall what they initially read.) Conversely, shorter lines require a lot of back and forth eye movement on a page that can lead to visual fatigue. That being said, line length is governed by the amount of copy in a design, the size of the font, and perhaps any sort of effects you mean for the text to create in the design.

Now, we can address the second issue: Creation of unnecessary ligatures.

A ligature refers to multiple letters that appear joined together and form a shape. In the past, ligatures were used to aid the readability of certain letter combinations. And certainly, back when printing was a new technology, this helped readers recognize the words on the page. Now that most everything is digital these days, and that there are many different fonts to use, ligatures are not as necessary as they once were.

Examples of ligatures, and what letters look like without ligatures.

Does the image illustrate why ligatures might not be a good thing sometimes? More importantly, can you see how ligatures might be created?

Putting all of the above concepts together, you now have the very basics of typography. I hope that it can help you in future projects recognize good and bad usage of type in designs.

(However, there is one final word I’d like to say on this point. Before criticizing the use of type in a design find out if there is a purpose behind it looking the way it does. As much as many people only think of type as a form of language, it also has the ability to inspire emotion and reinforce the goals of a design. If the design uses cramped and difficult-to-read text, perhaps it is to inspire discomfort in order to reinforce the design.)