web-dev-qa-db-ja.com

HTMLのH1〜H6フォントサイズ

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など）のはなぜですか？

ああ、私は元の数字をどこで思いついたのかを指定するのを忘れていました。それらは here

htmltypography
51
morbusg

私はこの投稿が古いことを知っています。私は同じ質問でそれに出くわしました、彼らはどこからこれを得るのですか？見つけたと思う。

それは五音音階の音階の派生物です。タイプスケールはとにかくです。見出しはタイプスケールから取得されますが、1：1の順序ではありません。

スケールは次のとおりです。8 9 10 12 14 16 18 21 24 ...スケールは5ステップ（12〜24）で2倍になります。各ステップは、base（12）x 2（scale ['it doubles']）のi(step) 5（ttl steps）['i/5' ]-最も近い値に丸められます。

したがって、h4がベース、h3がステップ1、h2がステップ3、h1がステップ5、またはペンタトニックスケールの12のオクティブです。 h5とh6は逆のベースから1と3ステップです。これを理解すれば、a、Eメジャーコードに相当します。

スプレッドシートと音階の説明を理解するのに約2時間かかりました。

9
Dante

これらは、各ブラウザメーカーによって個別に定義されます。

これらはブラウザ間で均一ではなく、セマンティクス（大きなヘッダー、わずかに小さいヘッダーなど）のためにあります。

HTML 4仕様 for for を見ると、howの記述はありません。彼らshould仕様から：

Visual browsers usually render more important headings in larger fonts than less important ones.

これらに一貫性を持たせたい場合は、それらを定義する reset stylesheet を使用する必要があります。

W3は次の詳細を含むHTML 4の推奨 デフォルトスタイルシート を定義していますが、ほとんどのブラウザーはこの提案を無視します。

 h1 {font-size：2em;マージン：.67em 0} 
 h2 {font-size：1.5em;マージン：.75em 0} 
 h3 {font-size：1.17em;マージン：.83em 0} 
 h5 {font-size：.83em;マージン：1.5em 0} 
 h6 {font-size：.75em;マージン：1.67em 0} 
 h1、h2、h3、h4、
 h5、h6 {font-weight：bolder}

（はい、表示されませんfont-size: for h4）

21
Oded

可能な進行方法の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
12
Lucian Davidescu

他の人が言うように、それはブラウザ依存です。

一方、フォントサイズを設定するためのタイポグラフィのルールがあります。ベースフォントのサイズがXの場合、大きいフォントは指数関数的に大きくなります。通常の方法はX*sqrt(2)、X*sqrt(2)^2、X*sqrt(2)^3などのサイズにすることですが、ベースは変更できます。

ただし、コンピューターフォントにはいくつかの特別な要件があります。

以前はビットマップ形式でのみ提供されていたため（サイズは固定されていました）、ベクター形式で提供された場合でも、一部の形式は2または5で割り切れる特別なサイズを好みました（これはAmigaの古いベクターフォントの場合です） ... Agfa Intellifont？）。

今でも、ヒントエンジンの動作がより優れているため、フォントエンジンは整数サイズをより好んでいます。

そして、今ではフォントエンジンがはるかに良くなったにもかかわらず、人々はこれらの技術的な制限のために選択された値に慣れているようです。

11
liori

いくつかの名目上の数字：

HTML 4のデフォルトスタイルシート ：

  • h1：2em
  • h2：1.5em
  • h3：1.17em
  • h4：1em
  • h5：0.83em
  • h6：0.75em

Firefox および Safari 4（実際には、WebCore） ：

  • h1：2em
  • h2：1.5em
  • h3：1.17em
  • h4：1em
  • h5：0.83em
  • h6：0.67em
6
kennytm

H1〜H6、p、メニューなどでhtmlを100％（通常は16px）に設定し、次をrem単位で設定するさまざまな方法を見て、次のアルゴリズム/計算を思いつきました。これは、よく使用される1.14/.875の「マジックナンバー」から調整されています。私の.8735は、16px/1remのpから36px/2.25remのH1までうまく動作し、12、14、16、18、21、24、28、32 36など、ジャンボトロンの場合は最大54個、最低は.zilchまでです。これは過剰です。私は通常.hugeと.micro内にとどまります。基本的には、1.0remに等しいpから開始し、.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）ポイントを使用していますが、それはあなたが見ることができるように作業がさらに簡単であり、誰もがremまたはemを使用しないために形が崩れる前に私は率直に言ってしまいます本当に重要だとは思わない。自分にとって使いやすいものを使い始めました。小数点のレムを混乱させるよりも、単純な整数に計算するポイントを使用する方が簡単です。

4
Michael Moriarty

より一般的な方法では、このような関連するサイズは、多くの場合、幾何級数に基づいています。つまり、連続する各数値は、前のものから一定の係数（1.2、またはsqrt（2）など）だけ大きくなります。レンチや六角形のキーのサイズ、メカニックのネジの直径など、または用紙サイズのA5/A4/A3…ファミリーにも同じ種類の進歩があります。

2
Damien Pollet

それらの多くは、見出しタグのサイズが異なると言いますが、bootstrap=からデフォルトのfont-sizeへのバリエーションがありました。

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;} 
h5 { font-size: 12px;} 
h6 { font-size: 10px;}
2
Meghana

bootstrap=ピクセル単位の見出しタグのフォントサイズのバリエーションは次のとおりです。このbootstrap見出し

h1-36px）
h2-30px
h3-24px
h4-18px
h5-14px
h6-12px

1
Meghana

それはブラウザ次第であり、ユーザーがフォントサイズを定義することさえできるかもしれないと思います（operaそれを覚えています）。 HTML仕様 はしません詳細に進みます：

HTMLには6つのレベルの見出しがあり、H1が最も重要で、H6が最も重要ではありません。通常、ビジュアルブラウザは、重要度の低い見出しよりも重要な見出しを大きいフォントで表示します。

HTMLはドキュメントの表示ではなく構造を記述するように設計されているため、これは意図的なものです。

1
Otto Allmendinger

W3Cは、ブラウザが実装する デフォルトのレンダリングスタイルシート を提案しました。

あなたの数字がそれらと異なることに気付くでしょう。これは、ブラウザメーカーがW3Cの発言をすべて無視する習慣があるためです。

1
Oli