HTML・CSSで文字サイズを変える方法｜font-size・rem・clampを初心者向けに解説

Webページの文字が小さすぎる、見出しと本文の差が分かりにくい、スマートフォンで文字が大きくなりすぎる。このようなときは、CSSのfont-sizeで文字の大きさを調整します。

本文はremを基準にし、画面幅に合わせて変えたい見出しにはclamp()を使うと管理しやすくなります。この記事では、px・em・remの違い、smallタグの役割、読みやすい文字サイズの決め方まで初心者向けに解説します。

CSSのfont-sizeで文字の大きさを変える

文字の大きさはHTMLタグではなく、CSSのfont-sizeプロパティで指定するのが基本です。まず、サイズを変えたい文章へクラスを付けます。

<p class="lead-text">初心者向けのHTML入門講座です。</p>
<p>HTMLファイルとCSSファイルを用意して始めます。</p>

この時点では、どちらも段落の標準サイズで表示されます。次のCSSをstyle.cssへ追加してください。

.lead-text {
  font-size: 1.25rem;
}

lead-textクラスを付けた段落だけが大きくなります。1.25remは、ブラウザの標準文字サイズが16pxなら、およそ20pxに相当します。

保存後にブラウザを再読み込みし、変更前の本文と見比べましょう。クラス名がHTMLとCSSで同じになっているかも確認してください。

文字サイズで使う単位の違い

font-sizeには、px、em、rem、パーセントなど複数の単位を指定できます。それぞれの基準が違うため、用途に合わせて選びます。

pxは具体的な基準値を指定する

pxは、画面上の大きさを具体的に指定しやすい単位です。デザインカンプの値を再現するときや、枠線など細かい寸法によく使われます。

.text-16px {
  font-size: 16px;
}

.text-20px {
  font-size: 20px;
}

値の違いが分かりやすい一方、文字サイズをすべてpxで固定すると、利用者の設定を活かしにくくなる場合があります。本文や見出しには、ルート文字サイズを基準にできるremが便利です。

emは親要素の文字サイズを基準にする

emは、その要素が受け継いだ親要素の文字サイズを基準にします。親が20pxなら、1.5emは30pxです。

<div class="card">
  <h2 class="card-title">カードの見出し</h2>
  <p>カードの説明文です。</p>
</div>

.card {
  font-size: 1rem;
}

.card-title {
  font-size: 1.5em;
}

カード全体の文字サイズを変えると、見出しも比率を保って変わります。部品の中で相対的な大きさを作りたい場面に向いています。

ただし、emを指定した要素が何重にも入れ子になると、計算結果が大きくなったり小さくなったりします。意図しない連鎖を避けたい場合はremを使います。

remはhtml要素の文字サイズを基準にする

remは、ページのルートであるhtml要素の文字サイズを基準にします。親要素のサイズが変わっても、同じremなら同じ基準で計算されます。

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

.note {
  font-size: 0.875rem;
}

ブラウザの標準が16pxの場合、1remは16px、2remは32px、0.875remは14pxほどです。利用者がブラウザの標準文字サイズを変更している場合は、その設定を基準に拡大・縮小されます。

html { font-size: 62.5%; }で1remを10px相当にする書き方も見かけますが、利用者の標準設定から全体を小さくする可能性があります。初心者は100%のまま、必要な要素へremを指定する方が分かりやすいでしょう。

パーセントは親要素に対する割合を指定する

パーセント指定も親要素の文字サイズを基準にします。100%が親と同じ、125%が1.25倍、80%が0.8倍です。

.large-text {
  font-size: 125%;
}

.small-text {
  font-size: 87.5%;
}

親要素との比率を分かりやすく表したいときに使えます。入れ子が深いと影響が連鎖する点はemと似ています。

clampで画面幅に合う文字サイズを作る

clamp()は、最小値・画面幅に応じた可変値・最大値を一度に指定するCSS関数です。見出しをスマートフォンでは控えめに、広い画面では大きく表示したい場合に役立ちます。

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.3;
}

clamp(2rem, 5vw, 3.5rem)では、2remより小さくならず、3.5remより大きくなりません。その範囲で、画面幅の5%を目安に変化します。

最小値と最大値にremを使うことで、利用者の文字サイズ設定も反映しやすくなります。値は実際の見出しの長さで確認し、改行が不自然にならない範囲へ調整してください。

smallタグは補足や細則を表す

smallタグは、著作権表示、免責事項、細則、補足などの「小さな注記」を表すHTML要素です。多くのブラウザでは周囲より小さく表示されますが、単に文字を小さくするタグではありません。

