誰もが読みやすいWebサイトを作る上で文字サイズは、重要な要素です。
CSSではさまざまな単位やキーワードを使って文字サイズを細かく指定､変更することができます。
この記事ではCSSによる文字サイズの指定方法（数値と単位で指定orキーワードで指定）や、単位の種類を分かりやすく解説します。
Contents
文字サイズを指定する方法
CSSで文字サイズを指定するには、font-sizeプロパティを使用します。
例）style.css
| .size_ex1 { font-size: 10px; } .size_ex2 { font-size: 20px; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <link rel=”stylesheet” href=”style.css” type=””text/css> </head> <body> <p class=”size_ex1″>文字サイズは10pxです</p> <p class=”size_ex2″>文字サイズは20pxです</p> </body> </html> |
ブラウザでの表示結果
font-sizeプロパティの値は、上記の例のように数値＋単位で指定する方法と、あらかじめ用意されたキーワード（smallやmediumなど）で指定する方法の2種類あります。
(1)数値＋単位で指定する方法
文字サイズの指定でよく使われているのが、数値＋単位で指定する方法です。
数値には1以上の数値を指定します。負の数は指定することができません(無効となります)。
| font-size: 数値＋単位 |
同じ数値で指定しても、単位が違えば文字サイズは変わります。単位の種類は次章で詳しく紹介しますが、px・em・remなどが代表的です。
※px（ピクセル）はデジタル画像の最小単位です。ディスプレイ上の画面は、この小さな点の集合で構成されています。
例）style.css
| .size_parent { font-size: 30px; } .size_ex1 { font-size: 20px; } .size_ex2 { font-size: 1.5em; } .size_ex3 { font-size: 1.5rem; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <link rel=”stylesheet” href=”style.css” type=””text/css> </head> <body> <div class=”size_parent”>親要素の文字サイズ（30px） <div class=”size_ex1″>文字サイズを20pxで指定</div> <div class=”size_ex2″>文字サイズを1.5em（親要素が30pxなので、1.5倍の45px相当）で指定</div> <div class=”size_ex3″>文字サイズを1.5remで指定</div> </div> </body> </html> |
ブラウザでの表示結果
font-sizeプロパティをpxで指定した場合、親要素の文字サイズに関係なく、指定したサイズ固定で表示されます。
emは親要素の文字サイズの倍率（1em=等倍）で指定するため、同じ数値を指定しても、親要素の文字サイズによって表示される結果が変わります。
今回は親要素が30pxなので、1.5倍の45px相当で表示されています。
remはemと異なり、ルート要素（HTML要素）の文字サイズを基準とします。
今回の例では、ルート要素に対する文字サイズの指定がないので、ブラウザ標準（16px相当）が基準となり、1.5倍の24px相当で表示されています。
※ルート要素（HTML要素）の文字サイズを指定する場合は、以下のようなCSSをheadセクションのstyle要素内、または外部ファイルに追加してください。
| html { font-size: 20px; } |
(2)キーワードで指定する方法
文字サイズの指定に使えるキーワードには、次のようなものがあります。
| キーワード | 種類 | 大きさ | px指定との比較 |
|---|---|---|---|
| xx-small | 絶対値 | 非常に小さい | 9px相当 |
| x-small | 絶対値 | 小さい | 10px相当 |
| small | 絶対値 | 少し小さい | 12px相当 |
| medium | 絶対値 | 通常の大きさ | 16px相当 |
| large | 絶対値 | 少し大きい | 18px相当 |
| x-large | 絶対値 | 大きい | 24px相当 |
| xx-large | 絶対値 | 非常に大きい | 32px相当 |
| larger | 相対値 | ひと回り大きい | – |
| smaller | 相対値 | ひと回り小さい | – |
絶対値（xx-small、x-small、small、medium、large、x-large、xx-large）での文字サイズ指定例
smallやmediumは絶対的なサイズのキーワードで、ブラウザ標準の文字サイズ（medium）を基準として段階的に文字サイズを調整することができます。
xx-smallは9px相当ですが、ChromeやEdgeなど一部のブラウザでは最小10pxの制約が設けられており、10pxより小さい文字サイズは10pxで表示される仕様になっています。
例）style.css
| .size_ex1 { font-size: xx-small; } .size_ex2 { font-size: x-small; } .size_ex3 { font-size: small; } .size_ex4 { font-size: medium; } .size_ex5 { font-size: large; } .size_ex6 { font-size: x-large; } .size_ex7 { font-size: xx-large; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <link rel=”stylesheet” href=”style.css” type=””text/css> </head> <body> <p class=”size_ex1″>xx-small (9px相当)</p> <p class=”size_ex2″>x-small (10px相当)</p> <p class=”size_ex3″>small (12px相当)</p> <p class=”size_ex4″>medium (16px相当)</p> <p class=”size_ex5″>large (18px相当)</p> <p class=”size_ex6″>x-large (24px相当)</p> <p class=”size_ex7″>xx-large (32px相当)</p> </body> </html> |
ブラウザでの表示結果
相対値（larger、smaller）での文字サイズ指定例
largerやsmallerは相対的なサイズのキーワードで、親要素の文字サイズを基準に1段階大きい、または小さいサイズで表示します。
親要素の文字サイズがキーワードで指定されている場合、1段階増減したキーワードと同等サイズ、数値＋単位での指定の場合、largerは親要素の120%〜150%に拡大され、smallerは親要素の80%〜90%に縮小されます。
例）style.css
| .size_parent1 { font-size:25px; color:red; } .size_parent2 { font-size:large; color:blue; } .size_ex1 { font-size: smaller; } .size_ex2 { font-size:larger; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <link rel=”stylesheet” href=”style.css” type=””text/css> </head> <body> <div class=”size_parent1″>親要素の文字サイズ (25px) <div class=”size_ex1″>smaller (20px前後)</div> <div class=”size_ex2″>larger (30px前後)</div> </div> <div class=”size_parent2″>親要素の文字サイズ (18px相当) <div class=”size_ex1″>smaller (15px前後)</div> <div class=”size_ex2″>larger (21px前後)</div> </div> </body> </html> |
ブラウザでの表示結果
文字サイズの単位
CSSで文字や要素のサイズを数値で指定するときは、必ず単位をつける必要があります。
単位をつけずに数値だけ指定した場合、その設定は無効となりスタイルが適用されません。
CSSで指定できる単位には、大きく分けると絶対単位と相対単位の2種類があります。
(1)絶対単位
親要素やユーザーの設定（ブラウザでの文字サイズ変更など）に影響されず、常に指定したサイズで表示される単位です。
| 単位 | 読み方 | 他単位からの換算 |
|---|---|---|
| mm | ミリメートル | 1mm = 0.1cm |
| cm | センチメートル | 1cm = 10mm |
| in | インチ | 1in = 2.54cm = 96px |
| pc | パイカ | 1pc = 1in の 1/6 |
| pt | ポイント | 1pt = 1in の 1/72 |
| px | ピクセル | 1px = 1in の 1/96 |
絶対単位は物理的なサイズに近い状態で表示されますが、デバイスの種類やディスプレイの解像度によって、見え方にわずかな差が生じることがあります。
(2)相対単位
親要素やルート要素を基準として、相対的にサイズが算出される単位です。
| 単位 | 読み方 | 基準 | 説明 |
|---|---|---|---|
| % | パーセント | 親要素の文字サイズ | 基準となる文字サイズの割合で指定する。 例）80% = 基準の0.8倍 |
| em | エム | 親要素の文字サイズ | 基準となる文字サイズの倍率で指定する。 例）1.5em = 基準の1.5倍 |
| rem | ルートエム | ルート要素（html要素）の文字サイズ | 基準となる文字サイズの倍率で指定する。 例）1.5rem = 基準の1.5倍 |
| ex | イーエックス | 親要素（※）に適用されているフォントで小文字の”x”を表示したときの高さ | 基準となる文字の高さの倍率で指定する。 例）1.5ex = 基準の1.5倍 |
※HTMLの要素は階層構造になっていますが、対象の要素の一つ上の階層（入れ子の外側）にある要素。
例）以下のHTML文書において、<p id=”child”> の親要素は <div id=”parent”>、<body>の親要素は<html>。
| <html> <head> <title>タイトル</title> </head> <body> <div id=”parent”> <p id=”child”>これはテキストです。</p> </div> </body> </html> |
%は要素の幅や高さなどのレイアウト調整に使われることが多く、文字サイズの指定にはあまり使われません。
また、exはフォントによってサイズがばらつくためデザインの一貫性を保つのが難しく、%同様に使われる機会が少ない単位です。
文字サイズを相対単位で指定するときは、emやremを使ってください。
(3)絶対単位と相対単位の使い分け
Webアクセシビリティの観点から、文字サイズは相対単位での指定が推奨されています。
絶対単位で指定すると、ブラウザによってはユーザー側で文字の大きさを変更できず、小さな文字を読むのが困難なユーザーがコンテンツの内容を理解しづらくなるためです。
ただし例外として、次のようにレイアウトを固定したい場面では、絶対単位での指定が有効です。
- 印刷用のスタイル設定
- 常に同じサイズで表示させたいUI要素（ロゴ、ナビゲーションバーなど）
印刷物では物理的な用紙サイズが決まっているため、正確な寸法で文字や画像を配置する必要があります。この際に絶対単位を使用することで、デザイン通りの出力が可能になります。
また、ナビゲーションバーなどのUI要素にテキストを表示している場合、文字サイズの変更によって画面表示が崩れる可能性があります。すべての環境で一貫したデザインを維持したい場合、絶対単位での指定がおすすめです。
(4)数値＋単位での指定とキーワードでの指定の使い分け
文字サイズは数値＋単位で指定する方法が一般的です。
キーワードは「標準より少し大きく」といった段階的なサイズ調整には便利ですが、実際のデザイン作業では厳密な指定が必要となることが多いためです。
迷った場合は数値＋相対単位（rem）を使って指定してください。