フォントサイズに関するCSSクラス名にはどんな名前があるのか調べてみました

はじめに

フォントサイズを表す 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

なるべく切りのいい数字を採用していますが、実際に使用する場合は、サイズの細かな調整が必要になるかもしれません。

デモページも作ってみました。

いかがでしょうか？

参考

• CSS Fonts Module Level 3
• Syntax and basic data types | CSS 2.2 Specification
• bootstrap/_variables.scss at v4.1.3 · twbs/bootstrap · GitHub