FontsInUse Info Viz
An information visualization of how often are fonts used together. Data from https://fontsinuse.com/.

background

For many non-designers and young designers, picking fonts for their projects is a hard task. FontsInUse Visualization looks into the patterns of diversified font usage, with the intention to create an integrated visualization that explores how often fonts are used together over time with additional information of the font contexts to provide design insights.

the final visualization

Our final vis contains a chord diagram, demonstrating how often are certain fonts used together; an interactive timeline that represents use cases overtime; and detailed visualizations of a specific font or a font combination.

Fonts combinations are displayed in a chord diagram that responds to the interactive timeline.

Clicking on an edge to see visualization of a font's tags, topics, formats, and use comparison with similar fonts.

Clicking on a path to see discover more details of a font combo.

design process

data analysis

FontsInUse (https://fontsinuse.com/.) is an independent archive of typography that has fonts data contributed by the public. We started with analyzing the existed data types we obtained from the website. We categorized the data into 2 subsets:

understanding our users

The data we gathered include ~130,000 typographic data, and ~20,000 use case data. To figure out which data variables are valuable for our users and specific tasks, I used surveys and interviews to create a persona.

ideate visualization types

  1    interactive font map

The first idea we had was an interactive font map that shows people the popularity of fonts over time, and by region. This viz will combine the geo and temporal visualization while allowing brushing and linking between them.

  2    chord diagram - how often fonts are used together

We also explored ways of showing popular font combinations by utilizing a chord diagram, with each path representing the frequency of fonts are used together.

completed prototype

Design system

Overview

Single font detail

Font combination

demo video

A 5min demo video of our live website :)

reflection

As my first information visualization project, the biggest takeaways I had were:

  • Analyze and make use of data.
    There were big amount of data that we've acquired, but only by transferring them into meaningful visualizations thorough choosing specific visualization types will make it meaningful.
  • Communicate effectively with engineers.
    By working with three engineers, it's a great lesson for me to collaborate with people outside of design and working together to solve technical constraints.

check out more projects 👇🏻