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.