誰もが読みやすい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”>親要素の文字サイズ <div class=”size_ex1″>文字サイズを20pxで指定</div> <div class=”size_ex2″>文字サイズを1.5emで指定</div> <div class=”size_ex3″>文字サイズを1.5remで指定</div> </div> </body> </html> |
ブラウザでの表示結果
font-sizeプロパティをpxで指定した場合、親要素の文字サイズに関係なく、指定したサイズ固定で表示されます。
emは親要素の文字サイズの倍率（1em=等倍）で指定するため、同じ数値を指定しても、親要素の文字サイズによって表示される結果が変わります。
今回は親要素が30pxなので、1.5倍の45px相当で表示されています。
remはemと異なり、ルート要素の文字サイズを基準とします。
今回の例では、ルート要素に対する文字サイズの指定がないので、ブラウザ標準（16px相当）が基準となり、1.5倍の24px相当で表示されています。
(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″>文字サイズを比較します</p> <p class=”size_ex2″>文字サイズを比較します</p> <p class=”size_ex3″>文字サイズを比較します</p> <p class=”size_ex4″>文字サイズを比較します</p> <p class=”size_ex5″>文字サイズを比較します</p> <p class=”size_ex6″>文字サイズを比較します</p> <p class=”size_ex7″>文字サイズを比較します</p> </body> </html> |
ブラウザでの表示結果
相対値（larger、smaller）での文字サイズ指定例
largerやsmallerは相対的なサイズのキーワードで、親要素の文字サイズを基準に1段階大きい、または小さいサイズで表示します。
親要素の文字サイズがキーワードで指定されている場合、1段階増減したキーワードと同等サイズ、それ以外の場合は親要素の120%〜150%で調整されます。
例）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″>親要素の文字サイズ <div class=”size_ex1″>親要素の文字サイズよりひと回り小さい</div> <div class=”size_ex2″>親要素の文字サイズよりひと回り大きい</div> </div> <div class=”size_parent2″>親要素の文字サイズ <div class=”size_ex1″>親要素の文字サイズよりひと回り小さい</div> <div class=”size_ex2″>親要素の文字サイズよりひと回り大きい</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倍 |
%は要素の幅や高さなどのレイアウト調整に使われることが多く、文字サイズの指定にはあまり使われません。文字サイズを相対単位で指定するときは、emやremを使ってください。
(3)絶対単位と相対単位の使い分け
Webアクセシビリティの観点から、文字サイズは相対単位での指定が推奨されています。
絶対単位で指定すると、ブラウザによってはユーザー側で文字の大きさを変更できず、小さな文字を読むのが困難なユーザーがコンテンツの内容を理解しづらくなるためです。
ただし例外として、次のようにレイアウトを固定したい場面では、絶対単位での指定が有効です。
- 印刷用のスタイル設定
- 常に同じサイズで表示させたいUI要素（ロゴ、ナビゲーションバーなど）
印刷物では物理的な用紙サイズが決まっているため、正確な寸法で文字や画像を配置する必要があります。この際に絶対単位を使用することで、デザイン通りの出力が可能になります。
また、ナビゲーションバーなどのUI要素にテキストを表示している場合、文字サイズの変更によって画面表示が崩れる可能性があります。すべての環境で一貫したデザインを維持したい場合、絶対単位での指定がおすすめです。