フォントサイズの大きさを指定するfont-sizeについて解説

<div class="standard">
  <p class="font-px">pxで指定したテキスト</p>
  <p class="font-rem">remで指定したテキスト</p>
  <p class="font-em">emで指定したテキスト</p>
</div>

/* 親要素フォントサイズ */
.standard {
  font-size: 20px;
}

/* pxで指定 (サイズは固定) */
.font-px {
  font-size: 16px;
}

/* remで指定 (HTML要素を基準) */
.font-rem {
  font-size: 1.5rem;
}

/* emで指定 (親要素を基準) */
.font-em {
  font-size: 1.5em;
}

<p class="xx-large">mediumより3段階大きいフォントサイズです。</p>

<p class="x-large">mediumより2段階大きいフォントサイズです。</p>

<p class="large">mediumより1段階大きいフォントサイズです。</p>

<p class="medium">mediumは初期値であり基準となるフォントサイズです。</p>

<p class="small">mediumより1段階小さいフォントサイズです。</p>

<p class="x-small">mediumより2段階小さいフォントサイズです。</p>

<p class="xx-small">mediumより3段階小さいフォントサイズです。</p>

.xx-large {
　font-size: xx-large;
}

.x-large {
　font-size: x-large;
}

.large {
　font-size: large;
}

.medium {
　font-size: medium;
}

.small {
　font-size: small;
}

.x-small {
　font-size: x-small;
}

.xx-small {
　font-size: xx-small;
}

<div class="parent">
  <p class="child">150%なので24pxのテキスト</p>
</div>

.parent {
  /* 親要素のフォントサイズが16px */
  font-size: 16px;
}

.child {
  /* 子要素のフォントサイズは親要素の150%の大きさになる */
  font-size: 150%; 
}