Documentation CSS

概要

CSSのletter-spacingプロパティは、文字（グリフ）間の水平方向のスペースを調整するためのプロパティです。文字の間隔を広げたり狭めたりすることで、テキストの読みやすさやデザインの美しさを向上させることができます。特に見出しやタイトルのスタイル調整に効果的で、細かいタイポグラフィの調整にも欠かせません。

letter-spacingとword-spacingの違い

タイポグラフィの調整には、似たようなプロパティがあります。

プロパティ対象効果
letter-spacing文字間各文字の間隔を調整
word-spacing単語間スペース（空白）の幅を調整
.text-1 {
  letter-spacing: 2px; /* 文字と文字の間隔 */
}

.text-2 {
  word-spacing: 10px; /* 単語と単語の間隔 */
}

視覚的な違い：

letter-spacing: H e l l o   W o r l d
word-spacing:   Hello          World

letter-spacingの基本構文

selector {
  letter-spacing: <length> | normal;
}

デフォルト値

.element {
  letter-spacing: normal; /* 初期値：フォントの通常の文字間隔 */
}

基本的な使用例

/* 正の値：文字間を広げる */
.heading {
  letter-spacing: 2px;
}

/* 負の値：文字間を狭める */
.logo {
  letter-spacing: -1px;
}

/* 相対単位 */
.subtitle {
  letter-spacing: 0.1em;
}

値の種類と使い分け

normal（初期値）

フォントのデフォルトの文字間隔を使用します。

.text {
  letter-spacing: normal;
}

長さ（<length>）

px（ピクセル）- 絶対単位

.heading {
  letter-spacing: 3px; /* 各文字間に3px追加 */
}

用途：デザインカンプ通りの正確な間隔

em - 相対単位（フォントサイズ基準）

.text {
  font-size: 20px;
  letter-spacing: 0.1em; /* 2px（20pxの10%） */
}

用途：レスポンシブデザイン、フォントサイズに比例

rem - 相対単位（ルートフォントサイズ基準）

.text {
  letter-spacing: 0.05rem; /* ルートフォントサイズの5% */
}

用途：サイト全体で一貫した間隔

負の値

文字を密集させます。

.compact-text {
  letter-spacing: -0.5px; /* 文字間を狭める */
}

注意：可読性が低下する可能性があります。

値の比較表

値フォントサイズ16px時用途
normalデフォルト通常のテキスト
1px1px追加見出し、強調
0.1em1.6px追加レスポンシブ見出し
-0.5px0.5px減少コンパクトなロゴ
0.2em3.2px追加大きな見出し

実践的な使用例

例1：見出しの強調

h1 {
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 2px; /* 文字間を広げて高級感を演出 */
  text-transform: uppercase;
}

h2 {
  font-size: 32px;
  letter-spacing: 1px;
}

h3 {
  font-size: 24px;
  letter-spacing: 0.5px;
}

例2：ナビゲーションメニュー

.nav-link {
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  transition: letter-spacing 0.3s;
}

.nav-link:hover {
  letter-spacing: 2.5px; /* ホバー時に間隔を広げる */
}

例3：ロゴデザイン

.brand-logo {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1.5px; /* 密集させて独自性を */
  text-transform: uppercase;
}

例4：引用文

.quote {
  font-size: 24px;
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #555;
}

例5：小さなテキストの視認性向上

.caption {
  font-size: 12px;
  letter-spacing: 0.5px; /* 小さい文字を読みやすく */
  color: #666;
}

レスポンシブデザインでの使用

.hero-title {
  font-size: 32px;
  letter-spacing: 1px;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 48px;
    letter-spacing: 2px;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 64px;
    letter-spacing: 3px;
  }
}

アクセシビリティへの配慮

推奨される範囲

WCAG（Web Content Accessibility Guidelines）では、読みやすさのため以下を推奨しています。

/* ✅ 推奨：適度な間隔 */
.text {
  letter-spacing: 0.12em; /* 約12% */
}

/* ❌ 避ける：極端な値 */
.bad-spacing {
  letter-spacing: 10px; /* 読みづらい */
  letter-spacing: -3px; /* 文字が重なる */
}

ディスレクシアへの対応

読字障害（ディスレクシア）を持つユーザーのため、適度な文字間隔が重要です。

.accessible-text {
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
  line-height: 1.5;
}

