はじめに
フォントサイズを表す CSSクラス名として、どんな名前を使うのがよいか調べるため、CSSの仕様や有名ライブラリで使用されている名前を調べてみました。
CSS Fonts Module Level 3
まずは、CSS のフォントに関する仕様である CSS Fonts Module Level 3 です。
「3.5. Font size: the font-size property」にある以下の表が参考になりそうでした。
CSS absolute-size values | xx-small | x-small | small | medium | large | x-large | x-large | |
---|---|---|---|---|---|---|---|---|
拡縮率 | 3/5 (0.6) |
3/4 (0.75) |
8/9 (0.89) |
1 | 6/5 (1.2) |
3/2 (1.5) |
2/1 (2) |
3/1 (3) |
HTML 見出し | h6 | h5 | h4 | h3 | h2 | h1 | ||
HTML font sizes | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
※ 一部日本語に訳したり、分数に少数値を追加したりしています。
7段階分の名前と大きさの目安まで書いてくれています(拡縮率が切りのいい数字ではない理由はよく分かりません)。
ここでは本題ではありませんが、<h5>
や <h6>
は medium サイズより小さいのですね。
Fontawesome
Fontawesome は、アイコンフォントを提供しているサービスです。
Sizing Icons | Font Awesome の「Sizing Scale Details」に表があります。ここに、それぞれのサイズに対する Class 名とサイズが載っていました。
Class | Size | Other Notes |
---|---|---|
fa-xs | .75em | |
fa-sm | .875em | |
fa-lg | 1.33em | Also applies vertical-align: -25% |
fa-2x | 2em | |
fa-3x | 3em | |
fa-4x | 4em | |
fa-5x | 5em | |
fa-6x | 6em | |
fa-7x | 7em | |
fa-8x | 8em | |
fa-9x | 9em | |
fa-10x | 10em |
もちろんこれらは「アイコンとして使用するフォント」用なので、用意されているサイズの種類やサイズ自体もそのまま参考にすることはできません。しかし、fa-lg
などの名前は参考になると思います。
Bootstrap (v4)
Bootstrap は、CSSフレームワークです。
あくまで Bootstrap v4 での話しになりますが、フォントサイズを細かく指定するための CSSクラスは用意されていないようです。_variables.scss
ファイルでは、Sass の変数が定義されていますが、フォントサイズに関してここで定義されているのは、以下の4つくらいです。
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: ($font-size-base * 1.25) !default;
$font-size-sm: ($font-size-base * .875) !default;
$small-font-size: 80% !default;
まとめ
CSSの仕様である「CSS Fonts Module Level 3」を参考にするのが一番よいのでしょうが、サイズの種類(段階)が少ないですので、Fontawesome も合わせて参考にするのが良さそうです。
これらを参考にして、自分用にフォントサイズのCSSクラスを作るとしたらどんな名前にするか一例を考えてみました。
Class | Size |
---|---|
xxs | .5em |
xs | .75em |
sm | .875em |
md | 1em |
lg | 1.25em |
xl | 1.5em |
xxl | 1.75em |
2x | 2em |
3x | 3em |
4x | 4em |
なるべく切りのいい数字を採用していますが、実際に使用する場合は、サイズの細かな調整が必要になるかもしれません。
デモページも作ってみました。
デモページ
いかがでしょうか?