見出しやタイトルなどのデザインとして、「文字と文字の間隔を広げる」装飾が使われているのをたまに見かけます。ワープロなどで文書を作成している場合なら、「文字と文字の間に半角スペースを挿入する」という手段で文字間隔を調整する(広げる)こともあるでしょうね。でも、スペース(空白文字)を挿入することで間隔を調整する方法には、デメリットがあります。

• 検索にヒットしなくなる
• 空白文字(半角スペースなど)の幅単位でしか調整できない
• 読み上げソフトで正しく読み上げられない

例えば、「空白文字」という4文字の間に半角スペースを挿入して「空 白 文 字」としてしまうと、検索エンジンや読み上げソフトなどからは、「空(そら)」・「白(しろ)」・「文(ぶん)」・「字(じ)」という4つの別々の単語だと解釈されてしまう可能性があります。

こうなると、「空白」という検索語ではヒットできなくなりますし、正しく読み上げられなくなるデメリットがあります。また、デザインの面からも「半角文字1つ分単位でしか調整できない」という不自由さがあります。

というわけで、文字間隔を調整したい場合には、スタイルシートのletter-spacingプロパティを使いましょう。使い方はとても簡単で、以下のような感じで記述します。

h2 {
   letter-spacing: 0.5em;
}

上記のように記述すると、h2要素内の文字と文字の間隔が0.5文字分確保されます。
表示すると以下のような感じ。

もっと広くしたければ、「0.5em」の部分を大きくすれば良いだけです。「1em」にすれば、1文字分の間隔が空きます。他の単位も使えるので、「3px」と書けば3ピクセルだけ空くようになります。

p.wide {
   letter-spacing: 1em; /* 文字間隔を1文字分に */
}
p.thin {
   letter-spacing: 3px; /* 文字間隔を3pxに */
}

これらの文字間隔で表示すると、以下のような感じになります。

この方法なら、見た目の上ではどれだけ文字の間隔が開いていても、ソース上には余計な隙間がないので、問題なく検索にヒットしますし、正しく読み上げられるでしょう。しかも、1ピクセル単位で文字間隔を調整できます。

(更新日：2016年01月10日)