画像文字、画像ボタン、様々な所で使われる文字の画像置換方法ですが、現状よく使われている方法として下記の3種類が挙げられます。

Phark Method

.example{
    width: auto;
    height: auto;
    display: block;
    overflow: hidden;
    text-indent:-9999px;
}

Phark Methodは、数多く存在する画像置換方法の中で最もベーシックな方法で、昔から使われてきた方法です。

ブロック要素に対してtext-indent: -9999px;(-9999pxは別に-99999pxでも-10000pxでも良い)していします。
これによって文字要素を画面の外側にふっ飛ばして文字を見えなくするといういささか強引な方法ではあるものの、シンプルかつ古いブラウザでも対応しているので、昔からよく見かけます。

問題点として、-9999px分の領域が作られ、実際にレンダリングされます。
この要素を大量に使うと大量の10000pxオーバーの領域がレンダリングされるという事になり、ブラウザのパフォーマンスがかなり悪くなってしまいます。

最近のスマホやタブレットはスペックが向上したので特に気にはなりませんが、昔のスマホサイト(Android 1.xや2.x系は特に)で結構大きな問題になっていました。


Leahy/Langridge

.example{
    height: 0;
    display: block;
    padding-top: 100px;
    overflow: hidden;
}

こちらもかなり強引な方法で、ボックスのheightを0pxにして、paddingを使ってボックスの高さを稼ぐという方法になります。

先述の「Phark Method」とは違い、高さを固定にする必要がありますが、height自体は0なので、文字が表示されないという仕組みになります。

問題点としては、ボックスの高さを固定にしないといけないのと、paddig-topがボックスの高さを作るために使われてしまうという点です。
text-indent: -9999px;に比べると使い勝手が悪いですね。


Scott Kellum Method

.example{
    width: auto;
    height: auto;
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

最近(スマホが登場して以降)、「これが良いんじゃない?」と言われている方法です。

white-spaceをnowrapにする事で、テキストの自動改行を無くします。
これによってボックスの横幅が固定されている中に長い文章を入れても1行で表示されます。

それをoverflow: hidden;によって消してしまい、text-indent: 100%;でテキスト全体をボックスの外側に移動させてしまいます。

この方法も別に”推奨”されてる訳ではなく、現状この方法が一番使い勝手が良く、パフォーマンスに優れているようです。

問題点としては、親要素の影響を受けやすいのと、最近のブラウザだとサイト内検索(Ctrl + F / command + F)で隠れている文字を検索すると表示されてしまうという点があります。


Google的には画像置換を含むいわゆる”隠し文字”はあまり良くなさそう

Googleが提示するウェブマスター向けガイドラインに下記のような項目が書かれています。

コンテンツに隠しテキストや隠しリンクを含めることは、偽装行為と見なされることがあり、Google のウェブマスター向けガイドライン(品質に関するガイドライン)への違反にあたります。
サイトに隠しテキストや隠しリンクが含まれていないかを判断する際は、ユーザーから見えにくい部分がないか、ユーザーではなく検索エンジンのみを対象としたテキストやリンクがないかを確認します。

一応、「Flash、JavaScript、画像等、Googleのボットが解析しにくい要素の代替としては大丈夫」のような記述がありますが、実際Googleのボットがそう都合よく解釈をしてくれるとも考え難いので、基本的に多用するのはSEO的にNGと考えて良いかと思います。


じゃあ、他のサイトはどうやってるの?

Googleのガイドラインを呼んでいくとよく分からなくなってくるので、他の大手サイトが実際にどうやって対応しているのかを見ていきます。

Yahoo! JAPAN

01_yahoo!

どうやら、Yahoo! JAPANはPhark Methodを採用しているようです。
text-indent: -9999px;を消すと、アタッシュケースのアイコン上に「トラベル」というテキストが表示されます。

Google

02_Google
ガイドラインを作った張本人、Google先生はそもそも『テキストを入れない』という対応をしていました。
ただ、タグに対してちゃんとtitle属性を指定しているので、要素の意味としてはちゃんと辻褄が合ってる気がします。

でも、空タグってどうなのよ?と思ったので、最も最近作られたであろう、マテリアルデザインを取り入れたAndroid 5.0 Lollipopのページを見てみた所、空タグの変わりに空のコメントアウトがされていました・・・。
04_Google_material
05_Google_material

色んな所で空のコメントアウトが見受けられるので、そういうルールにしているのでしょうね。

Apple

06_apple

Appleはclipを使うという、一風変わった方法を取っていました。
heightとwidthを1pxにして、clipを使ってx軸1px、y軸1pxの位置から1×1pxの範囲を切り抜きます。
これによって実質ブロック自体は0pxになります。

そして、overflow: hidden;を指定されているので、ボックスの外に飛び出たテキストは消えます。

HTMLの階層が深くなってしまう問題はありますが、この方法なら大きなデメリットは無く色々な所で使えそうですね。

Microsoft

08_microsoft

Microsoftのサイトは全体的に画像文字を使っていません。
ロゴ以外の文字要素のほとんどがテキストのようです。

また、ページごとに色々なフォント(ウェブフォント)を読み込んでおり、見た目を整えています。
とは行っても、おそらく英語ベースで作られているサイトの為、日本語表記の所では違和感があります。
09_microsoft

Twitter

10_twitter

かなり昔から公式でCSSフレームワークを提供しているTwitterですが、基本的にアイコン+テキストという形式を取っており、アイコンはCSSの擬似クラスで作っているようです。

ボタン類もCSSを使って作られており、特に隠し文字を使っている箇所は見受けられませんでした。


総評

これらを見ていくと、個人的にはGoogleやMicrosoft、Twitterのやり方が一番スマートのような感じがします。

空タグでもtitle属性さえちゃんと書いていればHTML文章としての意味は通るので、文章構造としておかしい感じもしませんし、文字の説明が必要な場合は普通にテキストで表示させる。

最近だとモリサワもウェブフォントのサービスを始めましたし、英語フォントであれば昔から色々な種類の物があります。
フォントを表示させる上で問題であったアンチエイリアスの問題も最近のモダンブラウザではかなり良くなってきていますしね。

後はカーニングの問題さえ解決すれば万々歳なんですが、これは未だにちゃんとした解決策は無さそうですね。
たまに1文字ずつspanタグで囲ってそれぞれにtext-indentを指定するというかなり強引な方法を取ってるサイトを見かけますが・・・。

これからWebフォントを用いたサイト制作がどんどん盛り上がってくれて、CSSの仕様にもカーニングの事が追加される事に期待です。
あわよくば、Photoshopレベルの事がCSSで出来るようになれば、CSSだけでの表現の幅も広がって面白いコンテンツが色々作れそうなのですが。(そうなったらそうなったで、コーディングが恐ろしく大変な作業になりますね)