web-dev-qa-db-ja.com

H1-H6タグの最も一般的なフォントサイズは何ですか

一般的なベストプラクティスのベースラインとしてどこから始めるべきかは、常に不確かでした。はい、私はそれがあなたのデザインに依存することを知っています-しかし、最も一般的なものは何ですか？

現在、私がスターターとして持っているものは次のとおりです。

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

はい、現在の仕事ではEMを使用していません。

ありがとう

htmlcssfrontend
97
rsturim

ブラウザのデフォルトのスタイルシートに依存します。 CSS2.1ユーザーエージェントスタイルシートのデフォルトの（非公式）テーブルを表示できます here 。

上記のページに基づいて、デフォルトのサイズは次のようになります。

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px

HTML 4のデフォルトスタイルシート もご覧ください。 W3Cは、これらのスタイルをデフォルトとして使用することを推奨しています。要約抜粋：

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

この情報がお役に立てば幸いです。

201
Donut

通常、見出しは太字です。このサイズ対応のデモンストレーションではオフになっています。 MSIEとOperaはこれらのサイズを同じように解釈しますが、GeckoブラウザーとChromeは見出し6を10ピクセル/フォントサイズ1ではなく11ピクセルとして、見出し3を代わりに19ピクセルとして解釈することに注意してください18ピクセル/フォントサイズ4（直接比較しても違いを見分けるのは難しく、使用不可能です）。 Geckoもテキストを10ピクセル以上に制限しているようです。

3
Sujit Agarwal