What is it?

Stately is a web font for making simple maps using HTML and CSS.

How does it work?

In Stately, each character in the font is one of the fifty states or the District of Colombia. Each character is sized and positioned relative to all the other states, so that when stacked on top of each other it creates a full map of the US. Each state can be styled independently, so it is perfect for simple visualizations.

The characters to generate the map 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.

What is it good for?

Stately is a great choice when a full SVG solution might be overkill or legacy browser support is needed. Stately works in many places SVG won't work (IE6, IE7 and IE8).

How can you use it?

Just grab Stately off Github and add the Stately folder to your project. You'll find the CSS and web font files, which is all you need to deploy Stately in your app. The Stately site and the Stately Github page offer some basic markup to get started. Or, you can find your own creative ways to use it.

What's next?

Keep an eye out for an update that adds interaction coming soon.