The Problem
Different typefaces everywhere.
At the time of the "Great Typeface Selection Process," the world at Ticketmaster was one of the mismatched typefaces and no central authority over how typefaces were being used throughout the company. The state of mismatched typefaces was because there were several disparate design teams - email, consumer product, and enterprise product - which were all implementing typefaces independent of each other. As you might imagine, that led to the "Great Awakening" where the company decided at long last to bring all members of design around a centralized typeface system.
The Solution
Art and science
As is often the case with quality design, it is a mix of art and science. How does the typeface feel - is it modern, friendly, appealing? Moreover, how does the typeface hold up in the wide variety of contexts where it will appear - how does it handle itself when used with all caps, as a header, and does it have a monospace option for data tables?
These are all great questions to get answered before selecting either a single typeface or a set of typefaces for the entire company.
The Process
Let's get technical
I developed the process by which we would evaluate typefaces, selected typefaces to test, stress-tested the typefaces, and then reported back to design management with my findings. Ultimately, I chose eight typefaces to test. Below, I will take you through the analysis I completed on a typeface that was not selected - Neue Haas Unica - versus the selected typeface - Averta.
Common Characters
This view gives the designer a chance to look at each of the characters to see not only how does the set look together but understand any quirkiness that might distract from the user's ability to read it easily. For example, some of the typefaces I reviewed would add flourishes to "G" or "Q" that would make the font more challenging to read.
Here you can see that Neue Haas Unica's default letter spacing is tighter than Averta's which isn't necessarily bad; however, it may make reading body copy more challenging which I will review in more detail below.
Monospace
A critical aspect of any enterprise application is how the typeface displays numbers in data-intensive places like data tables. Perhaps only typeface nerds worry about this sort of thing, but when your product presents many numbers, this becomes very important. All the typefaces I selected had a monospace option out of the box.
One of our primary goals was to avoid having to adjust font settings on our end. We wanted a typeface that worked well to our liking straight out of the box. The spacing for Neue Haas Unica looks off, especially between the 2 and the 3 for proportional numbers whereas Averta's default letter spacing is pleasant in both proportional and monospacing conditions.
The Sentence Test
Most designers have seen typefaces presented this way on font sites because, of course, you can see how the typeface looks in a sentence with every letter in the alphabet. Here, I evaluated how the typeface performed at the four most likely font weights and carefully reviewed the out of the box letter spacing.
In this case, the Neue typeface is not as roomy as one would hope from a legibility perspective. It's just a little too tight. Of course, adjusting letter-spacing can be done, but we were hoping to avoid having to tweak the default settings. Averta's default letter spacing has a bit more breathing room, which is a reliable indicator will be more pleasant to read.
The "Illiterate" Test
One way to stress test a typeface is to see how it handles the word "Illiterate."
As you can see above, with Neue Hass Unica, it is almost impossible to discern the difference between the capital "I" and the lower case "l" especially when they are next to each. One reason Neue was not selected was due to this lack of clarity. Averta, of course, is not much better but better enough that it did not cause a tremendous amount of concern.
The Ticketmaster Real World Test
Here I tested the typefaces using real output from various samples of Ticketmaster UI's. It was interesting to see how how each typeface handled presenting "zero - 0" versus "the capital letter O" when sitting next to each other in a string with other numbers (which is a very common scenario). The top line in each example above is monospacing and the lower example is proportional.
Overall, hopefully you can see that the out of the box letter spacing for Neue Haas Unica is a bit all over the place and how much endless tweaking we would needed whereas Averta nails the letter spacing under all of these conditions.
The Body Copy Test
Which one is more pleasant to read?
I venture to guess that you would choose Averta. The body copy test was one of the last tests completed on all eight typefaces before we narrowed the selection to just two and ran the typefaces through a variety of actual UI samples from all across the enterprise.
As part of the UI
Here is another typeface, Gilroy, that was also part of the eight typefaces I evaluated along with Averta in a Ticketmaster UI with out of the box settings for letter spacing and a 1.5 line-height ratio for the body copy. There is nothing technical to review as Gilroy performed well in the technical aspects of the evaluation process, but Averta is simply a more pleasant typeface to read in the contexts that Ticketmaster design required.
Brand Site
Learn how to use it
Below is peek inside how the Typography system starts to take shape on the Ticketmaster brand site. The design of the brand site pages was also part of my design responsibilities at Ticketmaster.
Summary
Averta lights up Ticketmaster.
In this case, Averta ticked all of the boxes for Ticketmaster.
- Great out of the box
- Easy to read
- Great monospace feature
- Modern
- Elegant
You can check it out in action on all of Ticketmaster properties including:
