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

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

関連記事

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

PWA

Webブラウザと PWA は切り離して欲しい

マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps(PWA)を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ …

Web

ウェブ上の「名前を付けて画像を保存」ができない画像をダウンロードする方法

目次1. 「名前を付けて画像を保存」ができない画像2. この手の画像を保存する方法3. おわりに4. Chrome のデベロッパーツールを使った別の方法(追加:2021-08-04) 1. 「名前を付 …

Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。

Web

HSTS が原因で、ウェブサイトが勝手にhttps接続しないようにする

HSTSが原因で、サイトが勝手にhttps接続されないようにする方法について説明します。