スペースで文字間隔を調節してはいけない理由

見出しなどで、「文字と文字の間隔を広げてバランスよく見せたい」と思われたことはありませんか？その場合、文字と文字の間にスペースを挿入することで調節している方もいるのではないでしょうか？しかし、この方法はあまり望ましい方法とは言えません。なぜだかお分かりでしょうか？

今回は、スペースで文字間隔を調節してはいけない理由と、ではどうやって文字間隔を調節するのか、そのカスタマイズ方法を説明します。

スペースで文字間隔を調整してはいけない理由

ワープロソフトなどを使用している場合、文字と文字の間にスペースを挿入して文字間隔を広げることは、よくあることだと思います。ブログでも同じようにスペースで調節したくなる方も多いでしょう。しかし、この方法には以下のような問題点があります。

　1. 検索エンジンでヒットされなくなる
　2. 音声ブラウザの読み上げがおかしくなる
　3. 必ずしも望み通りの間隔が開くとは限らない

理由はお分かりでしょうか？
では、それぞれの理由を説明していきます。

■ 検索エンジンでヒットされなくなる

ブログが検索エンジンでヒットされないというのは非常に問題ですね。
特に、ブログタイトルや記事のタイトルが検索エンジンでヒットされないというのはかなりの問題です。

なぜ、検索エンジンでヒットされないかと言いますと、例えば、「文字間隔の調整」という記事のタイトルを、文字間隔を広げるために、スペースを挿入して、「文 字 間 隔 の 調 整」と記述したとします。

そうすると、検索エンジンで「文字間隔」というキーワードで検索しても、そのページ上に存在するのは、「文」「字」「間」「隔」という独立した文字で、「文字間隔」という単語はどこにも存在しないため、「文字間隔の調整」という記事タイトルは「文字間隔」という単語ではヒットされなくなります。

■ 音声ブラウザの読み上げがおかしくなる

上記と同じように、「文字間隔の調整」を、「文 字 間 隔 の 調 整」と記述したとします。そうすると、音声ブラウザは、「 もじかんかくのちょうせい 」とは読まず、「 ぶん・じ・あいだ・かく・の・ちょう・せい 」と読んでしまいます。

この理由は、半角スペースで単語が分断されてしまったために、「単語」と認識できず、独立した1つの文字としてそのまま読んでしまうからです。

■ 必ずしも望み通りの間隔が開くとは限らない

上記と同じように、「文字間隔の調整」を、「文 字 間 隔 の 調 整」と記述したとします。

しかし、「半角スペース」や「全角スペース」がどれくらいの横幅になるのかは、フォントサイズの調整やアクセス環境によって異なります。
つまり、スペースで調節したとしても、自分のデザイン通りに見えるのは、自分の使っている環境のみである可能性もあるということです。
これでは、「見やすくする」ために広げたのに、逆に見にくくなってしまう環境も存在するかも知れないことになります。


それでは、どのようにして文字間隔を調整すればよいのでしょうか？
それは、スタイルシートでletter-spacingというプロパティを利用することで解決します。

文字間隔の指定：letter-spacing

文字間隔の指定を指定するには、letter-spacing というプロパティを使用します。

＜スタイルシートの記述例＞

#calendar caption { letter-spacing: .3em; }

上記の場合、文字間隔は「letter-spacing: .3em;」と指定されています。この「.3em」という記述を変更することで、文字間隔を変更することができます。

文字間隔の指定方法

文字間隔の指定方法には、「3px」のように絶対サイズで指定する方法と、 「0.3em」のように相対サイズで指定する方法があります。

■ 絶対サイズで指定

< スタイルシートの記述例 >

letter-spacing: .3px;

文字間隔が、3ピクセル（px）になります。

< 表示例 >

2005年06月

■ 相対サイズで指定

< スタイルシートの記述例 >

letter-spacing: .0.3em;

文字間隔が、0.3文字分（em）になります。

< 表示例 >

2005年06月

絶対サイズ・相対サイズの単位

絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。

絶対サイズ	意味
in	インチ。1in = 25.4mm
cm	センチメートル
mm	ミリメートル
pt	ポイント。1pt = 1/72in
pc	パイカ。1pc = 12pt
px	ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ）

相対サイズ	意味
em	基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ）
ex	基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ）
%	基準書体のサイズに対する百分率

ブログ別！カスタマイズ方法

では、文字間隔のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。

[MovableType]

→ 文字間隔の調整

以上、文字間隔の調整、指定方法について説明しました。
是非、参考にして、読みやすい文字間隔にカスタマイズしてください。

ブログランキングに参加中です。応援お願いします。