文字と文字の間隔を調節したい場合に、空白文字を使ってはダメ

文字の間隔を調節したい

文字の間隔を調節したい

文字と文字の間隔を調節したい場合があります。例えば見出しを作る際には、広いスペースに少ない文字をバランスよく配置したいと思うこともあるでしょう。逆に、狭いスペースに文字を詰めて表示したい場合もありそうです。

文字と文字の間隔を広げたい場合によく使われてしまう方法が、文字と文字の間に空白文字(スペース)を挿入する方法です。分かりやすい手段ですが、望ましい調節方法ではありません。そもそもこの方法では、文字間を広げることはできても詰めることはできません。

今回は、文字間隔を空白文字で調節してはいけない理由と、ピクセル単位で細かく文字間隔を自在に調節する方法をご紹介いたします。

なぜ空白文字を使って文字間隔を調節してはいけないのか

ワープロソフトを使って文書を作っている際に文字と文字の間隔を広げたいと思ったら、文字と文字の間に空白文字(スペース)を挿入するでしょう。ウェブページを作っている際にも空白文字で調節したくなるかもしれません。しかし、それには以下の4つの問題点があります。


以下に、簡単にご紹介いたします。

空白文字で単語を分断すると、検索にヒットできなくなる
検索にヒットできなくなる

検索にヒットできなくなる

文字と文字の間に空白文字を挿入する方法で間隔を調節してしまうと、単語だとは認識されなくなるため、検索にヒットしなくなります。

例えば「今日の日記」という5文字があり、文字間隔を広げるべく半角スペースを挿入して「今 日 の 日 記」と記述したとします。ここで「日記」という単語で検索するとどうなるでしょうか?

存在するのは「日」と「記」という独立した文字であって「日記」という単語ではありません。したがって、「今 日 の 日 記」という空白文字で分断された文は、「日記」という検索語ではヒットしないことになってしまいます。

■空白文字で単語を分断すると、音声ブラウザの読み上げが正しくなくなる
正しく読み上げられなくなる

正しく読み上げられなくなる

文字間隔を空白文字で調節してしまうと、音声ブラウザ(読み上げソフト)での読み上げが意図した通りにならない問題もあります。

先ほどと同じように「今日の日記」の文字間に半角スペースを入れて「今 日 の 日 記」と記述したとします。

すると音声ブラウザは、「きょうのにっき」とは読まずに「いま、ひ、の、ひ、き」などのように読んでしまう可能性があります。空白文字で単語が分断されてしまったために単語だとは認識されず、独立した1つ1つの文字として読んでしまうわけです。これでは、何が書かれているのかさっぱり分かりません。

■空白文字では、必ずしも望み通りの間隔になるとは限らない
文字間隔を空白文字で調節する方法だと、望み通りの間隔が空くとは限らない問題もあります。

表示に使われるフォントは閲覧環境によって様々ですから、空白文字が何ピクセルのサイズで表示されるのかは閲覧者によって異なります。つまり、空白文字で文字間隔を調節しても、自分のデザイン通りに見えるのは自分の使っている環境だけである可能性もあるということです。これでは、見やすくする目的で広げたのに、逆に見にくくなってしまう環境もあるかもしれません。

また、そもそもブラウザはHTMLソース内に2つ以上の連続する空白文字(=半角スペースやタブや改行など)がある場合には、「1つ分の空白」だと解釈する仕様になっています。これはブラウザのバグなどではなく仕様です。そのため、半角スペースを2つ以上挿入することで文字間隔を大きく広げることはできません。

■文字間隔を再調整したい場合に、修正の手間がかかりすぎる
空白文字を挿入することで間隔を広げてしまうと、後から間隔の分量を再調整したくなった際に、すべての空白文字を再度打ち直す必要が出てしまい、非常に手間がかかります。

上記のように、空白文字を使って文字間隔を調節するとデメリットが多数あります。

文字間隔はCSSで調節する

それでは、どんな方法で文字間隔を調節するのが望ましいでしょうか。CSS(スタイルシート)には、文字間隔を調節するためのletter-spacingプロパティが用意されています。このプロパティを使えば、単位にemやpxなどを使って、ピクセル単位で文字間隔を調節できます。広げるだけでなく、詰めることもできるため、間隔は自由自在です。

それでは次のページで、文字間隔を調節できるletter-spacingプロパティの記述方法を見てみましょう。