ほんっとにはじめての HTML5 と CSS3

letter-spacingプロパティは、「文字間」のトラッキングを調整します。
1文字ずつ均等に空けたり詰めたりするプロパティです。

「トラッキング」とは、まとまったテキストを一律で 字送り・字詰め すること。
印刷・エディトリアル用語です。

ちなみに 「カーニング」とは 印刷・エディトリアル用語で、字間（アキ）の調整をすること。
フォントのフォルムによって空いて見えるところ（W と A の間とか）を詰めたりすることです。

参考：
・CSS Text Module Level 3 | W3C Working Draft
・letter-spacing - CSS | MDN

letter-spacingプロパティの値

letter-spacingプロパティの値
キーワード	normal がデフォルト値。トラッキングは0です。 ただし text-align: justify が指定されていたら、ブラウザが両端揃えをするためにトラッキングを変えることは許可します。
単位付き数値	単位を付けた数値でトラッキングを指定。マイナスの値も使えます。
グローバル値	text-indent: inherit; 親の値を継承（コレ書かなくても継承するけど） text-indent: initial; 継承した親の値を解消しデフォルト値に戻す text-indent: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	すべての要素

letter-spacingプロパティの指定サンプル

letter-spacingプロパティの指定例です。

サンプルのソースコードはこんなかんじ。
各 <div>要素にインラインで letter-spacingを指定しています。

<div class="mihon"> <!--←未指定（=normal）-->
<b>letter-spacing: 未指定（= normal）</b>
This property specifies additional spacing (commonly called tracking) 
between adjacent typographic character units. 
このプロパティは、隣接する文字の文字単位の間に追加の間隔
（通常トラッキングと呼ばれる）を指定します。
</div>
<div class="mihon" style="letter-spacing:0.1em">（テキストは省略）</div>
<div class="mihon" style="letter-spacing:5px">（テキストは省略）</div>
<div class="mihon" style="letter-spacing:-0.05em">（テキストは省略）</div>

<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em;
	width:60%}
.mihon b {
	display:block;
	color:#579961;
	letter-spacing:normal} /*←タイトル（グリーンの文字）のみデフォルト値に*/
</style>

W3C の仕様書では、letter-spacingプロパティを指定した要素の「行頭・行末」の文字にはトラッキングは起きないことになってます。
が、実際には文字の進行方向にトラッキングスペースができるようで、行末の文字がピタッとボックスの端にくっつかないんだよね。

上のサンプルは、右揃え（ text-align: right ）にしています。
タイトル（グリーンの文字）は letter-spacing: normal（トラッキングなし）です。
letter-spacing: 1em が効いてる本文（黒の文字）は、右側に 1em分の空きがあるのがわかります。

<div class="mihon" style="letter-spacing:1em; text-align:right">
<b>letter-spacing: 1em; text-align:right</b>
このプロパティは、隣接する文字の文字単位の間に追加の間隔
（通常トラッキングと呼ばれる）を指定します。
</div>

日本語（文字の進行方向が左から右）の場合、「右寄せ」にしたとき上の現象が起きるので注意が必要です（まあ滅多に無い状況ですが）

font-kerning との併用もできます

font-kerningも同時に使っている場合、font-kerningの適用後に letter-spacing が行われるそうです。

試してみます。

最初のは、font-kerning: normal のみ、
2番目は、カーニングも letter-spacing も同時指定。
3番目はも letter-spacing のみ。

letter-spacing は1文字ずつ固定値で調整しますが、font-kerning は臨機応変に詰めてくれるので便利。で、font-kerning だけでは物足りない時に、letter-spacing も併用できるので、さらに便利ですね。

上のサンプルのソースコードです。

<div class="mihon">
  <p class="k-normal">
  <span style="letter-spacing:0">font-kerning: normal のみ</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-normal-spacing">
  <span style="letter-spacing:0">font-kerning: <b>normal</b>; letter-spacing: -0.03em;</span>
  P. Wa, WAV, To, Yo</p>
  <p class="k-none-spacing">
  <span style="letter-spacing:0">font-kerning: <b>none</b>;  letter-spacing: -0.03em;</span>
  P. Wa, WAV, To, Yo</p>
</div>
<style>
.k-normal-spacing {
	-webkit-font-kerning: normal;
	font-kerning: normal;
	letter-spacing: -0.03em
    }
.k-none-spacing {
	-webkit-font-kerning: none;
	font-kerning: none;
	letter-spacing: -0.03em
    }
</style>

font-kerning については、コチラをご覧ください。
【29】文字間を自動調整してくれる font-kerningプロパティ

