AdobeのBlankは何も（スペースさえも）表示しないオープンソースの代替フォント - TechCrunch

ということで、その名のとおりグリフがブランク（空）なAdobeBlankをさっそくダウンロードしてみましたよ。

ファイルサイズは80KB程度なので本当に軽いですね！

んで、空文字で何が嬉しいの？って言えば、やっぱナビゲーションじゃないですかね。

こんな文字列リンクのリストを

こんなカンジの画像リンクに置き換える場合。

これまでだと、background指定した上でoverflow:hidden;とtext-indent:-9999px;みたいなカンジで文字をふっ飛ばしたりして実現してたと思いますが、

AdobeBlankがあればもっと素直に書けますね。

@font-face {
  font-family: AdobeBlank;
  src: url(AdobeBlank.otf) format("opentype");
}
ul li a{
  font-family: 'AdobeBlank';
}
div{width:480px;　margin:0 auto; border-top:#333 solid 4px;}
ul li{float: left;}
ul li a{display:block; width:120px; height:40px;}
ul li:nth-child(1) a{background:#fff url(n1.png) 0 0 no-repeat;}
ul li:nth-child(2) a{background:#fff url(n2.png) 0 0 no-repeat;}
ul li:nth-child(3) a{background:#fff url(n3.png) 0 0 no-repeat;}
ul li:nth-child(4) a{background:#fff url(n4.png) 0 0 no-repeat;}

<div>
<ul>
  <li><a href="/">HOME</a></li>
  <li><a href="/garally/">GARALLY</a></li>
  <li><a href="/order/">ORDER</a></li>
  <li><a href="/access/">ACCESS</a></li>
</ul>
</div>

すっきりですね！