Web

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

投稿日:2018年11月30日 更新日:

はじめに

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

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

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

デモページ

🔗 Font size names

いかがでしょうか?

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

CSS

【CSS】kbd 要素には “white-space: nowrap” を指定しましょう

kbd 要素に何も指定しないと、以下のように途中で改行されてしまうことがあります。 before 通常の状態 これを避けるために、kbd 要素に対して “white-space: nowr …

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

no image

HTML文書の文字エンコーディングに UTF-8 を使うことが公式に明文化されました

HTML文書は文字エンコーディングUTF-8でなければなりません – 水底の血 という記事で知ったのですが、「HTML文書の文字エンコーディングは UTF-8 でなければならない」という意 …

DokuWiki

DokuWiki で閲覧専用ユーザーを作る手順

DokuWiki において、閲覧専用ユーザーを作成する手順を紹介します。 目次DokuWiki で、閲覧専用ユーザーを作成する手順1. 閲覧専用グループを追加する。2. ユーザーにグループを指定するお …

Web

【HTML】img 要素の srcset 属性 と sizes 属性について

目次1. デバイスピクセル比2. img 要素の srcset 属性 と sizes 属性3. sizes 属性4. srcset 属性x 単位で画像ファイルのサイズを指定する場合w 単位で画像ファイ …