What is Stately?

Stately is a symbol font that makes it 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;
}

Samples

Intrideans

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y

2012 Presidential Election

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y

Presidential Birth States

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y

Created By:

Ben Markowitz

Ben Markowitz is a UI and UX designer with Intridea, where he has worked with clients ranging from startups to Fortune 500 companies. Ben created Stately as a part of Intridea's SparkTime. When he is not working in Photoshop and Omnigraffle he likes to get his hands dirty in projects like this.