Webフォント設計の判断基準｜数値より先に考えるべきこと

:::note ※数値を決める前に読む「設計思想」記事です。各論は子記事へ。 :::

この記事の目的

フォント設計で最もよくある失敗は「数値から入る」こと。

「line-heightは1.8がいいらしい」「letter-spacingは0.05emが推奨」——こういう情報を集めても、実際のサイトで「なんか違う」となる。

**数値は文脈で決まる。**この記事では、数値を決める前の判断軸を整理する。

💡 すでに数値で悩んでいるなら → Font Preview で実際に試しながら調整

15年Webをやってきて、最も多く見た失敗がこれ。

海外のUIライブラリをそのまま使うと、line-height 1.4〜1.5 が適用される。日本語だと窮屈で、長文を読む気が失せる。

私は日本語本文では line-height 1.7 を基準にしている。迷ったらここに戻す。それで破綻したことはない。

欧文なら 1.5 で十分。日本語に同じ数値を使うと失敗する。

游ゴシックとNoto Sans JPでは、同じ 400/700 でも太さの印象が違う。游ゴシックは繊細で上品。Noto Sans JPは視認性重視でやや太め。

数値表を鵜呑みにすると、フォントを変えた瞬間に破綻する。

私はフォントを変えたら、行間・字間・ウェイトをゼロから見直す。面倒だが、これをサボると必ず後で直すことになる。

letter-spacingを触りたくなる気持ちはわかる。でも、日本語フォントは最初から適切な字間で設計されている。

私は日本語本文のletter-spacingを触らない。見出しで調整するとしても 0.03em まで。それ以上広げたくなったら、フォント選びを疑う。

無理に広げると「デザインしている感」だけが残る。読者には伝わらない。

これで困ったことはない。

/* ❌ 見出しと本文で最適値は違う */
* {
  letter-spacing: 0.1em;
  line-height: 1.8;
}

見出しは文字が大きいので、相対的に狭い行間でいい。本文と同じ行間だとバラバラに見える。

「line-height 1.8」「letter-spacing 0.05em」を覚えても、フォントが変われば、画面サイズが変われば、文脈が変われば、すべて変わる。

数値を覚えるのではなく、判断プロセスを覚える。

どんなに理論的に正しくても、実機で見て「読みにくい」なら間違っている。

私は必ずスマホ実機で長文を読む。PCモニターでは気づかない問題が見える。

目的別に選んでください。

数値を覚えるな。判断できるようになれ。

迷ったら line-height 1.7、letter-spacing 0、font-weight 400/700。ここに戻せば破綻しない。