Webページを見やすく、デザイン性の高いものに仕上げるために欠かせないのがHTML 文字サイズの調整です。見出し・本文・注釈などの文字サイズを適切に設定することで、ユーザーにとって読みやすいページを作ることができます。この記事では、CSSで文字サイズを変更する基本とfont-sizeの使い方を中心に、HTML 文字サイズの基本からフォント設定のコツまでを初心者向けにわかりやすく解説します。
HTMLで文字サイズを変える基本を理解しよう
- 文字サイズを指定する目的と効果
文字サイズの調整は、単なるデザイン要素ではなく、情報の優先度を視覚的に伝える重要な役割を持っています。大きい文字は見出しや強調に、小さい文字は補足情報や注釈に使うことで、読者が内容を自然に理解しやすくなります。
- HTMLでの指定方法の変遷・旧タグからCSSへ
かつては<font size="">タグを使って文字サイズを指定していましたが、現在はCSS・スタイルシートを使用するのが標準です。理由は、デザインと内容を分離することで保守性や再利用性が高まるためです。
- 現在の推奨方法を先に確認
2025年現在、HTML 文字サイズの指定にはCSSのfont-sizeプロパティを使うのが最も一般的で安全な方法です。HTMLタグ内での直接指定（インラインスタイル）も可能ですが、外部CSSでまとめるのが推奨されています。
非推奨タグ <font size=""> の使い方と注意点
<p><font size="4">この文字はサイズ4です。</font></p>
HTML5以降では<font>タグは非推奨（deprecated）とされており、ブラウザによっては正しく表示されない場合があります。そのため、CSS指定で統一するのがベストです。
CSSで文字サイズを指定する方法・推奨
font-sizeプロパティの基本構文
p {
font-size: 16px;
}
この場合、すべての段落（<p>）の文字サイズが16ピクセルになります。
px・em・remの違いと使い分け
| 単位 | 特徴 | 使用例 |
|---|---|---|
| px | 画面上の固定サイズ。初心者向けで扱いやすい | font-size: 14px; |
| em | 親要素の文字サイズを基準にした相対指定 | font-size: 1.2em; |
| rem | ルート要素（html全体）のサイズを基準にした相対指定 | font-size: 1.5rem; |
より詳しい単位の使い分けは、HTML／CSSでテキストサイズを調整する方法とレスポンシブ対応でも紹介されています。
用途別おすすめ文字サイズ例
| 用途 | 推奨サイズ | 単位 |
|---|---|---|
| 見出し（h1） | 32〜48 | px |
| 小見出し（h2〜h3） | 20〜28 | px |
| 本文 | 14〜16 | px |
| 注釈・補足 | 12 | px |
実際のHTML + CSSサンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML 文字サイズの例</title>
<style>
h1 { font-size: 36px; }
p { font-size: 16px; }
small { font-size: 12px; }
</style>
</head>
<body>
<h1>見出しタイトル</h1>
<p>これは本文の例です。フォントサイズは16pxです。</p>
<small>これは注釈です（12px）。</small>
</body>
</html>
レスポンシブ対応例
p {
font-size: 16px;
}
@media (max-width: 600px) {
p {
font-size: 14px;
}
}
スマートフォンでは文字を自動的に小さくして可読性を保ちます。
デザイン性と可読性を両立させるコツ
- 行間（line-height）と余白設定
p {
line-height: 1.6;
}
- 見出し階層のサイズバランス
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
- フォントファミリー設定
body {
font-family: "Noto Sans JP", "Helvetica", sans-serif;
}
サイトの印象を変えたい場合や可読性を重視する場合は、HTML文字サイズとフォント設定の最適ガイドを参考にしてみましょう。
まとめ・HTMLでの文字サイズ指定はCSSで統一しよう
<font>タグは非推奨。使わないのが基本。- CSSで統一すればデザイン変更が簡単。
- 初心者はまずpx指定から始め、慣れたらem・remを活用。
HTML文字サイズを正しく設定すれば、読みやすくデザイン性の高いWebページを作ることができます。
