【CSS】独自のジャンプ率を設定する

どうしたい？

h1, h2要素のデフォルト文字サイズがデカすぎるので、地の文に対する見出しの文字サイズ比率(ジャンプ率)をこちらで設定してしまいたい。
具体的には

• h1: 2倍
• h2: 1.5倍
• h3: 1.25倍

にします。

CSSを編集する

stylesheet.css

html {
  font-size: 1rem;
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.2em;
  }
}

@media screen and (max-width:576px) {
  html {
    font-size: 0.63rem;
  }
}

解説

html要素でfont-sizeを指定する

まずは地の文のサイズを設定します。
地の文の文字サイズを指定するときはremを使用します。
1remとすることでhtmlのデフォルトフォントサイズである16pxを指定することができます。
この値に対する文字サイズの比を下で設定します。

見出し要素でジャンプ率を指定する

html要素にネストしたh1~h3要素のfont-sizeを指定します。
このとき、文字サイズを指定するのにemを使用することで親要素であるhtml要素に指定した値に対する比率を設定できます。

(おまけ)SPサイズのfont-sizeを指定する

SPサイズでの地の文のフォントサイズを指定します。
今回は10pxにしたいので、10/16=0.625から0.63remとしました。
（16*0.63=10.08なので大体こんなもんでしょう。）
見出しサイズは上で指定しているので、ジャンプ率を保ったままとなります。

参考

ノンデザイナーなら押さえたい！デザインの基本「ジャンプ率」～デザインを大切にするマーケティング担当者へ～

【CSS】em単位の特徴と使い方！rem・px・%との違いも解説

Text (テキスト) - Bootstrap公式リファレンス