文字サイズは「rem」を使って一括管理

webサイトを作る上で、文字の大きさを考慮することは非常に大切。
一文字ずつ「px」で設定しても良いのですが、全体のサイズ変更が発生した場合や、端末ごとでの文字を一括調整する時に便利な「rem」による設定方法をメモ。

html{
	font-size: 15px;
}
h1{
	font-size: 1.6rem; // 15pxの1.6倍の24px
}
h2{
	font-size: 1.2rem; // 15pxの1.2倍の18px
}
small{
	font-size: 0.8rem; // 15pxの0.8倍の12px
}

CSSで「html」タグに基準となるフォントサイズを設定、その他のタグはこの数値を基準にした倍率を「rem」で行っていく。
この方法であれば、仮に全体的にサイズを大きくしてほしいという要望があった場合でも基準値の「15px」を変更するだけで比率を変えることなく、全体サイズの変更が可能。

また、「rem」は「margin」や「padding」にも使えるので、枠の中に文字を入れた場合の余白調整や、改行幅の調整にも使える。