Adding a Semantic Touch to Your Data Visualization
Design beyond your visualization; consider holistically all the elements around it
By Matteo Moretti, designer and co-founder of Sheldon.studio
I don’t know how many of you are familiar with the Semantic Typography concept. It sounds abstract, and for a certain degree it is, but when we look at it, well, things become clearer. It happens when we overlap the visual and verbal communication, creating a sort of recursive image in which words behave in the same way as the meaning they drive (see above). Words that visualize meanings 🤔.
As often happens, it is quite difficult to trace a precise origin, especially since I’m not a historian, just a designer, and this article does not pretend to trace it, but it would probably be around the early 20th century, with the first visual poetry typographic-experimentations, such as the Apollinaire’s Calligrammes.
It is a formal shift, a game-changing approach that breaks the dictatorship of the typographic grid and returns a more immersive narrative environment where the meaning-effects are reinforced by the way the words look and behave. Another early great example is represented by the first Winnie the Pooh 1926 edition. Published by Methuen & Co, it features pages that rely on a semantic approach, such as page 5, where the paragraph resembles a tree that the protagonist had to climb. Lovely ❤️.
While it started as experimentation, the semantic use of typography has been progressively adopted by designers such as Herb Lubalin, Robert Brownjohn and others in their mainstream projects, and even by Saul Bass for the opening titles of Hitchcock’s Psycho, in which the protagonist split personality is symbolized through a series of splits which affects the typography and the backgrounds.
If you search on the Internet for “semantic typography” an ocean of contemporary, and often very formal/dry images, videos or posters will overwhelm you. It’s a nice game to play, which I also rely on with my students, during the first motion graphic lessons I teach. In fact, it is a good challenge to learn and reflect on how basic transformations to even a single letter may suggest a series of different meaning-effects, which could support your project if consciously handled.
When the European Data Journalism Network asked Sheldon.studio to collaborate on a data journalism project about train reachability in Europe, my mind started blowing 🤪: Trains! Lines! Paths! Distances! The epic Brownjohn’s video above! The Vignelli subway map! The Neurath’s serpentine timeline! After a few seconds, I started sketching, very quick ’n’ dirty drafts, more conceptual than anything else, jumping between semantic typography experiments to express the idea of the journey, the connection between two points, and an idea for a simple visualization that would express the same concept, in addition to the data. I soon realized I was reasoning on the data visualization from a semantic point of view 😯. The path then became clearer: how to semantically connect fonts, design, and data visualization to the idea of travel, distance and train transportation?
Yes, the E letter was the key, no doubt: the element to connect typography and visualizations… and I remember a font that combined stretched letter 🤔.
The research took me some hours, but finally, I found it again 👉 BW Stretch, a typeface which features specific alternative stretched glyphs.
As soon as I enabled the complete alternative font set, it resulted in a very long and hard-to-read text: it’s a font made for headline and not for body text, and it’s quite extreme! After several tests, we realized that only one stretched E character per row was enough to preserve the semantic touch, and keep the whole text readable.
In parallel, we moved to the design of a serpentine-like histogram that would combine the uppercase E, the Neurath’s serpentine timeline, and would allow the comparison of the lines as in a histogram. While the vector sketch was quite simple to realize, we immediately understood a data visualization problem while implementing the interactive visualization in d3.js. Daniel, the clever-guy at Sheldon.studio, pointed out a small detail: “Eh, look: the inner lines are shorter than outer ones”, me:“🙀”. He’s clever, so he normalized the paths according to their radius, and now the chart results in a series of parallel rail tracks in which trains race together (in the desktop version). On smartphones, the chart is more similar to the histogram in the sketch above, due to CPU load and screen size issues.
Finally, we added some red horizontal lines to separate the different journeys, and we couldn’t resist turning simple lines into animated trains that cross your screen as soon as you scroll to them. They are just separators, nothing special, but with those semantic touches that recall one more time the same meaning toward a more systemic look. Metaphorically speaking, diverse elements behave like the different organs in the human body: fonts, graphic elements, and visualizations are similar to the brain, the teeth, and the heart, part of a unique system which needs all of them to function properly.
To conclude, it is not mandatory to think and design semantically, and sometimes is not really possible, or if it is, then it could result in a bad design. It’s a matter of awareness, as always. But, what is important for me, and what I would communicate with this article, is to think beyond the visualizations and have a holistic look: having constantly in mind that all the elements in your project have a role and a function, even the smaller ones. They need to be carefully designed as parts of a bigger system which aim to tell your story to a broader audience. The more the system is designed in every detail, more the story will work as an organism, immersing your audience.
The project features two more data visualizations that focus on different facets of the same story, which are more conventional and less semantically connected.
Here you can experience the project in full:
https://datavis.europeandatajournalism.eu/obct/Sheldon/
