タイポグラフィを「神」の領域へ。`letter-spacing` と `word-spacing` で創る洗練されたUIの作法
フロントエンド開発の現場で、デザインカンプを再現する際、多くのエンジニアが「なんとなく」スルーしてしまう領域がある。それが「文字間隔」だ。
Figmaで指定された数値をそのままCSSに落とし込んでも、なぜか本番環境で見た時に「素人っぽさ」が抜けない。そんな経験はないだろうか？ 今回は、インライン要素における `letter-spacing` と `word-spacing` の制御という、タイポグラフィの解像度を一段階引き上げる技術について、現場の知見を交えて深掘りしていく。
1. `letter-spacing`：文字間隔の最適化と「計算の罠」
`letter-spacing` は、テキストの文字間に余白を挿入するプロパティだ。一見単純だが、ここにはブラウザのレンダリングエンジンが抱える「インライン要素の挙動」という罠が潜んでいる。
なぜ `letter-spacing` は「ズレ」を生むのか
ブラウザは `letter-spacing` を適用する際、文字の右側にその分の余白を追加する。問題は、「最後の文字の右側」にも余白が適用されてしまう点だ。
例えば、`display: flex` で中央揃えをしている要素に `letter-spacing` を入れると、文字全体がわずかに右にオフセットされ、視覚的なセンター位置が微妙にズレる。この数ピクセルの歪みが、神経質なUIデザイナーの目に留まり、「なんか違う」というフィードバックを生む原因になる。
実践的な解決策：ネガティブマージンという「職人芸」
この「最後の余白」を相殺し、視覚的な中央揃えを維持するための定番テクニックがこれだ。
.letter-spacing-fix {
/ 0.1em の文字間隔を設定 /
letter-spacing: 0.1em;
/ 最後の文字の余白分をネガティブマージンで打ち消す /
margin-right: -0.1em;
}
これで、インライン要素をコンテナの中央に配置した際に、物理的な余白と視覚的なバランスが一致するようになる。
2. `word-spacing`：単語間の余白を操る技術
`word-spacing` は、スペース（空白文字）で区切られた単語間の距離を制御する。多言語対応（i18n）が求められる現代のWebアプリにおいて、英語と日本語が混在する UI では特に重要だ。
実務で使える活用シーン
日本語は単語間にスペースを置かないため `word-spacing` は無縁に思われがちだが、実は英語の長文や、英語UIのボタン、見出しの微調整には欠かせない。
特に、`justify`（両端揃え）と組み合わせることで、単語間の間隔を動的に制御し、行末の不自然な空きを埋めるような、雑誌のような組版を再現できる。
.refined-text {
/ 単語間の間隔をあえて広めに取り、ゆったりとした高級感を出す /
word-spacing: 0.25em;
/ 英文の可読性を高めるための組み合わせ /
line-height: 1.6;
font-family: ‘Inter’, sans-serif;
}
3. 実装のベストプラクティス：レスポンシブなタイポグラフィ
画面幅が狭いスマホで見出しが窮屈に見えるなら、メディアクエリで文字間隔を調整するのは「現場の常識」だ。
.heading-text {
font-size: 2rem;
letter-spacing: 0.05em; / デスクトップでは少し広めに /
@media (max-width: 768px) {
/ スマホでは間隔を詰め、画面幅を有効活用する /
letter-spacing: 0.02em;
}
}
最後に：フォントという「素材」への敬意
エンジニアが CSS で文字間隔を調整する際、忘れてはならないことがある。それは「フォント本来のカーニング（詰め）を破壊していないか？」という視点だ。
`letter-spacing` を過度にかけると、フォントデザイナーが何百時間もかけて調整した文字間のバランスが崩れる。タイポグラフィの鉄則は「まずはフォントそのままの美しさを信じること」。その上で、画面の解像度や特定のUI要素に合わせて、スパイスとして微調整を加えるのが、真にプロフェッショナルなフロントエンドエンジニアの仕事と言えるだろう。
今日からコードを書くときは、`letter-spacing` を `0.05em` 足したその瞬間の、文字の表情の変化にぜひ注目してみてほしい。その「こだわり」の積み重ねが、プロダクトの品格を決定づけるのだから。
コメント