CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － letter-spacing最適化

Web APP CSS
スポンサーリンク

letter-spacing（字間調整）は「読みやすさ」と「デザインの質」を決める重要パラメータ

特に日本語は欧文よりも字面が大きく、フォントによっても見え方が大きく変わるため、
適切な letter-spacing を設定するだけで、文章の読みやすさが劇的に変わります。

ここでは、初心者でも迷わないように
CSS と Tailwind CSS の両方で、例題を交えて丁寧に解説します。

letter-spacing の基本：単位は「em」で指定するのが鉄則

なぜ em が良いのか

letter-spacing は 文字サイズに比例して変わるべき だからです。

  • 文字が大きい → 字間も少し広く
  • 文字が小さい → 字間は狭く

px で固定すると、文字サイズを変えたときに不自然になります。
em なら「フォントサイズ × 倍率」で自然にスケールします。

例1：日本語本文の最適な letter-spacing

CSS 版

p {
  font-size: 1rem;
  letter-spacing: 0.03em; /* 日本語は少し広げると読みやすい */
  line-height: 1.7;
}
CSS

Tailwind 版（任意値）

<p class="text-base leading-relaxed tracking-[0.03em]">
  日本語の本文は、少しだけ字間を広げると読みやすくなります。
</p>
HTML

深掘りポイント
日本語はデフォルトだと字間が詰まり気味で、
0.02〜0.05em 程度広げると読みやすさが大幅に向上します。

例2：見出しは「少し詰める」と締まりが出る

CSS 版

h1 {
  font-size: 2rem;
  letter-spacing: -0.01em; /* 見出しは少し詰めると美しい */
  font-weight: 700;
}
CSS

Tailwind 版

<h1 class="text-3xl font-bold tracking-[-0.01em]">
  見出しタイトル
</h1>
HTML

深掘りポイント
見出しは大きく表示されるため、
字間が広いと「間延びした印象」になります。
-0.01em〜-0.03em 程度で軽く詰めると、
デザインが引き締まり、プロっぽい見た目になります。

例3：英字ロゴ・ブランド名は「強めに詰める」

CSS 版

.logo {
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  letter-spacing: -0.05em;
  font-weight: 700;
}
CSS

Tailwind 版

<div class="font-bold text-4xl tracking-[-0.05em]">
  BRAND
</div>
HTML

深掘りポイント
欧文ロゴは字間を詰めることで
「高級感」「ブランド感」が出ます。
特に ALL CAPS（全部大文字）の場合は効果が大きいです。

例4：UI ボタンは「少し広げる」と押しやすく見える

CSS 版

.button {
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 0.75em 1.5em;
}
CSS

Tailwind 版

<button class="px-6 py-3 text-base tracking-[0.04em] bg-blue-600 text-white rounded">
  ボタン
</button>
HTML

深掘りポイント
ボタンの文字は少し広げると「押しやすい」「親しみやすい」印象になります。
特に UI デザインでは 0.03〜0.06em がよく使われます。

例5：数字は「詰める」と整って見える

CSS 版

.price {
  font-size: 2rem;
  letter-spacing: -0.02em;
  font-weight: 700;
}
CSS

Tailwind 版

<div class="text-3xl font-bold tracking-[-0.02em]">
  ¥12,800
</div>
HTML

深掘りポイント
数字は字面が均一なので、
少し詰めると「揃って見える」「高級感が出る」効果があります。

letter-spacing の最適値（ここが一番大事）

日本語本文

0.02〜0.05em
→ 読みやすさが大幅に向上

日本語見出し

-0.01〜0.02em
→ 締まりが出る

欧文見出し・ロゴ

-0.03〜-0.08em
→ ブランド感・高級感

UI ボタン

0.03〜0.06em
→ 押しやすく見える

数字

-0.01〜-0.03em
→ 揃って見える

Tailwind の letter-spacing（tracking）クラス一覧

Tailwind にはプリセットがあります。

tracking-tighter   = -0.05em
tracking-tight     = -0.025em
tracking-normal    = 0
tracking-wide      = 0.025em
tracking-wider     = 0.05em
tracking-widest    = 0.1em

ただし、日本語では微調整が必要なため、
tracking-[0.03em] のように任意値を使うのが実務的です。

実務テンプレート：日本語サイト向けタイポグラフィセット

CSS 版

body {
  font-size: 1rem;
  letter-spacing: 0.03em;
  line-height: 1.7;
}

h1 {
  font-size: 2rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.5rem;
  letter-spacing: -0.005em;
}

button {
  letter-spacing: 0.04em;
}
CSS

Tailwind 版

<h1 class="text-3xl font-bold tracking-[-0.01em]">見出し1</h1>
<h2 class="text-2xl font-semibold tracking-[-0.005em]">見出し2</h2>
<p class="text-base leading-relaxed tracking-[0.03em]">
  日本語本文は少し広げると読みやすくなります。
</p>
<button class="px-6 py-3 bg-blue-600 text-white tracking-[0.04em] rounded">
  ボタン
</button>
HTML

まとめ

letter-spacing は
読みやすさ・高級感・UI の印象を左右する重要なタイポグラフィ要素 です。

ポイントは次の通りです。

  • 日本語本文は少し広げる（0.02〜0.05em）
  • 見出しは少し詰める（-0.01〜-0.03em）
  • 欧文ロゴは強めに詰める（-0.05em 前後）
  • UI ボタンは広げる（0.03〜0.06em）
  • Tailwind は tracking-[…] で微調整が最適

スポンサーリンク
タイトルとURLをコピーしました