UX/UI Designer
TypefaceExplorer_Banner.jpg

Typeface Explorer

An Interactive Data Viz of the 100 Best Typefaces

Summary
An interactive data visualization that helps you choose the typeface you need from the classic 100 list, and learn their background at ease.

Time
01/2016 - 03/2017

Duration 
7 Weeks

Team
Wei-Hung Hsieh,
Shirley Lei

My Responsibilities
Software Development (Beginner), Interaction Design, Research

Tools 
Processing (A programming language based on Java, specializing in digital art creation), Sketch

 

Process

 

HOW IT WORKS

TypefaceExplorer_Feature_1.gif

Data Visiualization with Color-coded Filter

Navigate the 100 best typefaces with interactive filters and see their distribution in the past 100 years. Need a classic Serif typeface with Geometric shapes? Just click and there you go.

TypefaceExplorer_Feature_2.gif

Fast Navigation

Taking advantage of your iconic memory, Typeface Explorer makes it easier to quickly browse and compare typefaces. Hover over dots on the data viz to compare typefaces and see details.

TypefaceExplorer_Feature_3.gif

Customizable Comparison

Use fast navigation to find the typefaces that you need, and compare them in detail with you own texts. Type in whatever you want to see, and choose two typefaces to compare side by side.

 
 

1. RESEARCH

 
 

Problem Statement
How might we help designers find the typeface they need more efficiently?

 
 
TypefaceExplorer_Dropdown.jpg

Background

Typography is one of the most important element in visual design. It also plays a critical role in UX/UI/interaction design, because types convey messages alongside graphic elements, which provides not only information but also affordances.

Despite its importance, most modern productivity and design tools still use traditional ways to navigate typefaces, such as drop-down menu in alphabetical order. It's difficult to quickly have an overview of all the typefaces available, to choose typeface by its characteristics, and even harder to compare similar typefaces.

 
 
 
TypefaceExplorer_current_1.png

Problem 1
Hard to navigate and search with the drop-down menu

Current mechanisms for typeface selection don't take the characteristics of each font into consideration. For example, there's no way to filter Script style ones out, or search for typefaces by their level of condensation. All we've got is an alphabetically ordered list.

 
TypefaceExplorer_current_2.png

Problem 2
Comparison between typefaces is cumbersome

With a long alphabetically ordered typeface list, users have to scroll back and forth, and use their short visual memory to compare one typeface with another, or change the typefaces in the document multiple times to do detailed comparison.

 
TypefaceExplorer_current_3.png

Problem 3
Unable to preview typeface real time

It's easier to select typeface by seeing it in action, with the text that we're editing. However, users have to highlight the actual text, then click on each typeface to see how they actually look like, and repeat the process to see other typefaces.

 
 
 
 Many visual designers have a handbook that puts typefaces side by side.

Many visual designers have a handbook that puts typefaces side by side.

How do people compare typefaces visually?

According to our secondary research, common ways to do visual comparison are: [1]

  1. Placing objects side by side
  2. Overlaying objects
  3. Alternating images
  4. Presenting each image to a separate eye (Parallax)

Obviously, current mechanism for typeface selection doesn't facilitate these comparison methods effectively. Some might argue that it's still possible to do side-by-side comparison with drop-down menu, but as human iconic memory only lasts for less than 1000 millisecond [2], it's cumbersome for us to remember the shape of a typeface and compare it to another one in a long drop-down list.

 
TypefaceExplorer_comparison_1.png

1. Side by side

Common ways for visual comparison, but requires longer eye movement and iconic memory.

TypefaceExplorer_comparison_2.png

2. Overlay

While it's easier for comparing shape in detail, overlaying complex shapes might be confusing.

TypefaceExplorer_comparison_3.gif

3. Alternate

By alternating the display of different typefaces, the differences will "blink." It also requires iconic memory.

TypefaceExplorer_comparison_4.png

4. Parallax

For people with better control over the parallax of eyeballs, cross-eyed superimposition is possible.

 
 
 
 Me with Akira Kobayashi, after his typeface seminar in Taipei. He was mentored by two of the most well-known typeface designers in the world, Hermann Zapf and Adrian Frutiger. 

Me with Akira Kobayashi, after his typeface seminar in Taipei. He was mentored by two of the most well-known typeface designers in the world, Hermann Zapf and Adrian Frutiger. 

How to choose the the right typeface?

