CreaTools LogoCreaTools
Tech Notes
Font Preview

letter-spacing（字間）の調整ガイド｜触る前に知るべきこと

2025-10-28

:::note ※字間を調整すべきか迷っている人向けの「判断用」記事です :::

結論（私の判断基準）

  • 日本語本文：触らない（0 のまま）
  • 見出し：0.02〜0.05em まで。0.1em 以上は広げすぎ
  • 迷ったら：広げない。広げすぎは取り返しがつかない

💡 実際に試したい → Font Preview で目視確認

よくある失敗（私が実際にやった）

失敗1：「高級感」を出そうとして広げすぎた

/* ❌ 私がやった失敗 */
h1 {
  letter-spacing: 0.15em;
}

クライアントから「なんかスカスカに見える」と言われた。

高級感を出したかったが、広げすぎると「デザインしている感」だけが残る。今は 0.03〜0.05em を上限にしている。

失敗2：本文を詰めて「モダン」にしようとした

/* ❌ 読みにくくなった */
body {
  letter-spacing: -0.03em;
}

欧文サイトの真似をした。日本語は文字が正方形に近いので、詰めると窮屈で長文が読めなくなる。

**日本語本文はマイナス値禁止。**これは私の中で絶対ルール。

失敗3：全体に一律適用した

/* ❌ 見出しも本文も同じ値 */
* {
  letter-spacing: 0.1em;
}

見出しは良かったが、本文が読みにくくなった。要素ごとに適切な値は違う。

調整が必要になる「兆候」

letter-spacingを触るべき場面は限られている。

兆候対応
大きな見出しが「詰まって」見える0.02〜0.05em 広げる
ボタンの文字が「窮屈」に見える0.05〜0.08em 広げる
欧文の大文字が読みにくい0.05〜0.1em 広げる
本文が「読みにくい」気がするletter-spacingではなくline-heightを疑う

最後の項目が重要。「読みにくい」と感じたとき、字間より行間が原因であることが多い。

用途別の目安

用途私の設定備考
本文0触らない
見出し0.02〜0.05em0.05em を超えることはほぼない
キャプション0小さい文字は広げると余計読みにくい
ボタン・ラベル0.05〜0.08em視認性が必要な場合のみ
ロゴ・タイトルデザイン次第ここだけは自由に

日本語と欧文の違い

言語私の設定理由
日本語触らないフォント側で最適化済み
欧文やや広げてもOK文字幅がバラバラ、調整前提の設計

日本語フォントは最初から適切な字間で設計されている。触らないのが正解。

実装パターン

/* 私が実際に使っている設定 */

/* 本文: 触らない */
body {
  letter-spacing: 0;
}

/* 見出し: 控えめに広げる */
h1, h2, h3 {
  letter-spacing: 0.03em;
}

/* ボタン: 視認性重視 */
.btn {
  letter-spacing: 0.06em;
}

迷ったときの判断

迷い私の判断
広げるか迷う広げない
どのくらい広げるか迷う0.03em から始める
本文を詰めたい絶対にやらない

**迷ったら触らない。**letter-spacingは「必要なときだけ触る」プロパティ。

この記事で解決しない場合

letter-spacingは「必要なときだけ触る」プロパティ。迷ったら触らない。それで困ったことはない。