Soccer team in a huddle

Typeface and Typography: Why Do They Matter?

Feature Article | February 9, 2018 by Jeong-Sook Lee

More and more companies create their own typefaces for their products and services. Not only the logotype, but an entire typeface – a font family. Even though many free fonts have become available in past years, the trend towards brand typefaces continues.

Apple San Francisco, Salesforce Sans, Nokia Pure, Samsung One, AudiType, GE Inspira, Deutsche Bahn, IBM Plex, and many others are examples of custom corporate typefaces. But why? Isn’t a typeface overrated, luxurious decoration that only a few graphic designers appreciate or even recognize? Do average people actually see how the typeface contributes to a better user experience?

At a certain but important level, yes! A good typeface performs unnoticed in the background, subtly letting the readers’ eyes glide over the text effortlessly. Our brains pause only when there is friction. If you have to knit your eyebrows and puzzle over what you are reading, it is evident that the typeface is not performing well.

Try to read aloud the following sentences. How fast can you read these words?

If you have to think twice to identify the letters, the typeface is slowing down your reading. Typefaces are responsible for legibility, helping you read the text clearly and quickly. If you can stay focused on the text without distraction, you are already benefiting from the typeface.

Now, let’s assume that the legibility is taken care of. Can you imagine yourself transferring large sums of money on a banking website that uses Comic Sans? Would you take a tech company seriously that uses a 16th century handwriting typeface? It’s highly unlikely that you would pick a restaurant with a McDonalds font for your romantic dinner, right? People have certain expectations for services, products and brands. A typeface represents the brand’s personality and makes a connection to the user’s emotions. Of course, personality should be subtle. You‘ve probably been in situations where someone’s voice was too loud, makeup too colorful, cologne too strong, or clothing too formal, and this ended up being distracting and overwhelming rather than appealing. If the personality of a typeface manifests itself stronger than the actual message, readers won’t be able to focus on the content. Subtlety is the key.

However, choosing a typeface with great legibility and the right personality is not all there is. A great reading experience needs good typography. Does the text overwhelm you even before you start reading? Your reading doesn’t flow but instead constantly runs into the lines above and below? Then you definitely need better typography! Good typography guides your eye through the text, creating a rhythm and flow of reading and pausing. It motivates you to read and serves the content in visually digestible pieces, in that order of importance. A highly legible, beautiful typeface alone cannot provide a great reading experience if the vertical spacing between the text lines is not right, if text sizes are improper, or if there is not enough white space. That’s what typography takes care of. Think of typography as the recipe, whereas the typeface is the list of ingredients. Which style or weight (light, regular, bold, italic, condensed, etc.) and size should we use for the title, subtitle, main text and other additional information? How much space do we need to allow between characters, lines? How many columns does the content need and how long should a paragraph be? Good typography helps users read text quickly and understand the content easily with the right flow.

A good typeface is a prerequisite for good typography, and a good typeface can only shine in combination with good typography. Ultimately though, typeface and typography make up the vehicle that delivers the message. A meaningful text with the right choice of words and tone of voice is essential for a good reading experience. In the context of the user interface (UI), the text functions as part of the UI. Be it a call to action, warning, description, or whatever, the text lets you know what to look at and what to do. The clearer the text, the less visual treatment we need. Less visual treatment means a lower cognitive load for readers.

There is no room for a poor typeface or bad typography in good UI design. And a good typeface is the starting point.

Typeface vs font: “Typeface” and “font” are used interchangeably in our digital age. However, they actually refer to two different things. Typeface is the design of the letters and defines the way they look. Font refers to a collection of various letterforms, sizes and weights. Typeface is the design and font is the file you can store on your hard drive.

What Makes a Good Typeface?

Creating a typeface is the job of type designers. You, as a user, do not have to care about the design details; the important thing is that you have a great reading experience. However, even non-designers face font choices nowadays, and we know why typeface and typography matter. The following might help you choose the right font for your needs.

Legibility is the first thing to look at. What makes a highly legible typeface?

  • San serif types are considered more legible in general, especially for digital media. A typeface with uniformed stems and clear crossbars with consistent thickness is considerably easier to read in small sizes.

  • Wide apex, large counters, and expanded apertures improve character differentiation and recognition at small sizes.
  • Clear letterforms without ambiguity by eliminating similar shapes, for example, between the number “1”, capital “I” and lowercase “l” and between lowercase “a”, “e” and “o” increase legibility. Correct letter spacing – not too tight, but also not too loose – also increases legibility.
  • A taller x-height (to a certain extent, of course) increases legibility, especially for small sizes.

Scalability

Another important criteria, especially for digital typography, is scalability. The legibility should be guaranteed in every user’s context, browser, screen size, connection speed, input method and user’s abilities. A well-crafted typeface that renders crisply in all different sizes and screen resolutions is crucial for a good reading experience.

Variety of Styles and Weights

A font family with a variety of styles and weights (e.g. light, regular, bold, black, italic, condensed, etc.) allows you to build a good typographic system, with an optimal contrast between different types of content, headlines, sub headlines, paragraphs, labels and so forth. However, having too many styles and weights within a layout is not recommended either. On the contrary, too many different styles can weaken the contrast and result in unnecessary cognitive load. Typography is all about creating the right contrast between different kinds of content to achieve the right visual hierarchy.

Personality

It is easy to measure how readable a typeface is, but it is harder to measure how it affects readers’ emotions. Type triggers our imaginations, evokes our emotions, prompts memories. How loud or quiet it looks, heavy or light, fast or slow. Type gives words a personality – modern/traditional, conventional/novel, expensive/cheap, factory-made/ hand-made, classic/neutral, intellectual/light-hearted, somber/cheerful, trustworthy/daring. The list is long. Your font choice indicates how serious you are and who your audience is. It clues the reader into your emotions and intentions before they have started to read. Slight details of shapes can influence the personality and readability drastically.

Language Support

Language coverage is one of the most important requirements of a typeface depending on the number of countries in which your applications need to be available. Beyond the languages the font supports, fallback solutions need to be considered. In case the defined fonts cannot be displayed when an application initially loads, a fallback font is defined in the style sheet. Defining a fallback to a san-serif system font that is readily available on every user’s device is a simple solution to load applications in any language.

What Typeface Satisfies the Above Criteria for SAP?

That’s “72,” SAP’s proprietary typeface that we created for our software products. Find out more about 72, the typeface that won a Red Dot award, on the 72 website.

The above article originally appeared on the SAP User Experience Community, which uses the 72 typeface. See it in action there.

Tags: , ,