数列を使用して数学的に設定するCSSのfont-size

公開日
更新日

HTML の見出し (h1, h2, h3, h4, h5, h6) などに設定する font-size の値を、どのように決めていますか？

今回は「なんとなくこれくらい」から卒業するための、フィボナッチ数列、等比数列、等差数列、階差数列、調和数列などを使用し数学的に作られた、フォントサイズの一覧を紹介します。

倍率に分数を使用したフォントサイズ

CSS Fonts Module Level 4 の UA 向けフォントサイズ

UA (ブラウザ) のデフォルトスタイルの指針となるフォントサイズ表です。

フォントサイズ計算式キーワード要素表示例
3em3 / 1 * 1emxxx-large–壱弐参いろはイロハ123ABCabc
2em2 / 1 * 1emxx-largeh1壱弐参いろはイロハ123ABCabc
1.5em3 / 2 * 1emx-largeh2壱弐参いろはイロハ123ABCabc
1.2em6 / 5 * 1emlargeh3壱弐参いろはイロハ123ABCabc
1em–mediumh4壱弐参いろはイロハ123ABCabc
0.888888em8 / 9 * 1emsmallh5壱弐参いろはイロハ123ABCabc
0.75em3 / 4 * 1emx-small–壱弐参いろはイロハ123ABCabc
0.6em3 / 5 * 1emxx-smallh6壱弐参いろはイロハ123ABCabc

分数にフィボナッチ数列を組み合わせたフォントサイズ

フィボナッチ数列とは、前の2つの数を足した数からなる数列です。

1, 1, 2, 3, 5, 8, 13, …

