読みやすさ

タイポグラフィと単位

心地よい「読み体験」を作るためのフォント設定と、柔軟な単位の使い分け

文字はWebの主役

Webサイトのコンテンツの90%以上はテキスト情報です。タイポグラフィ（文字のデザイン）を疎かにすると、どんなに装飾が綺麗でも「読みづらい」「安っぽい」サイトになってしまいます。ここでは、プロが実践している文字と単位の選び方を解説します。

まずは「読みやすさ」を確保するためのプロパティです。

ゴシック体（sans-serif）か明朝体（serif）かを指定します。Webでは可読性の高いゴシック体（sans-serif）が一般的です。

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

見出しは太く（700）、本文は普通（400）が基本です。細かく指定できるフォントもあります。

ここが一番のポイントです。デフォルトの行間は狭すぎるため、**1.5〜2.0** 程度に広げるだけで、一気に洗練された印象になります。

p {
    line-height: 1.8; /* 推奨設定 */
}

CSSには多くの単位がありますが、現代のWeb制作では以下の使い分けがセオリーです。

絶対単位。線幅やボーダーなど、サイズを変えたくない部分に使います。文字サイズに使うと、ユーザーのブラウザ設定を無視してしまうため、最近は避けられる傾向にあります。

相対単位。HTMLルート要素のサイズ（通常16px）を「1rem」とします。レスポンシブ対応やアクセシビリティの観点から、**文字サイズや余白はremを使うのが世界標準**です（例: 1.5rem = 24px）。

親要素のサイズを基準にします。ボタンの内側の余白など、親の文字サイズに連動させたい場合に便利ですが、計算が複雑になりがちなので多用は禁物です。

レイアウト用です。`vw`（画面幅の1%）を使うと、画面サイズに合わせて文字を巨大化させるといったダイナミックな表現が可能です。

スマホとPCで文字サイズを変えたい場合は、メディアクエリを使います。しかし、`clamp()` 関数を使うと、複雑な指定なしに「最小サイズ・推奨サイズ・最大サイズ」をまとめて定義できます。

h1 {
    /* 最小24px, 画面幅の5%, 最大64px の間で滑らかに変化 */
    font-size: clamp(1.5rem, 5vw, 4rem);
}

単位の使い分けは最初は混乱するかもしれませんが、**「文字と余白は rem、線や細かい調整は px」** と覚えておけば大丈夫です。美しいタイポグラフィで、ユーザーに快適な読書体験を提供しましょう。