<footer>
  <small>&copy; 2026 SAMPLE SITE</small>
</footer>

著作権表示は本文に対する補足情報なので、smallの用途に合います。サイト全体のデザインに合わせて、CSSで読みやすい大きさと色へ調整できます。

footer small {
  font-size: 0.875rem;
  color: #475569;
}

通常の本文を小さくしたいだけなら、spanやpへクラスを付け、CSSのfont-sizeを使います。内容の役割に合わせてHTMLを選んでください。

読みやすい文字サイズの目安

読みやすい大きさは、フォントの形、行間、文字色、画面との距離によって変わります。そのため、数値だけで決めず、実際の日本語の文章をパソコンとスマートフォンで確認します。

• 本文：1rem前後から確認する
• 補足：0.875rem程度でも読める色と行間を確保する
• 大見出し：clamp(2rem, 5vw, 3.5rem)など範囲を設定する
• 小見出し：本文より明確に大きくし、太さと余白も付ける

本文を14px以下へ一律に小さくすると、スマートフォンや高解像度の画面で読みにくいことがあります。1remを出発点にし、対象読者と利用環境に合わせて調整してください。

行間も一緒に調整する

文字サイズを大きくしただけでは、行同士が詰まって読みにくくなることがあります。本文には単位なしのline-heightを指定すると、文字サイズに合わせて行間が計算されます。

body {
  font-size: 1rem;
  line-height: 1.7;
}

h1,
h2,
h3 {
  line-height: 1.3;
}

本文は行間を広めにし、見出しは複数行になっても離れすぎないよう少し狭くしています。フォントによって見え方が違うため、画面で調整します。

一行を長くしすぎない

広い画面で文章が端から端まで続くと、次の行へ視線を移しにくくなります。本文の幅へ上限を付けると読みやすくなります。

.article-body {
  width: min(100%, 65ch);
  margin-inline: auto;
}

chは文字幅を基準にする単位です。65chを上限にし、画面が狭い場合は100%まで縮むようにしています。

ページ全体の文字サイズ例

本文、見出し、補足をまとめて指定する例です。最初に共通の基準を作り、必要な場所だけクラスで変更すると管理しやすくなります。

<article class="article-body">
  <h1>初心者向けHTML講座</h1>
  <p class="lead-text">HTMLの基本から順番に学びます。</p>

  <h2>HTMLファイルを作る</h2>
  <p>まずはindex.htmlを用意します。</p>

  <p class="note">※ファイル名は半角英数字で付けます。</p>
</article>

html {
  font-size: 100%;
}

body {
  margin: 0;
  color: #0f172a;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.3;
}

.lead-text {
  font-size: 1.25rem;
}

.note {
  color: #475569;
  font-size: 0.875rem;
}

本文を1remの基準にし、見出しだけをclamp()で可変にしています。スマートフォンでも見出しが極端に大きくならず、広い画面では階層が分かる大きさになります。

文字サイズのアクセシビリティ

利用者は、ブラウザの設定や拡大機能を使って文字を大きくすることがあります。拡大しても文字が重なったり、横にはみ出したりしないか確認してください。

• 本文と見出しにremなどの相対単位を使う
• 固定の高さで文章を切り取らない
• 文字が折り返されてもボタンやカードが広がるようにする
• ブラウザを200%程度まで拡大して確認する
• viewportで利用者の拡大操作を禁止しない

スマートフォン向けのmeta viewportを設定するときも、user-scalable=noや小さなmaximum-scaleで拡大を制限しないようにします。

文字サイズが変わらないときの確認点

• クラス名が一致していない：HTMLのclassとCSSの.に続く名前をそろえます。
• 単位を付け忘れている：font-size: 20pxや1.25remのように単位を書きます。
• CSSファイルが読み込まれていない：linkタグのパスとファイル名を確認します。
• 別のCSSに上書きされている：開発者ツールで最終的なfont-sizeを確認します。
• 親要素のemが影響している：計算が複雑な場合はremへ置き換えて比較します。
• clampの順番が違う：最小値、可変値、最大値の順で指定します。

修正後はファイルを保存し、ブラウザを再読み込みします。パソコンだけでなく、開発者ツールで画面幅を狭くして見出しと本文の変化も確認しましょう。

まとめ

文字の大きさはCSSのfont-sizeで変更します。本文や見出しにはremを基準として使い、画面幅に合わせて変えたい見出しにはclamp()を使うと調整しやすくなります。

smallタグは単に文字を小さくするためではなく、著作権表示や細則などの補足を表す要素です。まずは本文1rem、見出しclamp、補足0.875remから試し、実際の文章を複数の画面幅と拡大表示で確認してください。