HTML（および一般的なタイポグラフィ）では、H1-H6要素にいくつかの定義されたサイズがあるように見えます。
つまり、ベースラインフォントサイズが16px（または100％）の場合、h1（w / c）は2.25em（36px）になります。また、H2（w / c）は1.5em（24px）になります。など。これらの変数はどこから来るのですか？つまり、H1 = 36px、H2 = 24px、H3 = 21px、H4 = 18px、H5 = 16px、H6=14pxです。（または、必要に応じて、H1 = 2em、H2 = 1.5em、H3 = 1.17emなど、ポイントは数値自体ではなく、それらの間の関係です）
それらの数式はありますか？黄金比やフィボナッチと関係がありますか？私はこれに関する情報を見つけることができませんでした。
編集：より具体的には、パターンは何ですか。なぜそれは36から24から21になりますか、または最初に36から始まります（または、必要に応じて、2emから1.5emから1.17emなど）？
ああ、元の番号を思いついた場所を指定するのを忘れました、それらはここからです
更新：現在、最近のブラウザはこれらの値を使用しています。
元の答え：
これらは、各ブラウザメーカーによって個別に定義されています。
それらはブラウザ間で統一されておらず、セマンティクス（大きなヘッダー、わずかに小さなヘッダーなど）のためにあります。
これらのHTML4仕様を見ると、スタイル設定の方法については言及されておらず、スタイル設定が必要であるということだけが記載されています。仕様から：
Visual browsers usually render more important headings in larger fonts than less important ones.
これらの一貫性を保つには、それらを定義するリセットスタイルシートを使用する必要があります。
w3がHTML4の推奨されるデフォルトのスタイルシートを次の詳細で定義している場合でも、ほとんどのブラウザーはこの提案を無視します。
h1 {フォントサイズ：2em; マージン：.67em 0}
h2 {フォントサイズ：1.5em; マージン：.75em 0}
h3 {フォントサイズ：1.17em; マージン：.83em 0}
h5 {フォントサイズ：.83em; マージン：1.5em 0}
h6 {フォントサイズ：.75em; マージン：1.67em 0}
h1、h2、h3、h4、
h5、h6 {フォントの太さ：太字}
font-size:（はい、 h4についてはわかりません）
考えられる進行アプローチの1つは、2 / sqrt [heading＃]などの式を使用して平方根を使用することです。したがって、次のようになります。
H1 = 2/sqrt1 = 2
H2 = 2/sqrt2 = 1.414
H3 = 2/sqrt3 = 1.155
H4 = 2/sqrt4 = 1
H5 = 2/sqrt5 = 0.894
H6 = 2/sqrt6 = 0.816
フォントベースが12の場合、24、17、14、12、11、10に十分に近くなります。他のベースの場合、結果は整数から少し離れている可能性があります。
フィボナッチはベース16でうまく機能するので、次のようになります。
H1=32
H2=24
H3=19
H4=16
H5=14
H6=13
他の人が言うように、それはブラウザに依存します。
一方、タイポグラフィにはフォントサイズを設定するルールがあります。ベースフォントにサイズがあるX場合、大きいフォントは指数関数的に大きくなるはずです。通常の方法は、、などのサイズをX*sqrt(2)設定することですが、ベースを変更することもできます。X*sqrt(2)^2X*sqrt(2)^3
ただし、コンピュータフォントにはいくつかの特別な要件があります。
以前はビットマップ形式でのみ提供されていたため（サイズは固定されていました）、ベクトル形式で提供された場合でも、一部の形式では2または5で割り切れる特別なサイズが好まれました（これはAmigaの古いベクトルフォントの場合でした）。 ... Agfa Intellifont？）。
現在でも、フォントエンジンは、ヒントアルゴリズムがより適切に機能するため、整数サイズを好みます。
そして、フォントエンジンが今でははるかに良くなったにもかかわらず、人々はこれらの技術的な制限のために選択された値に慣れているようです。
私はこの投稿が古いことを知っています。私は同じ質問に出くわしました、彼らはどこからこれを得るのですか？私はそれを見つけたと思います。
ペンタトニック音階の派生です。タイプスケールはとにかくです。見出しは、1：1の順序ではありませんが、タイプスケールから取得されます。
スケールは次のようになります。891012 14 16 18 21 24 ...スケールは5ステップ（12から24）で2倍になります。各ステップは、base（12）x 2（scale ['it doubles']）のi（step）の累乗を5（ttl step）['i / 5']で割ったもので、最も近い値に丸められます。
したがって、h4はベース、h3はステップ1、h2はステップ3、h1はステップ5、つまりペンタトニックスケールの12のオクターブです。h5とh6は、ベースから1ステップと3ステップです。これを理解すると、a、Eメジャーコードに相当します。
スプレッドシートと音階の説明で理解するのに約2時間かかりました。
いくつかの名目上の数字：
Firefox3およびSafari4（実際にはWebCore）：
H1〜H6、p、メニューなど、htmlを100％（通常は16px）に設定し、以下をレム単位で使用するフォントサイズのいくつかの異なる方法を検討した後、次のアルゴリズム/計算を思いつきました。これは、頻繁に使用される1.14/.875の「マジックナンバー」から微調整されています。鉱山は.8735で、16px/1remのpから36px/2.25remのH1までうまく機能し、12、14、16、18、21、24、28、32などの全体でかなり「通常の」px値に達します。 36など。ジャンボトロンの場合は最大54、オーバーキルの.zilchまではわかります。私は通常、.hugeと.microの範囲内にとどまります。基本的に、私は1.0remに等しいpから始めて、0.8735を連続して乗算して小さくするか、それで除算して大きくします。
item rem px pt
.giant 3.38 54.4 41
.huge 2.95 47.2 35
.big 2.58 41.3 31
h1 2.25 36.0 27
h2 1.97 31.5 24
h3 1.72 27.5 21
h4 1.50 24.0 18
h5 1.31 21.0 16
h6 1.15 18.4 14
p 1.00 16.0 12
.menus 0.87 13.9 10
.legal 0.76 12.2 9
.micro 0.67 10.7 8
.zilch 0.58 9.3 7
/* Font-Sizes using pt */
.giant { font-size:41pt; }
.huge { font-size:35pt; }
.big { font-size:31pt; }
h1 { font-size:27pt; margin-top:0; }
h2 { font-size:24pt; }
h3 { font-size:21pt; }
h4 { font-size:18pt; }
h5 { font-size:16pt; }
h6 { font-size:14pt; }
p { font-size:12pt; margin-bottom:15pt; }
.menus { font-size:10pt; }
.legal { font-size: 9pt; }
.micro { font-size: 8pt; }
.zilch { font-size: 7pt; }
私は最近ポイントを使用しています（pt）。ご覧のとおり、作業がさらに簡単です。レムやエムを使用しないことで誰もが形を崩す前に、率直に言って、この時点で（しゃれは意図していません）私は本当にそれが重要だとは思わない。自分にとって簡単なものを使い始めました。小数点でレムをいじくり回すよりも、単純な整数に計算されるポイントを操作する方が簡単です。
より一般的な方法では、このような関連するサイズは、多くの場合、等比数列に基づいています。つまり、連続する各数値は、前の数値から一定の係数（1.2、またはsqrt（2）など）だけ大きくなります。レンチや六角形のキーのサイズ、メカニックのネジの直径など、またはA5 / A4/A3…ファミリーの用紙サイズでも同じような進行が見られます。
それらの多くは見出しタグのサイズが異なると言っていますが、ブートストラップからデフォルトのフォントサイズまでのバリエーションがありました。ここで言及されているのはデフォルトのフォントサイズです。
h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
私はそれがブラウザ次第だと思います、それはユーザーにフォントサイズを定義させることさえできるかもしれません（私はオペラがそれをしたことを覚えています）。HTML仕様については、あまり詳しく説明していません。
HTMLには6つのレベルの見出しがあり、H1が最も重要で、H6が最も重要ではありません。ビジュアルブラウザは通常、重要度の低い見出しよりも重要度の高い見出しを大きなフォントでレンダリングします。
HTMLはドキュメントの表示ではなく構造を記述するように設計されているため、これは意図的なものです。
W3Cは、ブラウザが実装するデフォルトのレンダリングスタイルシートを提案しました。
あなたはあなたの数字がそれらとは異なることに気付くでしょう。これは、ブラウザメーカーがW3Cの言うことをすべて無視する習慣があるためです。
ブートストラップの場合、ピクセル単位の見出しタグのフォントサイズのバリエーションは次のとおりです。このブートストラップの見出しを確認してください
h1〜36ピクセル）h2〜30
ピクセルh3〜24
ピクセル
h4〜18ピクセル
h5〜14
ピクセルh6〜12ピクセル