フォントのCSS初期設定を62.5%にしてremの計算を簡単に解決する方法

フォントの初期設定

背景

• 新規のWebサイト制作、Webアプリ制作でフォントサイズ設定でいつもわたわたしてしまう

施行

• 特別な理由が無ければこうする事にしている

課題点

• 単位をremにしよう
• remにしながらもpxでないとデザイン上のコミュニケーションがしにくいのでpxと互換性のある数値を出したい

解決策

html
  font-size: 62.5%

こうすることで、1rem = 10px 1.6rem = 16px と切りよくremとpxが連動する

汎用性を持たせる

sassのmixin変数

@mixin fz($size: 24, $base: 16)
  font-size: $size + px
  font-size: ($size / ($base * 0.625)) + rem

• これはpxと、pxに相当するremの両方を書き出す
• remが後に書き出され、remが使えない時のフォールバックとしてpxも用意するという用途
• ※ただし現代ではremはほぼ使えるので font-size: $size + px は無くても可

参照 can i use
https://caniuse.com/#feat=rem

mixin読み込み方

.hoge
  @include fz(16)

書き出された結果

.hoge
  font-size: 16px
  font-size: 1.6rem

これでremの計算は考えずにさくさくフォントサイズが書けますね!

参考初期設定

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  word-wrap: break-word;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  color: #222;
  font-size: 100%;
  line-height: 1.5;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}

.wrap{
  font-size: 1.6rem;
}

CodePen

See the Pen How to font-size: 62.5% by Pistol (@pistol) on CodePen.

---

参照にさせていただいた記事

font-size指定「px、em、rem、%」の種類
https://www.w-endless.com/web_labo/service/production/49

｛font-size:62.5％｝が62.5％になったワケ
https://01earth.jp/web-create/coding/font-size_why_62point5percent/

謎の数字、{font-size: 62.5%;}ってなに？
https://www.esz.co.jp/blog/28.html