ブラウザサポート

letter-spacingは、すべてのモダンブラウザで完全にサポートされています。

ブラウザバージョン
Chrome1+
Firefox1+
Safari1+
Edge12+
Opera3.5+

ベストプラクティス

1. フォントサイズに応じた調整

/* 大きな見出しは広めに */
.large-heading {
  font-size: 48px;
  letter-spacing: 2px;
}

/* 小さなテキストは控えめに */
.small-text {
  font-size: 12px;
  letter-spacing: 0.3px;
}

2. 相対単位の活用

/* emを使用してスケーラブルに */
.responsive-heading {
  letter-spacing: 0.05em;
}

3. text-transformとの組み合わせ

.uppercase-title {
  text-transform: uppercase;
  letter-spacing: 2px; /* 大文字は間隔を広げると美しい */
}

4. 適度な範囲に収める

/* 一般的な推奨範囲 */
.heading {
  letter-spacing: 1px ~ 5px; /* 見出し */
}

.body-text {
  letter-spacing: 0px ~ 1px; /* 本文 */
}

トラブルシューティング

問題1：文字が重なる

原因：負の値が大きすぎる

解決策：

/* ❌ */
.text {
  letter-spacing: -5px;
}

/* ✅ */
.text {
  letter-spacing: -0.5px;
}

問題2：テキストが読みづらい

原因：間隔が広すぎる

解決策：

/* ❌ */
.text {
  letter-spacing: 10px;
}

/* ✅ */
.text {
  letter-spacing: 1px ~ 3px;
}

問題3：モバイルで見づらい

原因：固定値を使用

解決策：

/* emやremを使用 */
.text {
  letter-spacing: 0.05em;
}

注意点

1. 本文テキストへの適用は慎重に

/* ❌ 本文には過度な調整を避ける */
p {
  letter-spacing: 5px;
}

/* ✅ 見出しやアクセントに使用 */
h1 {
  letter-spacing: 2px;
}

2. 負の値の使用は最小限に

/* 負の値は慎重に */
.logo {
  letter-spacing: -0.5px; /* 控えめに */
}

3. フォントによって効果が異なる

/* フォントごとに調整 */
.serif-font {
  font-family: Georgia, serif;
  letter-spacing: 0.03em;
}

.sans-serif-font {
  font-family: Arial, sans-serif;
  letter-spacing: 0.05em;
}

関連プロパティ

letter-spacingと一緒に使用されることが多いプロパティです。

テキスト間隔関連

  • word-spacing：単語間の間隔を調整
  • line-height：行の高さを調整
.text {
  letter-spacing: 0.05em; /* 文字間 */
  word-spacing: 0.1em; /* 単語間 */
  line-height: 1.6; /* 行間 */
}

テキストスタイル関連

  • text-transform：大文字・小文字変換
  • font-weight：フォントの太さ
.heading {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
}

まとめ

letter-spacingプロパティは、文字間の水平方向のスペースを調整するための重要なCSSプロパティです。

主な特徴

  1. 柔軟な調整：正の値で広げ、負の値で狭める
  2. 多様な単位：px、em、rem など
  3. タイポグラフィ制御：デザインの印象を大きく変える

よく使われる値

用途推奨値
大見出し1px ~ 3px または 0.05em ~ 0.15em
小見出し0.5px ~ 2px または 0.03em ~ 0.1em
ナビゲーション1px ~ 2px
本文テキストnormal または 0px ~ 0.5px
ロゴ-1px ~ -0.5px（コンパクトに）

覚えておくべきポイント

  • 見出しに効果的：大きなテキストほど効果が顕著
  • 本文は慎重に：過度な調整は可読性を下げる
  • 相対単位を推奨：emやremでレスポンシブに対応
  • アクセシビリティ：0.12em程度が読みやすい
  • text-transformと併用：大文字化時は間隔を広げる
  • 負の値は最小限：文字の重なりに注意

letter-spacingプロパティを適切に使用することで、タイポグラフィの質を向上させ、デザイン性と可読性を両立できます。

参考リンク

参照:

letter-spacing - CSS: カスケーディングスタイルシート | MDN

参照:

letter-spacing - CSS: Cascading Style Sheets | MDN

参照:

CSS Text Module Level 3 - W3C

参照:

WCAG 2.1 - Text Spacing | W3C
円