タイポグラフィ（デザイン）

font-size

文字の大きさ

value	description
`16px`	ピクセル単位で指定	A/a
`1.2rem`	rem 単位で指定	A/a
`0.8em`	em 単位で指定	A/a

Demo

40px

24px

16px（標準）

14px

12px

10px（Google Chromeで実現可能な最小サイズ）

<p class="text-40">40px</p>
<p class="text-24">24px</p>
<p class="text-16">16px（標準）</p>
<p class="text-14">14px</p>
<p class="text-12">12px</p>
<p class="text-10">10px（Google Chromeで実現可能な最小サイズ）</p>

.text-40 {
  font-size: 40px;
}
.text-24 {
  font-size: 24px;
}
.text-16 {
  font-size: 16px;
}
.text-14 {
  font-size: 14px;
}
.text-12 {
  font-size: 12px;
}
.text-10 {
  font-size: 10px;
}
.text-body {
  font-size: 16px;
}
.text-small {
  font-size: 0.8em;
}

概要

文字の大きさを指定することができます。

文字の大きさの単位としては様々な単位が利用可能ですが、px, rem, emの 3 つを押さえておけば十分でしょう。基本的にはpxまたはremを用い、文の中で小さめ / 大さめに表示したい場合に相対単位であるemを使うと便利です。

単位	絶対 or 相対	説明
`px`	絶対指定	ディスプレイの最小単位を`1px`とする単位です
`rem`	相対指定	ルート要素（`<html>`）の文字の大きさを`1rem`とする単位です
`em`	相対指定	親要素のフォントサイズを`1em`とする単位です
`%`	相対指定	`font-size`では`em`と同様です

よく利用される値

pxを利用する場合は、16pxを基準として{偶数}pxで指定されることが多いです。

`px`	`rem`
16px	1rem	標準的な大きさです。このサイトの本文も 16px で表示されています。（PC 表示）	サンプルテキスト
14px	0.875rem	通常の大きさよりは小さめに表示する場合に利用されます。このサイトでは、サイドバーの小項目が 14px で表示されています。（PC 表示）	サンプルテキスト
12px	0.75rem	注釈や補足メッセージなどに利用されます。	サンプルテキスト

絶対指定と相対指定

サイズの指定には絶対指定と相対指定に分けられます。絶対指定は cm（センチメートル）や kg（キログラム）のように長さそのものを指定し、相対指定は%（パーセント）のように親要素からのからの相対的な割合を指定します。 font-sizeにおいては、pxが絶対指定、rem, em, %が相対指定にあたります。

`px` と `rem`

通常のフォントサイズの指定にはpxまたはremが利用されます。どちらを利用するかはプロジェクトや好みによる部分が多そうです。一長一短あるため興味のある方は調べてみてください。

`em` 詳細

親要素を1emとし、親要素からの相対値で指定します。例えばfont-size: 0.8em;であれば、親要素の 80%の大きさとなります。親要素が16pxだった場合は、16[px] × 0.8 = 12.8[px]となります。

通常の大きさ（小さく表示）通常の大きさ（大きく表示）通常の大きさ

<p class="text-normal">
  通常の大きさ
  <span class="text-small">
    （小さく表示）
  </span>
  通常の大きさ
  <span class="text-large">
    （大きく表示）
  </span>
  通常の大きさ
</p>

.text-normal {
  font-size: 16px;
}
.text-small {
  font-size: 0.8em;
}

.text-large {
  font-size: 1.2em;
}

参照

参照