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

メールアドレスが公開されることはありません。

関連記事

MathJax を試してみました。

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。 基本的な使い方は、 HTMLファイルに以下を記述して MathJax.js を読み込みます。HTMLフ …

Web

【HTML】picture 要素について

目次1. <picture> 要素とは?2. 仕様3. <source> 要素4. 利用例5. 実際に使用された画像がどれかを JavaScript で取得する6. 注意点7. …

Web

インストールが可能になるための最低限のウェブサイト(PWA)を作る

インストールが可能になるための最低限のウェブサイト(PWA)を作る方法について説明します。

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Web

Chrome で開いたタブを検索する

Chrome で開いたタブを検索する手順を紹介します。