Stately | The simple map font

What is Stately?

Stately is a symbol font that makes is easy to create a map of the United States using only HTML and CSS. Each state can be styled independently with CSS for making simple visualizations. And since it's a font, it scales bigger and smaller while staying sharp as a tack.

How does it work?

Each state is a glyph within the font. Each state is positioned and sized relative to the the rest of the states, so that when each character is stacked on top of one another, it creates a full map.

The pertinent characters are uppercase A-Z and lowercase a-y which generate all the states (including the District of Columbia). Additionally lowercase z generates a character of the full US map.

For modern browsers ligatures are available and a state's abbreviation is it's ligature. For example, "va" generates the glyph of the state of Virginia and 'dc' the District of Columbia. Additionally, the ligature "usa" produces a character of the full US map.

Basic Use Case

Download and add the Stately folder to your project which includes the base CSS and the web font files. and add the stately.css to the head of your document

<link rel="stylesheet" href="stately/stately.css">

Then add this sample markup to your page

Expand
Collapse
<ul class="stately">
  <li data-state="al" id="al">A</li> 
  <li data-state="ak" id="ak">B</li> 
  <li data-state="ar" id="ar">C</li> 
  <li data-state="az" id="az">D</li> 
  <li data-state="ca" id="ca">E</li> 
  <li data-state="co" id="co">F</li> 
  <li data-state="ct" id="ct">G</li> 
  <li data-state="de" id="de">H</li> 
  <li data-state="dc" id="dc">I</li> 
  <li data-state="fl" id="fl">J</li> 
  <li data-state="ga" id="ga">K</li> 
  <li data-state="hi" id="hi">L</li> 
  <li data-state="id" id="id">M</li> 
  <li data-state="il" id="il">N</li> 
  <li data-state="in" id="in">O</li> 
  <li data-state="ia" id="ia">P</li> 
  <li data-state="ks" id="ks">Q</li> 
  <li data-state="ky" id="ky">R</li> 
  <li data-state="la" id="la">S</li> 
  <li data-state="me" id="me">T</li> 
  <li data-state="md" id="md">U</li> 
  <li data-state="ma" id="ma">V</li> 
  <li data-state="mi" id="mi">W</li> 
  <li data-state="mn" id="mn">X</li> 
  <li data-state="ms" id="ms">Y</li> 
  <li data-state="mo" id="mo">Z</li> 
  <li data-state="mt" id="mt">a</li> 
  <li data-state="ne" id="ne">b</li> 
  <li data-state="nv" id="nv">c</li> 
  <li data-state="nh" id="nh">d</li> 
  <li data-state="nj" id="nj">e</li> 
  <li data-state="nm" id="nm">f</li> 
  <li data-state="ny" id="ny">g</li> 
  <li data-state="nc" id="nc">h</li> 
  <li data-state="nd" id="nd">i</li> 
  <li data-state="oh" id="oh">j</li> 
  <li data-state="ok" id="ok">k</li> 
  <li data-state="or" id="or">l</li> 
  <li data-state="pa" id="pa">m</li> 
  <li data-state="ri" id="ri">n</li> 
  <li data-state="sc" id="sc">o</li> 
  <li data-state="sd" id="sd">p</li> 
  <li data-state="tn" id="tn">q</li> 
  <li data-state="tx" id="tx">r</li> 
  <li data-state="ut" id="ut">s</li> 
  <li data-state="va" id="va">t</li> 
  <li data-state="vt" id="vt">u</li> 
  <li data-state="wa" id="wa">v</li> 
  <li data-state="wv" id="wv">w</li> 
  <li data-state="wi" id="wi">x</li> 
  <li data-state="wy" id="wy">y</li> 
</ul>

Set the size and base map color in your CSS.

 ul.stately {
   width:300px; //width and font size must match 
   font-size:300px;
   color:#f0f0f0;

 }

Style individual states

 .stately li#va,
 .stately li#md,
 .stately li#dc {   color: #FF0000;
 }