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


107

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

ここに私が最初に持っているものがあります:

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を使用していません。

ありがとう


4
..返答がないとして、これは適切な質問であることと思ういけない
Treemonkey

19
ツリーモンキー、本当に?意見を求めても大丈夫ですか?
rsturim 2011年

27
私が気に入っているのは、Googleで何かをググるときの一番の結果はStackOverflow投稿で、質問はクローズされているか保留中です。時の試練に耐えるための古い知識のカプセル化のようなものはまったくありません。
カイルケリー2013

2
いいえ、@ rsturim、意見を求めることはでき
リアム

6
私はこのような質問を検索したので、この特定のスタックのトピックから外れている間、私はそれが有用であるとわかりました。この質問を閉じると、ダイアログ、ディベート、または回答を追加できなくなり、コミュニティ全体に対してこの質問の価値が低下します。他のトピック外の質問がより適切なスタックに移行するのを見てきました。これはこの質問に対して実行できますか?乾杯〜
ピート・

回答:


213

それはブラウザのデフォルトのスタイルシートに依存します。CSS2.1ユーザーエージェントスタイルシートのデフォルトの(非公式の)表をここで確認できます

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

    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; }

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


3
H6に対するHTML 4の推奨は無視され、0.67emが勝ちました。現在、WebKitとFFはemIE8 と同じサイズを使用しています。 w3.org/TR/html-markup/h6.htmlは、「通常の」表示は0.67emであるとも述べています。
Beni Cherniavsky-Paskin 2013年

このまたはランダムな男の後ろに「これらのサイズの見出しがある」と言った理由はありますか?
rzb 2017年

1
HTML5のデフォルトを含めるように回答を更新することをお勧めします。
Moha全能のラクダ


@ BeniCherniavsky-Paskintheリンクが壊れています。新しいリンクを投稿してください。
kuldeep

3

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.