基準となるフォントサイズ (1em) よりも大きいフォントサイズは分母が、小さいフォントサイズは分子がフィボナッチ数列になっています。

    フォントサイズ計算式キーワード要素表示例
    3em3 / 1 * 1emxxx-large–壱弐参いろはイロハ123ABCabc
    2em2 / 1 * 1emxx-largeh1壱弐参いろはイロハ123ABCabc
    1.5em3 / 2 * 1emx-largeh2壱弐参いろはイロハ123ABCabc
    1.333333em4 / 3 * 1em–h3壱弐参いろはイロハ123ABCabc
    1.2em6 / 5 * 1emlargeh4壱弐参いろはイロハ123ABCabc
    1.125em9 / 8 * 1em–h5壱弐参いろはイロハ123ABCabc
    1em–mediumh6, p壱弐参いろはイロハ123ABCabc
    0.888888em8 / 9 * 1emsmallsmall壱弐参いろはイロハ123ABCabc
    0.833333em5 / 6 * 1em––壱弐参いろはイロハ123ABCabc
    0.75em3 / 4 * 1emx-small–壱弐参いろはイロハ123ABCabc
    0.666666em2 / 3 * 1emxx-smallrt壱弐参いろはイロハ123ABCabc
    0.5em1 / 2 * 1em––壱弐参いろはイロハ123ABCabc
    0.333333em1 / 3 * 1em––壱弐参いろはイロハ123ABCabc

    等比数列を使用したフォントサイズ

    等比数列とは、隣り合う2つの数の比が等しい数列です。次の例は、初項 (最初の数) が 1、公比 (等しい比) が 3 の等比数列です。

    例: 1, 3, 9, 27, 81, 243, 729, 2187, …

    1.125 (9/8) の等比数列を使用したフォントサイズ

    初項と公比が共に 1.125、つまり 1.125 を累乗したフォントサイズです。

    フォントサイズ計算式キーワード要素表示例
    2.565784em1em * 1.1258xxx-large–壱弐参いろはイロハ123ABCabc
    2.280697em1em * 1.1257––壱弐参いろはイロハ123ABCabc
    2.027286em1em * 1.1256xx-largeh1壱弐参いろはイロハ123ABCabc
    1.802032em1em * 1.1255–h2壱弐参いろはイロハ123ABCabc
    1.601806em1em * 1.1254x-largeh3壱弐参いろはイロハ123ABCabc
    1.423828em1em * 1.1253–h4壱弐参いろはイロハ123ABCabc
    1.265625em1em * 1.1252largeh5壱弐参いろはイロハ123ABCabc
    1.125em1em * 1.125–h6壱弐参いろはイロハ123ABCabc
    1em–mediump壱弐参いろはイロハ123ABCabc
    0.888888em1em / 1.125smallsmall壱弐参いろはイロハ123ABCabc
    0.790123em1em / 1.1252––壱弐参いろはイロハ123ABCabc
    0.702331em1em / 1.1253x-small–壱弐参いろはイロハ123ABCabc
    0.624295em1em / 1.1254––壱弐参いろはイロハ123ABCabc
    0.554928em1em / 1.1255xx-smallrt壱弐参いろはイロハ123ABCabc
    0.493270em1em / 1.1256––壱弐参いろはイロハ123ABCabc

    1.2 (6/5) の等比数列を使用したフォントサイズ

    初項と公比が共に 1.2、つまり 1.2 を累乗したフォントサイズです。

    フォントサイズ計算式キーワード要素表示例
    2.985984em1em * 1.26xxx-large–壱弐参いろはイロハ123ABCabc
    2.48832em1em * 1.25––壱弐参いろはイロハ123ABCabc
    2.0736em1em * 1.24xx-largeh1壱弐参いろはイロハ123ABCabc
    1.728em1em * 1.23–h2壱弐参いろはイロハ123ABCabc
    1.44em1em * 1.22x-largeh3壱弐参いろはイロハ123ABCabc
    1.2em1em * 1.2largeh4壱弐参いろはイロハ123ABCabc
    1em–mediumh5, p壱弐参いろはイロハ123ABCabc
    0.833333em1em / 1.2smallh6, small壱弐参いろはイロハ123ABCabc
    0.694444em1em / 1.22x-small–壱弐参いろはイロハ123ABCabc
    0.578703em1em / 1.23xx-smallrt壱弐参いろはイロハ123ABCabc
    0.482253em1em / 1.24––壱弐参いろはイロハ123ABCabc

    1.25 (5/4) の等比数列を使用したフォントサイズ

    初項と公比が共に 1.25、つまり 1.25 を累乗したフォントサイズです。

    フォントサイズ計算式キーワード要素表示例
    3.051757em1em * 1.255xxx-large–壱弐参いろはイロハ123ABCabc
    2.441406em1em * 1.254––壱弐参いろはイロハ123ABCabc
    1.953125em1em * 1.253xx-largeh1壱弐参いろはイロハ123ABCabc
    1.5625em1em * 1.252x-largeh2壱弐参いろはイロハ123ABCabc
    1.25em1em * 1.25largeh3壱弐参いろはイロハ123ABCabc
    1em–mediumh4, p壱弐参いろはイロハ123ABCabc
    0.8em1em / 1.25smallh5, small壱弐参いろはイロハ123ABCabc
    0.64em1em / 1.252x-smallh6壱弐参いろはイロハ123ABCabc
    0.512em1em / 1.253xx-smallrt壱弐参いろはイロハ123ABCabc

    増減値に等比数列を使用したフォントサイズ

    基準となる数 (1em) の増減値 (増減させる数) に等比数列を使用したフォントサイズです。この表の増減値の初項は 0.0625em (1em が 16px のとき 1px に相当)、公比は 2 です。

    フォントサイズ計算式キーワード要素表示例
    3em1em + 2emxxx-large–壱弐参いろはイロハ123ABCabc
    2em1em + 1emxx-largeh1壱弐参いろはイロハ123ABCabc
    1.5em1em + 0.5emx-largeh2壱弐参いろはイロハ123ABCabc
    1.25em1em + 0.25emlargeh3壱弐参いろはイロハ123ABCabc
    1.125em1em + 0.125em–h4壱弐参いろはイロハ123ABCabc
    1.0625em1em + 0.0625em–h5壱弐参いろはイロハ123ABCabc
    1em–mediumh6, p壱弐参いろはイロハ123ABCabc
    0.9375em1em – 0.0625em––壱弐参いろはイロハ123ABCabc
    0.875em1em – 0.125emsmallsmall壱弐参いろはイロハ123ABCabc
    0.75em1em – 0.25emx-small–壱弐参いろはイロハ123ABCabc
    0.5em1em – 0.5emxx-smallrt壱弐参いろはイロハ123ABCabc

    増減値に等差数列を使用したフォントサイズ

    等差数列とは、隣り合う2つの数の差が等しい数列です。次の例は、初項 (最初の数) が 1、公差 (等しい差) が 3 の等差数列です。

    例: 1, 4, 7, 10, 13, 16, 19, 22, …

    この表の増減値の初項と公差は共に 0.125em (1em が 16px のとき 2px に相当) です。

    フォントサイズ計算式キーワード要素表示例
    3em1em + 2emxxx-large–壱弐参いろはイロハ123ABCabc
    2.875em1em + 1.875em––壱弐参いろはイロハ123ABCabc
    2.75em1em + 1.75em––壱弐参いろはイロハ123ABCabc
    2.625em1em + 1.625em––壱弐参いろはイロハ123ABCabc
    2.5em1em + 1.5em––壱弐参いろはイロハ123ABCabc
    2.375em1em + 1.375em––壱弐参いろはイロハ123ABCabc
    2.25em1em + 1.25em––壱弐参いろはイロハ123ABCabc
    2.125em1em + 1.125em––壱弐参いろはイロハ123ABCabc
    2em1em + 1emxx-largeh1壱弐参いろはイロハ123ABCabc
    1.875em1em + 0.875em––壱弐参いろはイロハ123ABCabc
    1.75em1em + 0.75em––壱弐参いろはイロハ123ABCabc
    1.625em1em + 0.625emx-largeh2壱弐参いろはイロハ123ABCabc
    1.5em1em + 0.5em––壱弐参いろはイロハ123ABCabc
    1.375em1em + 0.375em–h3壱弐参いろはイロハ123ABCabc
    1.25em1em + 0.25emlargeh4壱弐参いろはイロハ123ABCabc
    1.125em1em + 0.125em–h5壱弐参いろはイロハ123ABCabc
    1em–mediumh6, p壱弐参いろはイロハ123ABCabc
    0.875em1em – 0.125emsmallsmall壱弐参いろはイロハ123ABCabc
    0.75em1em – 0.25emx-small–壱弐参いろはイロハ123ABCabc
    0.625em1em – 0.375emxx-smallrt壱弐参いろはイロハ123ABCabc
    0.5em1em – 0.5em––壱弐参いろはイロハ123ABCabc

    増減値に階差数列を使用したフォントサイズ

    階差数列とは、隣り合う2つの数の差からできる数列です。次の例の数列からは、1, 2, 3, 4, 5, 6, … という新たな数列ができます。

    例: 1, 2, 4, 7, 11, 16, 22, …

    この表の増減値は 0.0625em (1em が 16px のとき 1px に相当) から 0.0625em ずつ増減する階差数列になります。

    フォントサイズ計算式キーワード要素表示例
    2.8125em1em + 1.8125emxxx-large–壱弐参いろはイロハ123ABCabc
    2.375em1em + 1.375em––壱弐参いろはイロハ123ABCabc
    2em1em + 1emxx-largeh1壱弐参いろはイロハ123ABCabc
    1.6875em1em + 0.6875em–h2壱弐参いろはイロハ123ABCabc
    1.4375em1em + 0.4375emx-largeh3壱弐参いろはイロハ123ABCabc
    1.25em1em + 0.25em–h4壱弐参いろはイロハ123ABCabc
    1.125em1em + 0.125emlargeh5壱弐参いろはイロハ123ABCabc
    1.0625em1em + 0.0625em–h6壱弐参いろはイロハ123ABCabc
    1em–mediump壱弐参いろはイロハ123ABCabc
    0.9375em1em – 0.0625emsmall–壱弐参いろはイロハ123ABCabc
    0.875em1em – 0.125emx-smallsmall壱弐参いろはイロハ123ABCabc
    0.75em1em – 0.25emxx-smallrt壱弐参いろはイロハ123ABCabc
    0.5625em1em – 0.4375em–壱弐参いろはイロハ123ABCabc

    調和数列を使用したフォントサイズ

    調和数列とは、分子の数が固定された、隣り合う2つの分数の分母が等差数列になる数列です。次の例は、分子の数が 4 に固定された調和数列です。

    例: 4/1 (4), 4/2 (2), 4/3, 4/4 (1), 4/5, 4/6 (2/3), 4/7, 4/8 (1/2), …

    分子が 6 の調和数列を使用したフォントサイズ

    フォントサイズ計算式キーワード要素表示例
    3em6 / 2 * 1emxxx-large–壱弐参いろはイロハ123ABCabc
    2em6 / 3 * 1emxx-largeh1壱弐参いろはイロハ123ABCabc
    1.5em6 / 4 * 1emx-largeh2壱弐参いろはイロハ123ABCabc
    1.2em6 / 5 * 1emlargeh3壱弐参いろはイロハ123ABCabc
    1em–mediumh4, p壱弐参いろはイロハ123ABCabc
    0.857142em6 / 7 * 1emsmallh5, small壱弐参いろはイロハ123ABCabc
    0.75em6 / 8 * 1emx-smallh6壱弐参いろはイロハ123ABCabc
    0.666666em6 / 9 * 1emxx-smallrt壱弐参いろはイロハ123ABCabc
    0.6em6 / 10 * 1em––壱弐参いろはイロハ123ABCabc

    分子が 8 の調和数列を使用したフォントサイズ

    フォントサイズ計算式キーワード要素表示例
    2.666666em8 / 3 * 1emxxx-large–壱弐参いろはイロハ123ABCabc
    2em8 / 4 * 1emxx-largeh1壱弐参いろはイロハ123ABCabc
    1.6em8 / 5 * 1emx-largeh2壱弐参いろはイロハ123ABCabc
    1.333333em8 / 6 * 1emlargeh3壱弐参いろはイロハ123ABCabc
    1.142857em8 / 7 * 1em–h4壱弐参いろはイロハ123ABCabc
    1em–mediumh5, p壱弐参いろはイロハ123ABCabc
    0.888888em8 / 9 * 1em–h6壱弐参いろはイロハ123ABCabc
    0.8em8 / 10 * 1emsmallsmall壱弐参いろはイロハ123ABCabc
    0.727272em8 / 11 * 1emx-small–壱弐参いろはイロハ123ABCabc
    0.666666em8 / 12 * 1emxx-smallrt壱弐参いろはイロハ123ABCabc
    0.615384em8 / 13 * 1em––壱弐参いろはイロハ123ABCabc

    分子が 10 の調和数列を使用したフォントサイズ

    フォントサイズ計算式キーワード要素表示例
    3.333333em10 / 3 * 1emxxx-large–壱弐参いろはイロハ123ABCabc
    2.5em10 / 4 * 1em––壱弐参いろはイロハ123ABCabc
    2em10 / 5 * 1emxx-largeh1壱弐参いろはイロハ123ABCabc
    1.666666em10 / 6 * 1em–h2壱弐参いろはイロハ123ABCabc
    1.428571em10 / 7 * 1emx-largeh3壱弐参いろはイロハ123ABCabc
    1.25em10 / 8 * 1em–h4壱弐参いろはイロハ123ABCabc
    1.111111em10 / 9 * 1emlargeh5壱弐参いろはイロハ123ABCabc
    1em–mediumh6, p壱弐参いろはイロハ123ABCabc
    0.909090em10 / 11 * 1emsmallsmall壱弐参いろはイロハ123ABCabc
    0.833333em10 / 12 * 1em––壱弐参いろはイロハ123ABCabc
    0.769230em10 / 13 * 1emx-small–壱弐参いろはイロハ123ABCabc
    0.714285em10 / 14 * 1em––壱弐参いろはイロハ123ABCabc
    0.666666em10 / 15 * 1emxx-smallrt壱弐参いろはイロハ123ABCabc
    0.625em10 / 16 * 1em––壱弐参いろはイロハ123ABCabc

    分子が 12 の調和数列を使用したフォントサイズ

    フォントサイズ計算式キーワード要素表示例
    3em1em * 12 / 4xxx-large–壱弐参いろはイロハ123ABCabc
    2.4em1em * 12 / 5––壱弐参いろはイロハ123ABCabc
    2em1em * 12 / 6xx-largeh1壱弐参いろはイロハ123ABCabc
    1.714285em1em * 12 / 7–h2壱弐参いろはイロハ123ABCabc
    1.5em1em * 12 / 8x-largeh3壱弐参いろはイロハ123ABCabc
    1.333333em1em * 12 / 9–h4壱弐参いろはイロハ123ABCabc
    1.2em1em * 12 / 10largeh5壱弐参いろはイロハ123ABCabc
    1.090909em1em * 12 / 11–h6壱弐参いろはイロハ123ABCabc
    1em–mediump壱弐参いろはイロハ123ABCabc
    0.923076em1em * 12 / 13––壱弐参いろはイロハ123ABCabc
    0.857142em1em * 12 / 14smallsmall壱弐参いろはイロハ123ABCabc
    0.8em1em * 12 / 15––壱弐参いろはイロハ123ABCabc
    0.75em1em * 12 / 16x-small–壱弐参いろはイロハ123ABCabc
    0.705882em1em * 12 / 17––壱弐参いろはイロハ123ABCabc
    0.666666em1em * 12 / 18xx-smallrt壱弐参いろはイロハ123ABCabc
    0.631578em1em * 12 / 19––壱弐参いろはイロハ123ABCabc
    0.6em1em * 12 / 20––壱弐参いろはイロハ123ABCabc

    〆

    デジタル庁のデザインシステムは参考になります。

    関連記事