text-indentで文字を非表示にする

h1要素などの背景にcssで画像を指定してh1のテキストを隠すための手法としてtext-indentが使われます。
かつて多く取られた方法は−9999pxの位置まで飛ばす方法でしたが、パフォーマンスの問題やサーチエンジン対策としてダークな部分が残るなどの問題がありました。

text-indent: -9999pxサンプル

HTMLコード

<h1>美しい日本語</h1>

CSSコード

h1{
      width:200px;
      height:100px;
      background:url(logo.png) no-repeat;
      text-indent: -9999px;
    }

考え方は同じようなものですが、どこか遠くへ飛ばすのではなく、 text-indent: 100%としてぎりぎり見えなくしています。
さらに、そのままでは行が折り返されてしまいますので、white-space: nowrapで折り返しを禁止しています。
それでも状況によっては少し文字が見えたりしますので、overflow: hiddenであふれ出したものは見えないようにしています。

text-indent:100%のサンプル

HTMLコード

<h1>美しい日本語</h1>

CSSコード

  h1{
      width:200px;
      height:100px;
      background:url(logo.png) no-repeat;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
    }

サーチエンジン対策第一の場合はやっぱりテキストは隠さない方がベターだと思います。