文字サイズとは?フォントの大きさの単位と役割ごとの決め方を初心者向けに解説

文字サイズの基本

まずは文字サイズとは何か、なぜ大切なのか、そしてサイズを表す単位を押さえましょう。

単位の違いが分かると、デザインツールやCSSで数字を見たときに迷わなくなります。

文字サイズとは何か

文字サイズとは、文字の大きさそのもののことです。

デザインでは「フォントサイズ」とも呼ばれ、見出し・本文・注釈など、文字の役割ごとにちょうどよい大きさを決めることが、タイポグラフィ(文字を読みやすく、伝わりやすく配置する技術。詳しくはタイポグラフィとは?)の出発点になります。

同じ文章でも、サイズが変わるだけで受ける印象は大きく変わります。

上の見本では、12pxは小さく控えめな印象、32pxは強く目に飛び込んでくる印象になっているのが分かると思います。

文字サイズは「読めるかどうか」だけでなく、「どれくらい目立たせたいか」を伝える道具でもあるのです。

文字サイズで情報の重要度が伝わる

文字サイズの一番の役割は、どの情報が重要かを読み手に一瞬で伝えることです。

人は大きな文字から先に目に入るため、サイズに差があれば「ここが見出しで、ここが本文」と自然に読む順番が決まります。

逆にすべての文字を同じサイズにしてしまうと、情報の優先順位が伝わらなくなります。

左の見本ではすべて16pxのため、タイトルと注意書きの区別がつきにくくなっています。

右の見本ではタイトルを大きく、注釈を小さくしたことで、読む順番と重要度がひと目で分かります。

このように、大きい文字と小さい文字の比率は「ジャンプ率」と呼ばれ、見出しと本文の差のつけ方を考えるときの基本になります(情報を階層に分ける考え方は情報の階層を作るタイポグラフィ術で解説しています)。

ジャンプ率が大きい(見出しと本文の差が大きい)とメリハリのある元気な印象に、小さい(差が小さい)と落ち着いた上品な印象になります。

文字サイズの単位(pt・Q・px・rem)

文字サイズを表す単位はいくつかあり、印刷物とWebでよく使われる単位が異なります。

最初に混乱しやすいポイントなので、代表的な4つを表で整理します。

単位	読み方	大きさ	主な使いどころ
pt	ポイント	1pt = 1/72インチ(約0.35mm)	印刷物、Word・PowerPointなどのOfficeソフト
Q	級(きゅう)	1Q = 0.25mm	日本の印刷・DTP(パソコンで本やチラシなどの印刷物を作る作業。InDesignなど)
px	ピクセル	CSSでは1px = 1/96インチ相当	Webサイト、アプリの画面デザイン
rem	レム	ルート要素の文字サイズの何倍か(多くのブラウザの初期値では1rem = 16px)	WebサイトのCSS

ptとQは、紙に印刷したときの実際の長さで決まる単位です。

Qは写真植字(写植)の時代に日本で生まれた単位で、1Qがちょうど0.25mmなので、ミリ単位で設計する印刷物と相性がよいのが特徴です。

一方、Webで使うpxは「画面上の1ドット」と思われがちですが、CSSのpxは1/96インチを基準にした論理的な単位で、高解像度の画面では1pxが複数のドットで表示されます。今のスマホやパソコンの画面は点(ドット)がとても細かいので、1pxを点1個で表示すると文字が小さくなりすぎてしまいます。そのため、画面が細かくても見た目の大きさがおおむねそろうように、1pxを複数の点で表示しているのです。

この定義から計算すると、Webの16pxは12ptと同じ大きさになります(MDN:CSSの長さの単位)。

remはCSS独自の単位で、ページ全体の基準の文字サイズに対して「何倍か」を表します。表の「ルート要素」とは、ページ全体を包むいちばん外側の要素(html)のことです。基準が16pxなら、1rem=16px、1.5rem=24px、2rem=32pxのように、掛け算で大きさが決まります(remと、似た単位のemの違いはrem em 違いで詳しく解説しています)。

文字サイズの決め方

ここからは、実際に文字サイズを決めるときの手順を紹介します。

ポイントは、いきなり見出しから考えるのではなく、本文のサイズを先に決めることです。

まず本文のサイズを決める

文字サイズを決めるときは、最初に本文のサイズを決め、それを基準に他のサイズを割り当てます。

本文はページの中で最も量が多く、読みやすさに直結する部分だからです。

Webの場合は、本文16pxを基準にするのが一般的です。

多くのブラウザは、ユーザーが設定を変えていなければ文字サイズの初期値を16pxにしているため、16pxは「ブラウザが標準とする読みやすい大きさ」と考えられます(MDN:font-size)。

ただし、書体によって同じ16pxでも大きく見えたり小さく見えたりするので、最終的には実際の表示を見て判断しましょう(本文の行間や1行の長さも含めた読みやすい本文の整え方は読みやすい本文とは?で解説しています)。

役割ごとにサイズを割り当てる

