日本語の Web タイポグラフィで気をつけていること

日本語の文章は、英語向けに作られた CSS のデフォルト値のままだと窮屈に見えがちです。このブログで設定している値と、その理由を紹介します。

行間は広めに

漢字とかなが詰まって見えないよう、本文の line-height は 1.9〜2.0 程度にしています。英語の 1.5 前後と比べるとかなり広めですが、日本語ではこのくらいがちょうど良く感じます。

同じ文章を狭い行間と広い行間で比較し、行間と本文幅の目安を示した図

同じ文でも、行間によって見え方が変わります。図は比較のための短い例で、35〜45文字の実寸見本ではありません。値はフォントや画面幅に合わせて調整します。

1 行が長すぎると、次の行の頭を探すのに目が迷います。本文の幅は 42rem 程度に抑えています。

見出しのような大きな文字では、約物（括弧や句読点）の余白が目立ちます。font-feature-settings: 'palt' でプロポーショナルな字詰めにすると、引き締まった印象になります。

h1,
h2,
h3 {
  font-feature-settings: 'palt' 1;
}

欧文フォントを先に、和文フォントを後に指定すると、英数字は欧文フォントの美しい字形で表示されます。

body {
  font-family: 'DM Sans', 'Noto Sans JP', sans-serif;
}