私はBootstrap4の文字サイズをこう覚える＆自作サイズ追加

Bootstrap4の文字サイズは、16px＝1remという基準で、以下のようなクラスを割りふればよい。こう見ると、割と小刻みに文字サイズが用意されているようです。

sample.html

<p class="display-1">6rem</p>
<p class="display-2">5.5rem</p>
<p class="display-3">4.5rem</p>
<p class="display-4">3.5rem</p>
<p class="display-5">3rem</p>　※1
<p class="h1">2.5rem</p>
<p class="h2">2rem</p>
<p class="h3">1.75rem</p>
<p class="h4">1.5rem</p>
<p class="h5">1.25rem</p>
<p class="h6">1rem</p>

※1　ただBootstrap4のデフォルト値だけだと、3rem相当の文字サイズがないので、display-5を独自に新設対応。ついでに大きな文字も太字にしちゃおう。以下のコードは、追加するSCSS。

/*大きな文字を太字にする*/
$display1-weight: 500 !default;
$display2-weight: 500 !default;
$display3-weight: 500 !default;
$display4-weight: 500 !default;
/*display-5を新設*/
.display-5 {
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.2;
}