本文のサイズが決まったら、見出しや注釈など役割ごとのサイズを割り当てます。

本文を基準に「何倍にするか」で考えると、全体のバランスが崩れにくくなります。

次の表は、本文16pxを基準にしたWebでの一例です。

役割	サイズの例	remで表すと	本文との比率
大見出し(ページタイトルなど)	32px	2rem	2倍
中見出し	24px	1.5rem	1.5倍
小見出し	20px	1.25rem	1.25倍
本文	16px	1rem	基準
補足・注釈	14px	0.875rem	約0.9倍

この数値は決まりではなく、あくまで出発点の目安です。

サイトの雰囲気や、見出しをどれくらい強く見せたいかによって調整してかまいません。

実際に並べると、次のような見え方になります。

上の見本のように、見出しは段階的に小さくなり、本文と注釈がはっきり区別できる状態を目指します。

サイズの種類は5つ前後に絞ると、ページ全体に統一感が出ます。

CSSで文字サイズを指定する方法

Webサイトでは、CSSのfont-sizeというプロパティで文字サイズを指定します。

次のコードは、上の表のサイズをremで指定した例です。

/* 本文は基準サイズ(多くのブラウザでは16px)をそのまま使う */
body {
  font-size: 1rem;
}

/* 見出しと注釈は、基準の何倍かで指定する */
h1 { font-size: 2rem; }      /* 32px相当 */
h2 { font-size: 1.5rem; }    /* 24px相当 */
h3 { font-size: 1.25rem; }   /* 20px相当 */
.note { font-size: 0.875rem; } /* 14px相当 */

remで指定しておくと、ユーザーがブラウザの設定で文字を大きくしたときに、ページ全体の文字がその設定に合わせて大きくなります。

MDNでも、アクセシビリティ(誰もが情報を利用できること)の面から、ユーザーの既定サイズに対する相対的な値で指定することが勧められています(MDN:font-size)。

CSSそのものが初めての方は、CSSとは?もあわせて読んでみてください。

実践のポイント

文字サイズを決めるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• パソコンの大きな画面でデザインツールを見ていると、実際のスマートフォンで見るより文字が大きく感じられ、小さすぎるサイズを選んでしまうことがあります。
  デザインの途中で、必ず実際の画面サイズで確認しましょう。
• 印刷物で使うptの感覚のまま、Webでも「本文10〜11」のような小さい数値を選んでしまうことがあります。
  ptとpxは大きさが違う単位なので、Webでは本文16pxを基準に考えましょう。
  たとえばWordの本文でよく使う10.5ptは、Webのpxに直すと14pxです。反対にWebで10.5pxと指定すると約7.9ptにあたり、印刷物でいえば細かい注釈に使うくらいの小さな文字になってしまいます。
• 文字サイズだけで差をつけようとして、見出しがどんどん大きくなってしまうことがあります。
  文字の太さ(ウェイト)や色の濃さと組み合わせると、サイズを上げすぎなくても差が出せます(詳しくはフォントの太さ(ウェイト)の記事で解説しています)。
• 注釈や補足を目立たせたくないあまり、極端に小さくしてしまうことがあります。
  小さい文字も「読ませる文字」であることに変わりはないので、本文より一回り小さい程度にとどめましょう。

よくある質問

• Q. Webの本文は何pxが正解?
  A. 絶対の正解はありませんが、16pxを基準にするのが一般的です。
  16pxは多くのブラウザの初期値で、多くの人にとって無理なく読める大きさとして扱われています。
  書体や文章量に合わせて、15〜18px程度の範囲で調整するとよいでしょう。
• Q. pxとremはどちらを使えばいい?
  A. デザインツール上ではpxで考え、CSSではremに置き換えて指定する方法がよく使われます。
  remにしておくと、ユーザーがブラウザで文字を大きく設定したときにも、その設定がページに反映されます。
  Figmaは最初から文字サイズをpxで扱いますが、IllustratorやPhotoshopは文字の単位がptになっていることが多いので、Web用のデザインを作るときは環境設定の「単位」で文字の単位をpxに切り替えておくと、CSSに置き換えるときに迷いません。
• Q. 文字サイズに「何px以上」という決まりはある?
  A. Webアクセシビリティの国際的なガイドラインであるWCAGには、最小の文字サイズの決まりはありません。
  その代わりに「テキストを200%まで拡大しても内容や機能が損なわれないこと」が求められています(WCAG 2.2 達成基準 1.4.4 テキストのサイズ変更(WAIC 日本語訳))。
  小さすぎる文字を避けるとともに、拡大されても崩れない作りにしておくことが大切です。

まとめ

文字サイズとは文字の大きさそのもののことで、情報の重要度を伝え、読みやすさを左右するタイポグラフィの基本です。

印刷ではptやQ、Webではpxやremが使われ、Webでは本文16pxを基準に、見出しや注釈を「本文の何倍か」で決めていくと全体のバランスが整います。

まずは自分が作ったページやデザインの文字サイズを書き出して、本文・見出し・注釈が何種類のサイズでできているかを数えてみてください。