A CodePen by Ben Markowitz. Stately

index.html

<div id="buttons">
  <a id="toggle" class="button">Toggle Styles</a>
  <a id="stately" class="button" href="http://intridea.github.com/stately" target="_blank">Stately on GitHub</a>
  <a id="intridea" class="button" href="http://www.intridea.com/" target="_blank">Intridea</a>
</div> <!--buttons-->

<div id="container"> 
  <div id="inner">
    <ul class="stately" id="intrideans"> 
      <h3>States With Intrideans</h3>
      <li data-state="ca">California</li>
      <li data-state="co">Colorado</li>        
      <li data-state="dc">Washington D.C</li>
      <li data-state="fl">Florida</li>
      <li data-state="ks">Kansas</li>
      <li data-state="md">Maryland</li>
      <li data-state="mn">Minnesota</li>
      <li data-state="nj">New Jersey</li>
      <li data-state="nm">New Mexico</li>
      <li data-state="ny">New York</li>
      <li data-state="oh">Ohio</li>			
      <li data-state="vt">Virginia</li>			
      <li data-state="wa">Washington</li>
      <li data-state="wy">Wyoming</li>
      <li data-state="va">Virginia</li>
    </ul> <!--intrideans-->   
    
    <ul class="stately" id="election"> 
	    <h3>2012 Presidential Election vs. Blue</h1>
		  <ul id="red_states">
		    <h4>Red States</h4>
			  <li data-state="al">Alabama</li>
			  <li data-state="ak">Alaska</li>
			  <li data-state="ar">Arizona</li>						
			  <li data-state="az">Arkansas</li>
			  <li data-state="ga">Georgia</li> 
			  <li data-state="id">Idaho</li>
			  <li data-state="in">Indiana</li>     
			  <li data-state="ks">Kansas</li>
			  <li data-state="ky">Kentucky</li>
			  <li data-state="ms">Mississippi</li>
			  <li data-state="mo">Missouri</li>
			  <li data-state="mt">Montana</li>
			  <li data-state="ne">Nebraska</li>
			  <li data-state="nc">North Carolina</li>
			  <li data-state="nd">North Dakota</li>
			  <li data-state="ok">Oklahoma</li>
			  <li data-state="sc">South Carolina</li>
			  <li data-state="sd">South Dakota</li>
			  <li data-state="tn">Tennessee</li>
			  <li data-state="tx">Texas</li>
			  <li data-state="ut">Utah</li>
			  <li data-state="wv">West Virginia</li>
			  <li data-state="wy">Wyoming</li>
			  <li data-state="la">Louisiana</li>
		  </ul> <!--red-states-->

		  <ul id="blue_states">
			  <h4>Blue States</h4>
	   	  <li data-state="ca">California</li>
			  <li data-state="co">Colorado</li>
			  <li data-state="ct">Connecticut</li>
			  <li data-state="de">Delaware</li>
			  <li data-state="dc">Washington D.C</li>
			  <li data-state="fl">Florida</li>
			  <li data-state="hi">Hawaii</li>
			  <li data-state="il">Illinois</li>
			  <li data-state="ia">Iowa</li>                     
			  <li data-state="me">Maine</li>
			  <li data-state="md">Maryland</li>
			  <li data-state="ma">Massachusetts</li>
		 	  <li data-state="mi">Michigan</li>
			  <li data-state="mn">Minnesota</li>
			  <li data-state="nv">Nevada</li>
			  <li data-state="nh">New Hampshire</li>
			  <li data-state="nj">New Jersey</li>
			  <li data-state="nm">New Mexico</li>
			  <li data-state="ny">New York</li>
			  <li data-state="oh">Ohio</li>			
			  <li data-state="or">Oregon</li>
			  <li data-state="pa">Pennsylvania</li>
			  <li data-state="ri">Rhode Island</li>
			  <li data-state="va">Vermont</li>
			  <li data-state="vt">Virginia</li>			
			  <li data-state="wa">Washington</li>            
			  <li data-state="wi">Wisconsin</li>
		  </ul> <!--blue_states-->
    </ul> <!--election-->  
  </div> <!--inner-->
</div> <!--container-->

<!--   

A CODEPEN of Stately using ligatures. 
Toggle styles to see actual lists. 

More about Stately:
http://intridea.github.com/stately

Made by Ben Markowitz at Intridea
@bpmarkowitz
@intridea

http://www.intridea.com

-->

script.js

$(document).ready(function() {
  $("#toggle").click(function(){
    $("html").toggleClass("styled");
  });
});

style.less

.styled {

/** Stately setup
*************************************/
@font-face {
  font-family: 'stately-webfont';
  src: url('http://cl.ly/2K0I253p1e06/stately-webfont.woff') format('woff'),
       url('http://cl.ly/2J1M3h343n3O/stately-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.stately{
  float:left;
  position:relative;  
	font-family:"stately-webfont";	
	font-weight: normal;
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	overflow:hidden;
	width:300px;
  height:300px;
	font-size:300px;
	display:block;
	margin:0 40px;
	padding:0;
	list-style:none;	
  top:-40px;
}

.stately li{ 
	font-family:"stately-webfont";	
  position:absolute;
  width:300px;
  height:300px;
  left:0;
  top:0;
  color:black;
  text-indent:-9999px;
}

li:after{
  text-indent:0;
  content: attr(data-state);
  position:absolute;
  width:300px;
  height:300px;
  top:0;
  left:0;
  z-index:2;
}
  
/** Page Structure
*************************************/
#container{
  width: 100%;
  height: 100%;
  display: box;
  box-align: center;
  box-pack: center;

}

#inner{
  max:1140px;
  height:240px;
}

h3{
  font-family:sans-serif;
  font-size:16px;
  color:#b0b0b0;
  font-size:16px;
  font-weight:bold;
  margin-top:20px;
 }

/** Intrideans
*************************************/
#intrideans li{
	color: #a3d07e;
}

#intrideans:after{ /*For Full Map*/
  content:"usa";
  color:#e9e9e9;
  z-index:1;
  position:absolute;
  top:0;
  left:0;
}

/** 2012 Election
*************************************/

#red_states li{
  color:#ff7474;
}

#blue_states li {
	color:#00aeef;
}
  
} /*styled*/

/** Buttons
*************************************/
html, body{
  height:100%;
  font-family:sans-serif;
  font-smoothing:antialiased;
}

#buttons{
  position:absolute;
  top:0;
  right:20px;

}

.button{
  float:left;
  margin:0 10px;
  padding:0 12px;
  height:40px;
  line-height:40px;
  background:#a2cf7e;
  color:#fff;
  cursor:pointer;
  border-radius:0 0 3px 3px;
  text-decoration:none;
  font-weight:bold;
  opacity:.8;
}

#intridea{
  width:40px;
  height:40px;
  display:block;
  padding:0;
  text-indent:-99999px;
 background:url("http://f.cl.ly/items/3i1n2K2C0z0U213c0N1e/tag_2x.png") center no-repeat;
  background-size:40px;
}

.button:hover{
  opacity:1;
}