HTML/CSS 基本フォントサイズについて考える #CSS

フォントサイズ検証時のメモ。
「変数名なんだっけ？」→ 探すは避けたい。
フォントファミリーによって"大きさ感"や"ジャギー感(特にWindows)"が変わるので、実ブラウザでのチェックは必要。

前提

ブラウザ間の相違を無くす normazire.css を導入

CSS が読み込まれる順序は以下の通り

ブラウザのデフォルト値
normazire.css
自分のスタイルシート style.css

normazire.css を適用、自分のスタイルシートが白紙の時のフォントサイズ/行高は以下の通り。

デフォルト = font-size: medium
16px/18.4px (1.15)

フォントファミリーはブラウザで異なる (Safari はヒラギノ明朝、Chrome や Firefox はゴシック体など)

フォントサイズのキーワード指定 (サイズと行間の一覧)

ブラウザデフォルトで xx-small 〜 xx-large までの７つの絶対サイズ + 2つの相対サイズをキーワード指定できる。
行高は指定なしなら line-height: 1.15 を引き継ぐ

相対サイズ

現在適用されているフォントサイズの相対で大きさが決まる。
以下、ベースフォント16pxの場合

font-size: larger 19.2px (120%)/22.0833px
font-size: smaller 13.3333px (10/12 = 83.333125%)/15.3333px

絶対サイズ

ベースフォントや現在のフォントサイズに影響されず、常に一定の大きさ。
昔の <font size="1"> 〜 <font size="7"> と同等の効果。
ブラウザで文字を大きくした際も影響を受けない。
※ 自分は使うことはないと思う

font-size: xx-large 32px (200%)/36.8px
font-size: x-large 24px (150%)/27.6px
font-size: large 18px (112.5%)/20.7px
font-size: small 13px (81.25%)/14.95px
font-size: x-small 10px (62.5%)/11.5px
font-size: xx-small ※ 10px 以下は 10px に自動調整するブラウザがあるので使わない

小さい文字を指定するのに small 要素を使う？

HTML の <small> 要素は、テキストのフォントサイズをブラウザーの最小フォントサイズを限度として、一段階縮小します（例えば large から medium へ、 small から x-small へ）。
HTML5 において、表示上のスタイルとは関係なく、この要素は著作権表示や法的表記のような、注釈や小さく表示される文を表すために再提案されました。
small - HTML | MDN

HTML5 に従い、著作権や法的表記のような注釈等の小さく表示する文に使うこととする。
注釈なら使うシーンは多くある。

実際の使用例 (Sass のサンプル)

SCSSの変数、HTMLタグのクラスの両方でフォントサイズを指定できるようにする。

覚えやすいので、上記の"絶対サイズ"のキーワードに合わせたものとした。
必ずサイズが続くので、クラス名前半は "font-size-" でなく "font-" と短くした。
単位は常にベースフォント(html 要素のフォントサイズ)を基準とする rem とした。
比率は変えれない larger, smaller でこと足り、HTMLのクラス指定で使わなくていいなら、変数/クラスを減らすなどの調整も可。

$font-xx-large: 2rem;
$font-x-large : 1.5rem;
// larger: 1.2rem
$font-large   : 1.125rem;
// smaller: .83333125rem
$font-small   : .8125rem;
$font-x-small : .625rem;

.font-xx-large { font-size: $font-xx-large; }
.font-x-large  { font-size: $font-x-large;  }
.font-large    { font-size: $font-large;    }
.font-small    { font-size: $font-small;    }
.font-x-small  { font-size: $font-x-small;  }

// 使用例 1 (変数を使用)
.note {
  font-size: $font-x-small;
}

// 使用 2 (larger, smaller を使用)
.read {
  font-size: larger;
}

HTMLのクラスで実装する場合は、

<p class="font-x-small">小さい文字</p>

参考記事

font-size - CSS: カスケーディングスタイルシート | MDN