文章の見た目は、フォントや色だけで決まるわけではありません。文字と文字のあいだの間隔（字間）や、英字を大文字・小文字に変換するといった細かな調整が、見出しやボタンの印象を大きく左右します。この記事では、字間を調整する letter-spacing、単語のあいだの幅を変える word-spacing、そして英字の大文字・小文字を切り替える text-transform の使い方を、初心者の方にも分かるように整理して解説します。
目次
letter-spacing で字間（文字と文字の間隔）を調整する
letter-spacing は、文字と文字のあいだに追加する間隔を指定するプロパティです。値には、初期値の normal のほか、2px のような絶対値、0.1em のような相対値、さらにマイナスの値も使えます。指定した分だけ字間が「追加」されるので、正の値なら字間が広がり、負の値なら詰まります。
.title {
/* 見出しの字間を少し広げて上品な印象に */
letter-spacing: 0.1em;
}
.tight {
/* 字間を詰めて引き締める（負の値） */
letter-spacing: -0.02em;
}px と em の違い
px で指定すると、フォントサイズに関係なく常に一定の間隔になります。一方 em は、その要素のフォントサイズを基準にした相対値です。たとえば 0.1em は、フォントサイズが 20px なら 2px、40px なら 4px の間隔になります。文字の大きさに応じて字間も比例させたいときは em が便利で、見出しなどサイズが変わりうる要素では em のほうが扱いやすいことが多いです。
下のデモでは、同じ英文に対して normal・0.3em・-1px の3種類を並べています。字間が広がったり詰まったりする様子を見比べてみてください。
<div class="box">
<p class="a">Welcome to Webool</p>
<p class="b">Welcome to Webool</p>
<p class="c">Welcome to Webool</p>
</div>.box {
font-family: sans-serif;
padding: 16px;
}
.box p {
margin: 0 0 12px;
font-size: 22px;
}
/* そのまま（初期値） */
.a {
letter-spacing: normal;
}
/* 字間を広げる */
.b {
letter-spacing: 0.3em; /* フォントサイズ基準で広げる */
}
/* 字間を詰める（負の値） */
.c {
letter-spacing: -1px; /* 少しだけ詰める */
}字間は最後の文字の後ろにも入る
意外と見落としがちなのが、letter-spacing で追加された間隔は、行の最後の文字のうしろ（trailing 側）にも入るという点です。そのため、字間を広げたテキストを中央寄せにすると、見た目がわずかに右寄りに感じられることがあります。ぴったり中央に見せたいときは、追加した字間の半分だけ左に padding を足す、あるいは text-indent で相殺するといった微調整を行うと整います。ボタンの左右パディングが均等に見えないときも、この trailing が原因であることがよくあります。
日本語（和文）に使うときの注意
letter-spacing は和文にも効き、すべての文字のあいだに均等な間隔が入ります。見出しをゆったり見せたいときには有効ですが、本文のような長い文章に大きな値を指定すると、かえって読みにくくなります。和文はもともと文字が詰まって並ぶため、0.05em 前後の控えめな値にとどめるのが無難です。なお、句読点や約物まわりの詰め（ツメ組み）を細かく制御したい場合は letter-spacing だけでは限界があり、別のプロパティやフォント機能が必要になります。
word-spacing で単語のあいだの幅を変える
word-spacing は、単語と単語のあいだ、つまり半角スペースの幅を調整するプロパティです。値の指定方法は letter-spacing と同じで、normal・絶対値・相対値・負の値が使えます。こちらも指定した分がスペースの幅に「追加」される仕組みです。
.lead {
/* 単語間を広げてゆったりした印象に */
word-spacing: 0.25em;
}日本語では効きにくい理由
word-spacing が対象にするのは、あくまで単語の区切りとしての半角スペースです。英語のように単語をスペースで区切って書く言語ではきれいに効きますが、日本語は単語のあいだにスペースを入れずに続けて書くため、間隔を広げる対象そのものが存在しません。そのため、和文の本文に word-spacing を指定してもほとんど見た目が変わらないのです。日本語で字と字の間隔を調整したいときは、単語間ではなく文字間を対象にする letter-spacing のほうを使います。
text-transform で大文字・小文字を切り替える
text-transform は、テキストの文字を大文字や小文字に変換して表示するプロパティです。ポイントは、HTML に書かれた元の文字はそのままで、あくまで「表示だけ」を変えているという点です。たとえば元のテキストが小文字でも、uppercase を指定すれば大文字で表示されます。よく使う値と効果を次の表にまとめます。
| 値 | 効果 |
|---|---|
none | 変換しない（初期値）。元のまま表示する |
uppercase | すべての英字を大文字にする |
lowercase | すべての英字を小文字にする |
capitalize | 各単語の先頭の文字を大文字にする |
full-width | 半角の英数字などを全角の形に整えて表示する |
下のデモでは、同じ「view more」というボタンのラベルに対して uppercase・capitalize・lowercase を適用しています。英字ボタンでは字間を少し広げる letter-spacing と組み合わせると、より締まった見た目になります。
<div class="box">
<button class="btn upper">view more</button>
<button class="btn cap">view more details now</button>
<button class="btn lower">VIEW MORE</button>
</div>.box {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
padding: 16px;
font-family: sans-serif;
}
.btn {
border: none;
background: #007bff;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
letter-spacing: 0.08em; /* 英字ボタンは少し字間を広げると締まる */
}
/* すべて大文字に */
.upper {
text-transform: uppercase;
}
/* 各単語の先頭だけ大文字に */
.cap {
text-transform: capitalize;
}
/* すべて小文字に */
.lower {
text-transform: lowercase;
}capitalize の「単語の先頭」の判定に注意
capitalize は各単語の先頭を大文字にしますが、ここでいう「単語」はスペースなどの区切りで分けられた文字のかたまりを指します。そのため、元のテキストの途中に大文字が混ざっていても、capitalize はそれを小文字に戻すことはしません。あくまで各単語の先頭を大文字に「引き上げる」だけで、2文字目以降には手を加えないのです。たとえば iPhone のような表記に capitalize を指定すると IPhone のようになり、意図した表記にならないことがあります。すべて大文字・小文字にそろえたいときは uppercase や lowercase を使い、頭文字だけを大文字にしたい英文の見出しなどに capitalize を使う、と役割を分けて考えると分かりやすいです。
表示だけを変える点をおさえる
text-transform はあくまで見た目の変換であり、コピーして貼り付けたテキストや、ページの検索、スクリーンリーダーが読み上げる内容には元の文字が使われます。つまり、大文字で見えているからといって元データが大文字になるわけではありません。データとして正しい表記を保ちつつ、表示だけを整えられるのがこのプロパティの利点です。逆に、大文字で保存したいような場面ではこのプロパティは使えないので、その点は区別しておきましょう。
デザインでの実用例
これらのプロパティは、単独よりも組み合わせて使う場面が多くあります。たとえば英字の小見出しを text-transform: uppercase で大文字にしつつ、letter-spacing でわずかに字間を開けると、雑誌の見出しのような落ち着いた印象になります。大文字は文字がぎゅっと詰まって見えやすいので、字間を少し足すことで読みやすさと見た目のバランスが取れるためです。
また、和文の見出しでは letter-spacing を 0.08em ほど足すだけで、余白にゆとりが生まれて上質な雰囲気になります。ボタンのラベルを英字にする場合は、text-transform で表記のゆれを吸収しつつ字間を整えると、テキストがどんな大文字・小文字で書かれていても見た目が安定します。いずれも値を入れすぎると読みにくくなるため、まずは小さな値から試し、実際の画面で確認しながら微調整するのがコツです。
まとめ
letter-spacing は文字どうしの間隔を、word-spacing は単語（半角スペース）の間隔を調整するプロパティで、どちらも指定した分が間隔に追加されます。em はフォントサイズ基準になること、letter-spacing は最後の文字の後ろにも間隔が入ること、日本語では word-spacing が効きにくいことをおさえておくと、意図どおりに調整できます。text-transform は表示上の大文字・小文字を切り替えるもので、capitalize は各単語の先頭だけを大文字にする挙動が特徴です。細かなプロパティですが、見出しやボタンの仕上がりを一段引き上げてくれるので、ぜひ実際に値を変えながら感覚をつかんでみてください。