DESIGN

行間計算機 — 読みやすさのための最適なline-height

行間(line-height)はタイポグラフィで最も影響力のある設定の一つです。狭すぎると窮屈、広すぎるとテキストが分断されます。計算機で最適な値を見つけましょう。

推奨line-height値

本文テキスト:1.4〜1.6(140〜160%)。見出し:1.1〜1.3(110〜130%)——小さな見出しほど多くの行間が必要。狭いUIコンポーネント内のテキスト:1.2〜1.4。スケーラビリティのため常に単位なし値(24pxではなく1.5)を使用してください。

行の長さと行間

長い行は読みやすさのためにより多くの行間を必要とします。最適な行の長さは1行60〜80文字。広い列では行間を1.6〜1.8に増やします。行の長さと行間は良いタイポグラフィに欠かせない要素として密接に関連しています。

垂直リズム

垂直リズムはすべての要素を一貫したグリッドに合わせます。ベースの行間(例:24px)を設定し、すべてのスペーシングにその倍数を使用します。レスポンシブWebフォントで厳密な垂直リズムを実現するのは難しいですが、意図することで秩序が生まれます。