Akira Kobayashi, the current Type Director at Monotype, said that there is no rule of thumb for choosing typeface. The best way is to choose the typeface by eye [3]

Akira's mentor, Hermann Zapf, also mentioned that understanding the historical background, structure, and form of Latin characters, would be very helpful for training the eyes of a type designer [3]. Akira also suggested that birth date, origin, and the atmosphere a typeface creates are the elements that designers need to consider when choosing typefaces [3]. These inspired us to incorporate the following elements in Typeface Explorer:

  1. Historical background: Birth date, designer, and foundry
  2. Structure and form: Typeface itself, categories and classifications
  3. Training the eyes of designer: Facilitating visual comparison

 

 
 

2. IDEATION

 
 

Data Collection

To incorporate these elements for choosing the right typeface in our data visualization, we started looking for the right dataset. In order to limit the numbers of typeface within an optimal size, we used a list of the most popular webfonts as the basis, and incorporated basic information from other resources like Wikipedia and type foundry websites. Variables included:

  1. Popularity: Bonfx's most popular web fonts list across Alexa's top 10k sites, with year by year rankings and usage percentage 
  2. Typeface Name
  3. Birth Year
  4. Typeface File (Most of these webfonts are available for free.)

 

We created low-fidelity sketches to illustrate 3 initial ideas we had from our internal ideation, and pinned them up for in-class critique with 21 designers from UW School of Art.

 
 

Dynamic Web Browser

Input the URL. Browse the web. Use the time control bar to see how this website would look like in the past with the most popular typeface that year. It is a fun way to see how popularity of typefaces changes over time.

Typeface Magnifier

Input some text. Choose a year. Use the cursor as a magnifier to read your text in the most popular font of that year. Similar to the first idea, this visualization takes advantage of side-by-side comparison instead of image alteration in the first one.

2-Axis Visualization

It’s a canvas with texts in the same typeface and style. However as you move the cursor, the font in a certain radius changes, according to the location. X-axis is time, Y-axis is popularity of the year.

 
 

Feedback

  1. Although background and historical information seemed fun and educational to our participants, the actual design of typeface was much more important to them. It was suggested that we put more emphasis on the form and structure.
  2. Most designers just want to know "which typeface is the best?" They asked for a simple way to know the best typeface that other designers used, instead ones used by general public.
  3. Data of webfont was very limited and biased, and could be quite different from printed media or interface design. It was suggested we look into broader usage of typeface.
 
 

According to the feedback, we decided to add more variables about the structure and form, such as typeface category (serif, sans-serif, or script...).  We also abandoned the idea to compare typefaces within a long body text, because it was hard to see the details of each character. Lastly, we needed a better list of classic typefaces, so we switched to The 100 Best Typefaces of All Time.

 
TypefaceExplorer_List.jpg

Is that 100 Best Typeface list legit?

The 100 Best Typefaces of All Time list we use here is by no means the perfect and comprehensive list of all the typefaces that worth using. We struggled for a while to find the authoritative list for this interactive data visualization. Webfont usage was the initial data source we considered, but it was abandoned because webfont usage is heavily influenced by typeface availability and license. Free typefaces would usually have higher usage, which doesn't reflect the actual quality of them.

Therefore, we decided to turn to experts. The 100 Best Typefaces of All Time list was curated by an independent jury of international experts in the field of typeface, and was published by Monotype, one of the biggest type foundry in the world. Again, it's not a perfect list, but it covers most of the notable classics that could give us a brief idea of great typefaces available.

 
 

3. PROTOTYPE

 

Wireframe

In this wireframe, we defined 4 features that we'd like to incorporate in Typeface Explorer.

  1. A color-coded data visualization that illustrated the historical distribution of the birth dates of all the typefaces, which also worked as selectable buttons for feature 2.
  2. User could select up to 2 typefaces by clicking the dots. Example texts (The quick brown fox...) and detailed information about these typefaces would be shown side-by-side.
  3. Text input area on the bottom right corner allowed users to type in whatever they wanted to replace the example texts.
  4. Category/Classification filter that could highlight specific type of typefaces on the data visualization.
 
TypefaceExplorer_Code.jpg

Programming and Data

