Back to projects

A Typeface for Maps

esdata font logoesdata font
An experimental typeface for quick, accessible map visualizations

US elections

Winner: Barack Obama
Loading...

Concept

esdata is an experimental typeface that turns text into maps as you type. Write election data and let the font transform it into a visualization.

The project explores new ways to visualize data using variable fonts, CSS, and JavaScript. The typeface is built around four concepts:

  • Ligatures
  • Kerning
  • Grid
  • Variable Fonts

Ligatures

The font detects sequences of characters and replaces them with a single glyph, known as a ligature. Here, typing a state name produces a glyph in the shape of that state.

Kerning

Negative kerning brings the glyphs together so the state shapes overlap and form a map. Kerning adjusts the spacing between specific glyph pairs and can be built into the font, unlike tracking, which applies spacing across all glyphs.

Grid and Variable Fonts

The typeface uses a grid rotated by 45 degrees, with small squares forming the map. The squares change size to represent different font weights.

esdata uses variable font technology to transition smoothly between its minimum and maximum weights, without drawing each intermediate weight manually.

CSS

font-family: "esdata-spain";
font-variation-settings: "wght" 500;
Spain