An interactive data visualization that helps you choose the typeface you need from the classic 100 list, and learn their background at ease.
01/2016 - 03/2017
Software Development (Beginner), Interaction Design, Research
Processing (A programming language based on Java, specializing in digital art creation), Sketch
HOW IT WORKS
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.
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.
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.
How might we help designers find the typeface they need more efficiently?
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.
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.
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.
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.
How do people compare typefaces visually?
According to our secondary research, common ways to do visual comparison are: 
- Placing objects side by side
- Overlaying objects
- Alternating images
- 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 , it's cumbersome for us to remember the shape of a typeface and compare it to another one in a long drop-down list.
1. Side by side
Common ways for visual comparison, but requires longer eye movement and iconic memory.
While it's easier for comparing shape in detail, overlaying complex shapes might be confusing.
By alternating the display of different typefaces, the differences will "blink." It also requires iconic memory.
For people with better control over the parallax of eyeballs, cross-eyed superimposition is possible.
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 .
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 . Akira also suggested that birth date, origin, and the atmosphere a typeface creates are the elements that designers need to consider when choosing typefaces . These inspired us to incorporate the following elements in Typeface Explorer:
- Historical background: Birth date, designer, and foundry
- Structure and form: Typeface itself, categories and classifications
- Training the eyes of designer: Facilitating visual comparison
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:
- Popularity: Bonfx's most popular web fonts list across Alexa's top 10k sites, with year by year rankings and usage percentage
- Typeface Name
- Birth Year
- 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.
- 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.
- 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.
- 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.
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.
In this wireframe, we defined 4 features that we'd like to incorporate in Typeface Explorer.
- 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.
- 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.
- Text input area on the bottom right corner allowed users to type in whatever they wanted to replace the example texts.
- Category/Classification filter that could highlight specific type of typefaces on the data visualization.
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.
- 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.
- 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.
- 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.
10 designers from UW School of Art were asked to try out our interactive prototype.
Use this tool to find the typeface you need for a body of text.
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.
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.
According to the feedback from evaluation, we made the following changes to our final iteration.
- Control panel and text display for custom text comparison feature are in the same area.
- 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.
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.
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.
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
Tad Hirsch, Associate Professor, School of Art + Art History + Design, University of Washington
Winter 2016 Information Visualization For Interaction Designers Course Project
 Wikipedia. 2017. Visual Comparison. Retrieved from https://en.wikipedia.org/wiki/Visual_comparison.
 Wikipedia. 2017. Iconic Memory. Retrieved from https://en.wikipedia.org/wiki/Iconic_memory.
 Akira Kobayashi. 2015. Western Fonts 1: Basic Knowledge and Application. Faces Publications, Taipei, Taiwan.
 Color palette inspiration: Wikimedia Commons/GearedBull.