To see the visualization, click here.
Backstory
When I was in design school, I was surprised to see how much time students would spend choosing a font for their project. I had always assumed that with enough knowledge about typography, picking a font would be as simple as looking up the right one: do I need playful or serious? modern or old school? etc. And to a certain extent, some rules exist to guide designers through this process : you should not combine two fonts that are too similar ; use serifs and sans serifs ; create contrast , …
But picking a font involves a lot of trial and error, and it gets even more complicated when you need to match two or more fonts in the same medium. One technique is to mock up several designs, and let them soak in until only a few of them stand out. It is also very helpful to look for inspiration in other people’s work, which can guide you towards creating something good without necessarily knowing the keys to success.
The power of learning from good examples rather than following rigid rules can be illustrated by an example in another field : online dictionaries. As a natural-born French speaker, I relied on WordReference for a long time when I had some translation to do, because it had the most comprehensive list of definitions for a given word. However, I was often confronted with the problem of not finding a word that felt authentic in the context of my sentence. I searched for other options and found Linguee, a dictionary that mines bilingual websites to find professional translations of words and expressions. It also displays excerpts side by side and ranks them, letting the user vote for quality. This was invaluable because I realized that some of the more authentic translations did not include any equivalent of the word I was trying to translate. English, like many languages, is deeply embedded with idioms. So much nuance is lost by just focusing on literal translation.
Similar limitations appear in design principles: pairing a serif with a sans-serif and following all the other rules will not necessarily lead to visual harmony. The only rule that you can trust is that rules are made to be broken.
Plan of action
My intuition was that capturing font usage on the web (like Linguee does with words) should be informative about the type of combinations that complement and enhance one another. I figured it would be achievable because for every font that appears on a website, the information about which one it is has to be somewhere so that your browser can render it. Even though web fonts are not representative of all fonts, it seemed like a good place to start. Besides, I knew I could whip up some code and quickly collect data from thousands of sources.
Potentially, I could even screen the code to find color, size, position, all the ingredients that make font pairings successful. Indeed, two fonts can look good in one design and not so good in another design, it is very dependent on the context of the use and how they are contrasted with one another. This is why a lot of typography websites include examples of how to use the fonts they are offering, because it guides the impression the font makes on you.
Reality check
My first working assumption was that the internet represents a huge sandbox where people try out different combinations, make errors or succeed in creating harmonious pairings, and hopefully save only the best ones for future generations of designs.
Unfortunately, the internet does not work that way. I soon realized that the source code of most sites is just as messy as the grammar and content of what the masses are saying online. [1] Same goes for the fonts they use; just because two fonts are used a lot together doesn’t mean that these combinations would turn out to be good combinations from a designer’s perspective. Not too surprising in the land of Impact-covered memes and Comic Sans.
So, to simplify the problem a little, I refocused. Instead of asking “Why does a combo work well?”, trying to automate the designer’s job of developing intuition about what makes a good design, I decided to focus on understanding “What do people do?” to be able to gain experience simply by observing at a macro-level and following trends. And in particular, “What do people who know what they’re doing do? I quickly realized that I did not care about the most common combinations out there, but rather the most frequent combinations that a talented designer is likely to make.
Paydirt
In my case, it seemed like a natural compromise to favor quality over quantities of data. I was lucky to come across fontsinuse.com, an awesome website that contains human-curated font combinations.
A community of passionate designers had already done all the hard work for me! Since 2012, they have been gathering a collection of “uses” that already contains enough data to start observing patterns.
Each “use” contains a list of the fonts used, and a picture of the medium which could be a website but also could be a physical object such as a book or a poster. Another advantage of Fonts In Use is that the webpages are very structured: the information about a font is always displayed with the same template, which makes it very simple to grab the various descriptors available (name, foundries, designers, etc.).
By no means this is a comprehensive dataset, nor is it perfect in terms of bias, but analyzing this material would be like summarizing the knowledge of more than 250 contributors.
Once I was convinced by the potential of this dataset, I started to look for ways of representing the information I could gather from it.
Best intentions
I wanted the visualization to be informative for anyone interested in typography. For example, designers could use it to confirm the intuitions they have about particular fonts.
Another important component of the project was that I wanted to flex some design-school muscles and create something aesthetically pleasing. A common advice when doing dataviz is to find the simplest representation. To me it was important not to hide the complexity but highlight it; not only did I want to see the related fonts for one font in particular, but I wanted to see all of them at the same time. The goal was to find a user friendly way of creating a map and exploring this virtual territory.
Also, it seemed a shame to study fonts without showing what they look like: that’s what they are for! They are designed to be looked at. It made a lot of sense to show each label in its actual font, since the meaning of a connection is contained in the appearance of the typefaces.
Nitty gritty Once I had the general picture of my viz in mind, the final challenge was to figure out all the details. If a node in the network is a font, its size should be its importance : the total number of uses.
How do you define the links ? One measure of the strength of connections could have been the absolute number of times those fonts were used together. However, certain fonts are used much more often than others, say Futura, so all its links would tend to be stronger than the rarer fonts.
Instead, I divided the absolute value by the size of the font, in other words the number of times font A is used with font B over the number of times A or B was used. [2]
In my original dataset, there were 3076 fonts and 4793 links in the dataset, precisely. This was a lot to display, all in one page. Some of the fonts had no links at all, but I did not want to discard them as they pointed out that some fonts are mainly used alone. I also wanted to keep all the links, but was rapidly confronted to a gigantic hairball.
I personally find that complex things can be fascinating, when they are not overwhelming. As you can see with the picture above, I was starting to lose track of the “Keep it simple” principle of dataviz.
To position the nodes, I used a “force-directed graph” which relies upon a physical simulation. The fonts are charges that repel each other and the links are like springs pulling the nodes closer. With so many links and nodes, the simulation wasn’t doing a good job because of all the constraints applied to the model. Cleaning up the links would be beneficial both in terms of visualization, and in terms of computation.
For the graph to make sense intuitively, the width of the links should directly depend on the formula for the strength. Finding the correct order of magnitude for strengths, stroke widths and the relationships between the two involved a lot of tweaking and was probably the most time-consuming part of the project.
If the values are too high, the graph will collapse on itself, but on the contrary if they’re too weak you get a display that looks like a big sphere (which is how the positions are initialized) because the forces are negligible.
To help me adjust the many parameters of the force graph, I used dat.gui’s control panel on top of the visualization. With computer generated displays, it is very simple to generate infinite variations of the same design, and browse continuously through all of them. Most of the controls were discarded from the final viz, but they were extremely helpful in finding a harmonious balance during the generation process.
Last but not least, I got rid of the fonts that were used less than 5 times, and I added a filtering threshold, below which the links get removed from the model and faded out in the viz.
Connecting the dots
Data analysis and design may seem to have very few bridges between them, but as the importance of data in businesses grows and designers become curious of this new medium, we should start to think about how data can be used to assist designers in their work.
By the time I finished this project, I had stumbled across several tools that help with font matching. Fontpair focuses on Google fonts, with header and body fonts classified by Serif/Sans- Serif/Cursive types. Canva’s font combinations tool gives you 1-3 suggestions when you enter a starter font. While those sites can be very handy to start off with, I believe more experienced designers would find these suggestions limiting, because they don’t take into account how creatives work. Of course, it is very important for them to know what generally works and what doesn’t, and not to reinvent the wheel each time they do a new project. But when you are creating a brand identity or working on a very personal project, you will probably avoid picking font combinations you know perfectly well other people are likely to make. Indeed, how do you express your uniqueness and know-how if you are just following the advice of someone else, or worse, an algorithm?
On the other end of the spectrum, the experience of looking at fonts on Google Fonts or other font catalogs online is a bit like translating with WordReference. You have a great range of choice, but with little context to help you decide. [3] Fonts In Use, however, is more like the Linguee of type, since it populates a rich semantic and visual context for each use case. It provides you with what a community of experts has done in the past, and going through the tropes and inventiveness of their work is one of the best ways to learn about new combinations and possibilities.
This is why I opted for a 2D exploratory visualization that can be used in complement of the tools mentioned above. To support how designers already think, randomness and serendipity have their place. With all the labels floating around in space, you can see more of them simultaneously and are more likely to draw new connections between fonts that are close but not yet related.
It is unlikely that designers will be replaced by computers soon, as creativity is often considered to be what truly differentiates humans from machines. But that doesn’t mean there aren’t opportunities to use data to make better designs. In his blog post “Taking The Robots To Design School, Part 1”, Jon Gold expresses his fascination with “how much better designers could be if we are augmented by smart algorithms rather than replaced by them.” He envisions at least two other ways of using data to understand how typography works, thus paving the way towards AI-assisted design. Being a designer himself, Jon Gold’s purpose is far from fully automating the creative process.
Following some of his ideas, I would like to expand my network with more descriptors and add a layer of meaning, for example to see how foundries are related. It would be interesting to verify quantitatively how typographic rules are applied in real life, and perhaps find new ones based on the visual properties of a font. The formulas in the graph could be redefined to highlight specific points: the top 3 matches for each font, the unexpected combos, the loner fonts, etc.
But for now, I hope my visualization will let you rediscover the myriad of fonts and their possible combinations, and that you will have new perspectives next time you open up your favorite text editor or design tool.
