【letter-spacing】文字間隔を変更する

letter-spacingプロパティでは、文字と文字の間隔(字間)を設定することができます。

値の指定はキーワードと数値で指定することができますが、キーワードとして使用できるのはnormalのみとなっています。 また値は通常の文字間隔に対しての増加分を指定します。

ただしtext-alignプロパティで「justify」を指定している場合は、letter-spacingが正しく反映されない可能性があります。

なおワープロなどでは「時 間」のように、単語の途中にスペースを入れて文字間隔を調整することがありますが、HTMLで同様の事を行うと、音声ブラウザなどで正しく読み上げられない場合があります。 またページ内検索を行う場合などにも、悪影響を及ぼすことがありますので、文字の間隔を調整したい場合は、できる限りスタイルシートを利用するようにして下さい。

書式

  • letter-spacing : ……… 文字と文字の間隔を指定する

★:normal、実数+単位、inherit

normal
文字間隔を標準の状態にする(初期値)
実数+数値で指定
数値にpx、emなどの単位を付け、標準の文字間隔に対してのプラス分(マイナス分)を指定します。例えば「5px」と指定した場合は、「標準の文字間隔+5px」が実際に表示されるサイズとなります。また数値には負の値も指定することができ、「0」を指定した場合はnormalと同様の表示となります。

使用した時の例

.sample1 {letter-spacing: normal;}
.sample2 {letter-spacing: 10px;}
.sample3 {letter-spacing: -2px;}
<div class="sample1">letter-spacing: normal(文字間隔0と同様)</div>
<div class="sample2">letter-spacing: 10px</div>
<div class="sample3">letter-spacing: -2px</div>

ブラウザ上の表示例

letter-spacing: normal(文字間隔0と同様)
letter-spacing: 10px
letter-spacing: -2px

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / text
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~