【入門編】letter-spacingとword-spacingによる文字間隔の調整 – HTML実践ガイド

なんだか文字が窮屈？CSSで「余白」を操って、プロ並みのタイポグラフィを手に入れよう

Webサイトを作っているとき、「なんだか文字がぎゅうぎゅう詰めに見えるな……」とか、「もっと余裕のある、洗練されたデザインにしたいな」と感じたことはありませんか？

実は、プロのデザイナーが手がける美しいWebサイトの秘密は、大きなレイアウトだけではなく、「文字と文字の間のわずかな隙間」を丁寧に調整していることにあります。

今日は、CSSの`letter-spacing`（文字間隔）と`word-spacing`（単語間隔）という、魔法のようなプロパティを使って、読みやすい画面を作るコツをお話ししますね。難しく考える必要はありません。一緒に楽しく学んでいきましょう！

—

まずは`letter-spacing`です。これは、文字と文字の間に隙間を入れるプロパティです。

例えば、高級なカフェのメニューや、洗練されたブランドの広告を思い出してみてください。文字と文字の間が少しだけ広く空いていて、ゆったりとした雰囲気を感じませんか？あれは、この`letter-spacing`の仕業なんです。

使い方はとても簡単です。CSSで対象となる要素（`span`や`strong`など）を指定するだけです。

.catchphrase {
/ 文字と文字の間を少し広げます /
/ 0.1emは「その文字のサイズの10%分」という指定の仕方です /
letter-spacing: 0.1em;
}

【ちょっとしたコツ】
`px`で指定することもできますが、`em`を使うのがおすすめです。`em`を使うと、「その文字の大きさに合わせて自動的にちょうどいい隙間」を計算してくれるので、文字サイズを変えてもデザインが崩れにくいんです。

—

次に`word-spacing`ですが、こちらは「単語と単語の間」を広げるものです。

「え、日本語には単語の区切りがないけど？」と思ったあなた、鋭いですね！実はこのプロパティ、英語のようなアルファベット文化圏の文章で真価を発揮します。

例えば、海外のWebサイトを制作するときや、`span`タグで囲った英単語を並べる際、単語の間を少し空けてあげると、グッと読みやすくなります。

.english-text {
/ 単語と単語の間に隙間を作ります /
word-spacing: 5px;
}

日本語で使うことは少ないかもしれませんが、「横並びのボタンの隙間を少し広げたい」といった時に応用できることもあるので、頭の片隅に入れておくと便利ですよ。

—

それでは、実際に`span`タグを使って、文字の間隔を調整するサンプルを見てみましょう。

普通の文字は、なんだか少し窮屈に見えるかもしれません。

でも、こうして少し隙間を作ると、なんだかオシャレに見えませんか？

/ CSS部分 /
.special-text {
/ 全体の文字間隔を少し広げて上品に /
letter-spacing: 0.05em;
}

.special-text span {
/ spanで囲った部分だけ、さらに単語間隔を広げて強調 /
word-spacing: 10px;
font-weight: bold;
}

このように、`span`タグで囲った部分だけに`letter-spacing`を適用することで、見出しや強調したい一言をぐっと引き立たせることができます。

—

ここまで読んで「どれくらいの数値が正解なんだろう？」と不安になった方もいるかもしれません。でも、大丈夫ですよ。デザインに「絶対的な正解」はありません。

大切なのは、ブラウザで表示を確認して、自分の目で「心地よいか」を確かめることです。少しずつ数値をいじって、自分なりの「黄金比」を見つけてみてください。

もし、思った通りの間隔にならなくても焦らないでくださいね。それは「あと一歩で素敵なサイトになる」というサインです。一つずつ丁寧に調整していけば、必ずあなたの理想の画面が作れるようになりますよ！

それでは、素敵なWeb制作ライフを。また次回の記事でお会いしましょう！