This was our very first attempt to write codes. Due to the graphic nature of typeface, we used Processing language because it was designed for digital visual arts, and was easy for beginners to learn. Here are the challenges we had during the process.

  1. Due to the limitations of Processing language, we had to incorporate 3rd party libraries and codes to realized functions like custom text input and typeface selection. When there was issues, often times we couldn't find a way to solve it because of unfamiliarity with the 3rd party codes.
  2. Besides the typeface list, typeface itself (digital typeface file) was another key data we needed. By subscribing to Monotype Library, we had access to about 80 percent of the typefaces on the list (including some fonts that were free or came with our laptop OS). However, there were still some missing. The final visualization contained less than 100 typefaces.
  3. We used Regular/Book/Roman font weight for all the typefaces displayed, which means there was no way for users to test other font weights or styles like italic.
 
 

4. EVALUATION

 

10 designers from UW School of Art were asked to try out our interactive prototype.

Prompt
Use this tool to find the typeface you need for a body of text.

 
 

We changed the design to only one sample text section for easier comparison with iconic memory.

Negative Feedback on Side-by-side Comparison

Feedback was not in favor of the side-by-side layout. The length of example text made it difficult to move their attention back and forth. When our participants were choosing typefaces, most of them would change their text to different fonts one by one, in order to visually test which one was better. This inspired us to keep only one section of sample text. In the next design, we took advantage of iconic memory and persistence of vision to quickly compare the form/shape of different typefaces.

I often quickly glance through the font list, find the ones I like, and change my text to these fonts back and forth.
 

Issues with Custom Text Input

Because of our limited programming skills, we couldn't make the dots selectable, nor could we realized the function to alter the example text with text input boxes. As a workaround, we added menu selector for typeface selection, and displayed the custom texts separately to test if this kind of comparison was desired.

This function was appraised by participants because it fitted their existing behavior, but it was suggested that we move the displayed texts closer to the control panel. Although we would like to keep all the control interface on bottom half for consistency, placing the displayed texts away from it seemed irrelevant and caused more unnecessary eye movements. 

 
 

5. FINAL

 

Final Iteration

According to the feedback from evaluation, we made the following changes to our final iteration.

  1. Control panel and text display for custom text comparison feature are in the same area.
  2. Detailed information window now moves with the cursor. 

We did these changes because it was informed by our secondary research and usability tests that eye movement was critical to visual comparison. To make it easier for users to identify relevance, similarity and difference, we had to put objects closer to minimize eye movement.

 
Overlaying them at the same location makes it easier to navigate and compare.
It’s a lot faster than the typeface selector in other applications.
 
 
 

Future Direction 1
Explore more ways to facilitate comparison

Among all the visual comparison methods, we chose only to incorporate side-by-side and alternate comparison in our tool, while overlay might also be a good way to see the differences between typefaces. Motion could also possibly be incorporated to show the difference between typefaces, such as morphing one glyph into another.

 
TypefaceExplorer_Final_2.png

Future Direction 2
Integration with other applications

As a means to quickly browse typefaces, Typeface Explorer was praised by our participants. While drop-down menu has always been a default way to do it, some elements in Typeface Explorer like comparing typefaces by alternating them at the same place, would certainly be a more effective way for users to find the typeface they need. For example, the ability to alternate typefaces of body text real time in a word processor. On the other hand, it would also be better if users could import other typefaces they had to Typeface Explorer.

 

Future Direction 3
Improve the codes

Even with some limitations, we successfully built a working interactive prototype of Typeface Explorer. However, with next goal to improve the interactions in mind, we could hand the programming part to more experienced programmers, to further improve the software from back-end for more advanced functions like typeface importing and application integration.

 
 
 

ADDITIONAL INFORMATION

TypefaceExplorer_Team.jpg

Team

Shirley, thank you so much for supporting my enthusiasm about typography and helping me out in our first programming attempt!

Shirley Lei (Left): Text Input Module, Typeface Selection Module

Wei-Hung Hsieh (Right): Data Visualization, Filter, Sketch

Instructors

Tad Hirsch, Associate Professor, School of Art + Art History + Design, University of Washington

Winter 2016 Information Visualization For Interaction Designers Course Project

Reference

[1] Wikipedia. 2017. Visual Comparison. Retrieved from https://en.wikipedia.org/wiki/Visual_comparison.
[2] Wikipedia. 2017. Iconic Memory. Retrieved from https://en.wikipedia.org/wiki/Iconic_memory.
[3] Akira Kobayashi. 2015. Western Fonts 1: Basic Knowledge and Application. Faces Publications, Taipei, Taiwan.
[4] Color palette inspiration: Wikimedia Commons/GearedBull.