日本語本文の line-height と letter-spacing の目安
欧文前提の値（line-height 1.4〜1.5）をそのまま日本語に使うと詰まって見える。日本語本文は line-height 1.7〜2.0、letter-spacing 0.04〜0.1em が目安。
どんな時に使う？
- 海外のデザインシステムや AI 向けデザインルール（DESIGN.md など）を日本語サイトに流用するとき。
- 日本語の本文が「なんとなく読みにくい・窮屈」と感じるとき。
コード
css
:root {
/* 和文フォントを明示する（欧文フォントだけの指定にしない） */
font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}
body {
line-height: 1.8; /* 日本語本文: 1.7〜2.0 */
letter-spacing: 0.05em; /* 日本語本文: 0.04〜0.1em */
}
h1, h2, h3 {
line-height: 1.4; /* 見出しは詰め気味で OK */
letter-spacing: 0.02em;
}注意点
- 数値はあくまで出発点。フォント・文字サイズ・行長で最適値は変わるので実機で確認する。
letter-spacingは末尾の文字の後ろにも付くため、中央寄せのボタン等で右にずれて見えることがある。- 和欧混植の隙間は
text-autospace（対応ブラウザのみ）でも調整できる。
出典
- @kuzzken · 2026-04-06 （日本語版 DESIGN.md「awesome-design-md-jp」の紹介投稿）