Maps Typography

Concept

esdata is an experimental typography that visualizes data in maps as the data is written. Imagine writing election data and using a typography that automatically transforms it into a map.

The goal is to experiment with new ways of visualizing data and explore the possibilities of variable fonts, CSS, and JavaScript. The font is built with 4 main concepts:

• Ligatures
• Kerning
• Grid
• Variable Fonts

Ligatures

The font is programmed to detect character sequences and replace them with a single character that can be any shape. This is called a ligature. In this case, a state name is converted into a shape that represents the state.

Kerning

When the typography detects ligatures, the next step is to overlap the glyphs. This is done with negative kerning, which reduces the space between glyphs so they fit together and create the map. It uses kerning instead of tracking because kerning can be set natively in the font.

Grid and Variable Fonts

The font is built with a 45º grid that creates small squares to draw the map. The squares are filled with different sizes to represent different weights.

esdata uses Variable Font technology to enable smooth transitions between any weight from the minimum to the maximum value, without needing to draw every weight manually.