esdata

Typography to represent data at the time is written
Laus award seal

Overview

esdata is a experimental typography that consists of visualizing data in maps at the same time the data is written. Imagine writing the election data and using a typography that automatically transforms the data into a map.

Purpose

The goal is to experiment with new ways of visualizing data and discover all the possibilities of variable fonts, CSS and JavaScript. You can play with the USA Election Map.

Winner Barack obama
  • Alabama
  • Alaska
  • Arizona
  • Arkansas
  • California
  • Colorado
  • Connecticut
  • Delaware
  • Florida
  • Georgia
  • Hawaii
  • Idaho
  • Illinois
  • Indiana
  • Iowa
  • Kansas
  • Kentucky
  • Louisiana
  • Maine
  • Maryland
  • Massachusetts
  • Michigan
  • Minnesota
  • Mississippi
  • Missouri
  • Montana
  • Nebraska
  • Nevada
  • NewHampshire
  • NewJersey
  • NewMexico
  • NewYork
  • NorthCarolina
  • NorthDakota
  • Ohio
  • Oklahoma
  • Oregon
  • Pennsylvania
  • RhodeIsland
  • SouthCarolina
  • SouthDakota
  • Tennessee
  • Texas
  • Utah
  • Vermont
  • Virginia
  • Washington
  • WestVirginia
  • Wisconsin
  • Wyoming
  • Republican
  • Democrat

Ligatures

Typographic ligatures recognize a sequence in the text and transform it into a new glyph or drawing. esdata recognizes geographic zones such as states or counties as text and creates a visual map using only typography.

Kerning

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

System

The system consists in a 45º grid which creates small squares for draw the map. The squares are filled with differents sizes for have diferents weights. esdata use the new typographic technology, Variable Font, for have a transition between weights.

Explain grid system

CSS

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