font-variant-east-asian との併用もしてみます

font-variant-east-asian: proportional-width と font-feature-settings: 'pwid' は「カナ詰め」をしてくれるんでしたね。
これと letter-spacing を併用してみます。

ちょっとわかりにくいですが、併用できてますね。
3番目と 4番目のサンプルを見ると、3番目（カナ詰めも letter-spacing も両方指定）のほうが、カナが詰まっています。

ちょっと意外だったのは、「font-variant-east-asian: proportional-width（font-feature-settings: 'pwid' も同じ）」を指定すると全角の （ ） が、半角の () に変わること。知らなかった（そしてちょっと迷惑）

font-variant-east-asian についてはコチラをご覧ください。
【30-6】漢字や仮名のための font-variant-east-asian
font-feature-settings についてはコチラ。
【31】OpenType機能を直接指定できる font-feature-settings

letter-spacingプロパティの使いどころ

タイトルなどに、カーニングと一緒に使うといい感じです。

ちなみに以前はよく、日本語での表組みで「単語の左右を揃えたい」時に使ってました。
下のテーブルの左側のテキスト（会場、開催期間など）は、文字数が違うため両端が揃わないのですが、letter-spacing でトラッキングを調整して左右を揃えています。

会場	中央公園
開催期間	夏休み中
料金	大人500円（お子さまは無料です）
駐車場	なし（最寄りに公共駐車場あり）

サンプルのソースコードはこんなかんじです。

<table class="sample">
  <tr>
    <th><span style="letter-spacing:2em">会</span>場</th>
    <td>中央公園</td>
  </tr>
  <tr>
    <th>開催期間</th>
    <td>夏休み中</td>
  </tr>
  <tr>
    <th><span style="letter-spacing:2em">料</span>金</th>
    <td>大人500円（お子さまは無料です）</td>
  </tr>
  <tr>
    <th><span style="letter-spacing:.5em">駐車</span>場</th>
    <td>なし（最寄りに公共駐車場あり）</td>
  </tr>
</table>

ただしコレ、こんな↑面倒くさいことをしなくても、今は text-align: justify を使えばもっと簡単にできます。

会場	中央公園
開催期間	夏休み中
料金	大人500円（お子さまは無料です）
駐車場	なし（最寄りに公共駐車場あり）

ここでの注意点は、text-align: justify だけだとダメなこと。
（テキストが1行しかないとそれが「最終行」になるので text-align: start（デフォルト）扱いになる） 必ず text-align-last: justify も併用します。
ソースコードはこちら。

<table class="sample">
  <tr>
    <th>会場</th>
    <td>中央公園</td>
  </tr>
  <tr>
    <th>開催期間</th>
    <td>夏休み中</td>
  </tr>
  <tr>
    <th>料金</th>
    <td>大人500円（お子さまは無料です）</td>
  </tr>
  <tr>
    <th>駐車場</th>
    <td>なし（最寄りに公共駐車場あり）</td>
  </tr>
</table>

<style>
.sample th {
	text-align:justify;
	text-align-last:justify; /*これが無いと左寄せのまま*/
    }
</style>

text-align: justify と text-align-last: justify については、コチラをご覧ください。
【33】テキストの整列や両端揃えを指定する text-alignプロパティ

次回予告

さて次回は、line-breakプロパティを使おう。
これは、改行した次の行の頭に「句読点（、。）閉じ括弧（」』）」などが来ないように制御する「改行ルール（禁則処理）の厳密さ」を変更できるプロパティです。

関連記事

• 【45-3】縦書きで「縦中横」ができる text-combine-upright
• 【45-2】縦書きでの文字の向きを決める text-orientation
• 【45-1】日本語の縦書きもできちゃう writing-modeプロパティ
• 【44】タブ文字の幅を決める tab-sizeプロパティ
• 【43】テキストを大文字・小文字に変換する text-transform
• 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
• 【41】句読点などが行頭に来るかどうか決める line-break
• 【40】文字間の間隔を指定する letter-spacingプロパティ
• 【39】単語間の間隔を指定する word-spacingプロパティ
• 【38】インデント（字下げ）を指定する text-indentプロパティ
• 【37】空白を詰めるかどうか決める white-spaceプロパティ
• 【36】単語の途中で改行するとき自動でハイフンを付ける hyphens
• 【35】改行の禁則処理を解除するか決める word-breakプロパティ
• 【34】単語の途中で折り返させる overflow-wrap（word-wrap）
• 【33】テキストの整列や両端揃えを指定する text-alignプロパティ