Webサイトの印象の9割は「文字」で決まると言っても過言ではありません。 どんなに素晴らしい内容が書かれていても、文字が小さすぎたり、行間が詰まりすぎていたりすると、読者は一瞬でページを閉じてしまいます。
逆に、文字の大きさにメリハリがあり、適切な余白が保たれたサイトは、それだけで「プロっぽさ」と「信頼感」を感じさせます。
本記事では、CSSで文字を操るための3大プロパティ font-size（大きさ）、font-weight（太さ）、line-height（行間） について、基本から実務レベルのテクニックまで解説していきます。
文字の大きさを決める「font-size」の基本と単位の選び方
CSSで文字サイズを指定するのが font-size プロパティです。しかし、初心者が最も悩むのが「どの単位（px, rem, em, %）を使えばいいのか？」という点です。
px（ピクセル）：絶対的なサイズ指定
16px のように、画面上のドット数で指定します。
- メリット：直感的で、デザインカップ通りのサイズを正確に再現できる。
- デメリット：ユーザーがブラウザの設定で文字サイズを大きくしても、サイズが固定されてしまうため、アクセシビリティの観点からは推奨されません。
rem（レム）：現代の標準的な指定
root rem の略で、HTMLのルート要素（通常はブラウザの標準設定である 16px）を基準とした相対的な単位です。
- 例： 1rem = 16px, 1.5rem = 24px
- メリット：ユーザーの設定に合わせてサイズが柔軟に変わるため、現在のWeb制作では「pxよりもremを使う」のがスタンダードです。
em（エム）と%（パーセント）
親要素のサイズを基準にします。特定のエリア内（ボタンの中の文字など）で、親要素とのバランスを保ちたい時に限定的に使われます。
文字の太さでメリハリをつける「font-weight」
情報の重要度を視覚的に伝えるのが font-weight プロパティです。
キーワードによる指定
最もよく使われるのが以下の2つです。
- normal：通常の太さ（400相当）
- bold：太字（700相当）
数値による指定（100~900）
フォントが対応していれば、100刻みの数値で細かく指定できます。
- 400：本文で使われる標準的な太さ。
- 700：見出しなどで使われる力強い太さ。
注意点：フォント自体が太さを持っていない場合
CSSで font-weight: 900 と指定しても、そのフォントに「極太」のデータが含まれていない場合は、ブラウザが無理やり太く見せる「擬似太字」になり、文字が潰れて見えることがあります。使用するフォントがどの太さに対応しているか確認しましょう。
読みやすさを左右する最重要項目「line-height」
「行間」を調整するのが line-height プロパティです。実は、Webデザインにおいて文字サイズ以上に「読みやすさ」に影響を与えるのがこの項目です。
推奨される指定方法：単位なしの数値
line-height には px や % も使えますが、「単位なしの数値」で指定するのが鉄則です。
- 良い例：line-height: 1.6;
- 理由：文字サイズが変わっても、そのサイズに対する倍率で自動計算されるため、レイアウトが崩れにくくなります。
黄金の行間は「1.5〜1.8」
日本語の文章において、最も読みやすいと言われる数値は 1.5〜1.8 の間です。
- 1.0：行間が全くなく、文字が上下でくっついてしまい非常に読みづらい。
- 1.6：標準的で最も疲れにくい。
- 2.0以上：ゆったりとした印象を与えるが、広すぎると視線の移動距離が伸びて読みづらくなる。
タイポグラフィの「ジャンプ率」を意識する
初心者のサイトが「なんだか野暮ったい」と感じる原因の多くは、見出しと本文のサイズの差（ジャンプ率）が小さいことにあります。
ジャンプ率とは？
本文に対する見出しの大きさの比率のことです。
- ジャンプ率が高い： 見出しが非常に大きく、本文が標準的。元気で活動的な印象になり、どこに何が書いてあるか一目で分かります。
- ジャンプ率が低い： サイズ差が少ない。上品で落ち着いた、高級感のある印象になりますが、情報の区別はつきにくくなります。
具体的な数値の目安
一般的なブログ記事であれば、以下のようなバランスを基準に微調整するのがおすすめです。
- h1（記事タイトル）：2.0rem 〜 2.5rem
- h2（大見出し）：1.75rem 〜 2.0rem
- 本文：1.0rem（約16px）
デバイスごとに最適なサイズを切り替える（レスポンス）
PCで読みやすいサイズが、スマホでも読みやすいとは限りません。
スマホでの文字サイズ設定
スマホは画面と目の距離が近いため、PCよりも少しだけ文字サイズを大きく、または行間を広く取ることが一般的です。
- PC本文： 16px
- スマホ本文： 16px 〜 17px（最近は17pxを採用するサイトも増えています）
メディアクエリの活用
CSSのメディアクエリを使って、画面幅に合わせて数値を調整します。
/* 基本（スマホ向け） */
body {
font-size: 1.06rem; /* 約17px */
line-height: 1.7;
}
/* PC向け */
@media (min-width: 768px) {
body {
font-size: 1rem; /* 約16px */
line-height: 1.6;
}
}実装時のトラブル解決：文字が反映されない時のチェックリスト
CSSの書いても文字サイズが太さが変わらない場合、以下の3点を確認しましょう。
セレクタの優先順位（詳細度）
他の場所で書かれたCSSが優先されている可能性があります。特に id 指定や !important が使われていないか確認しましょう。
継承の仕組み
font-family や color などの文字プロパティは、親要素から子要素へ「継承」されます。意図しない親要素のスタイルを引き継いでいないかチェックが必要です。
ブラウザの最小フォントサイズ
多くのブラウザ（Chromeなど）には「最小フォントサイズ（通常10px前後）」が設定されています。それ以下の数値を指定しても、ブラウザ側で強制的に大きく表示されるため注意しましょう。
実践演習：読みやすい記事スタイルの完成形
これまでの知識を総動員して、読みやすさを極めた記事スタイルを作ってみましょう。
/* ルートの設定 */
html {
font-size: 16px;
box-sizing: border-box;
}
/* 本文の設定 */
body {
color: #333;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-size: 1rem; /* 16px */
line-height: 1.8; /* 読みやすい広めの行間 */
font-weight: 400; /* 標準的な太さ */
}
/* 見出しの設定 */
h2 {
font-size: 1.75rem; /* ジャンプ率を高めに */
font-weight: 700; /* しっかり太く */
line-height: 1.4; /* 見出しは少し行間を詰めると締まって見える */
margin-top: 2rem;
margin-bottom: 1rem;
}
/* 強調文字 */
.important-text {
font-weight: 700;
color: #d32f2f;
}まとめ：文字を制する者はデザインを制す
今回は、CSSにおけるタイポグラフィの基礎である font-size, font-weight, line-height について解説しました。
- font-size：ユーザーの環境に配慮して rem をメインに使う。
- font-weight：400（通常）と700（太字）を使い分け、メリハリを出す。
- line-height：単位なしの数値（1.5~1.8）を指定して、読みやすさを確保する。
- デバイス対応：スマホとPCで最適なバランスに微調整する。
たった数ピクセルの違い、0.1の行間の違いが、読者の「読み心地」を大きく変えます。まずは自分のサイト等の本文を line-height: 1.8; に設定してみることから始めてみてください。その変化に驚くはずです。
