概要

font-size は、HTML要素内のテキストの文字サイズを指定するためのCSSプロパティです。キーワード指定（small、largeなど）や、数値指定（px、em、rem、%）など複数の単位で制御可能です。

基本的な使い方

See the Pen font-sizeについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* px指定（固定サイズ） */
p {
  font-size: 16px;
}

/* em指定（親要素に対する相対サイズ） */
p {
  font-size: 1.2em;
}

/* rem指定（ルート要素に対する相対サイズ） */
p {
  font-size: 1.5rem;
}

/* パーセント指定 */
p {
  font-size: 120%;
}

/* キーワード指定 */
p {
  font-size: large;
}

ユースケースに応じて単位を使い分けることで、レスポンシブ対応やアクセシビリティの向上が可能です。

出力される内容の例

<p style="font-size: 20px;">
  この段落の文字サイズは20pxです。
</p>

役割とメリット（定義リスト形式）

視認性の向上

コンテンツの重要度に応じてサイズを調整することで、ユーザーが情報を見つけやすくなります。

アクセシビリティ

相対単位を使用すれば、ユーザーがブラウザで拡大してもレイアウトが崩れにくくなります。

デザインの調整

見出しや本文などの階層を明確にし、視覚的なリズムを作れます。

レスポンシブ対応

媒体や画面サイズに応じてサイズを柔軟に変更できます（メディアクエリやclamp()関数などとの併用）。

注意点

• px は画面サイズに対して固定サイズのため、拡大縮小に弱いです。
• em は親要素のサイズに依存するため、ネストが深くなると意図しないサイズになることがあります。
• ユーザーの読みやすさを考慮し、一般的には 16px 以上が推奨されます。
• キーワード指定は簡易的ですが、細かい調整には不向きです。

まとめ

font-size は、文字の大きさを調整するための基本かつ重要なCSSプロパティです。単位の違いを理解して使い分けることで、ユーザーにとって読みやすく、かつレスポンシブなデザインを実現できます。特にアクセシビリティやデザイン性を高めるためには、相対単位（em/rem）の活用が有効です。