Apa ukuran font yang paling umum untuk tag H1-H6 [tertutup]

107

Saya selalu tidak yakin harus mulai dari mana sebagai dasar praktik terbaik umum. Ya, saya tahu itu tergantung pada desain Anda - tetapi apa yang paling umum?

Inilah yang saat ini saya miliki sebagai permulaan:

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

Ya, kami tidak menggunakan EM di pekerjaan saya saat ini.

Terima kasih

html css frontend rsturim
sumber
4
jangan berpikir bahwa ini adalah pertanyaan yang tepat karena tidak ada jawaban ..
Treemonkey
19
Treemonkey, benarkah? Apakah tidak boleh meminta pendapat?
rsturim
27
Hal favorit saya adalah ketika saya mencari di Google sesuatu, hasil teratas adalah posting StackOverflow, dan pertanyaannya ditutup atau ditunda. Tidak ada yang seperti enkapsulasi pengetahuan yang basi untuk bertahan dalam ujian waktu.
Kyle Kelley
2
Tidak, @rsturim, tidak boleh meminta pendapat
Liam
6
Saya mencari pertanyaan seperti ini, jadi sementara di luar topik untuk tumpukan khusus ini, saya merasa berguna. Menutup pertanyaan ini berarti tidak ada dialog, debat, atau jawaban lebih lanjut yang dapat ditambahkan, yang menurunkan nilai pertanyaan ini bagi komunitas secara keseluruhan. Saya telah melihat pertanyaan di luar topik lainnya dimigrasikan ke tumpukan yang lebih sesuai. Bisakah ini dilakukan untuk pertanyaan ini? Cheers ~
Pete

Jawaban:

213

Itu akan tergantung pada lembar gaya default browser. Anda dapat melihat tabel (tidak resmi) CSS2.1 default lembar gaya Agen Pengguna di sini .

Berdasarkan halaman yang tercantum di atas, ukuran default terlihat seperti ini:

    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

Yang juga patut dilihat adalah stylesheet default untuk HTML 4 . W3C merekomendasikan penggunaan gaya ini sebagai default. Kutipan ringkasan:

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

Semoga informasi ini bermanfaat.

Donat
sumber
3
Rekomendasi HTML 4 untuk H6 telah diabaikan dan 0.67em menang; Saat ini WebKit dan FF menggunakan emukuran yang sama dengan IE8. w3.org/TR/html-markup/h6.html juga menyatakan tampilan "biasa" adalah 0.67em.
Beni Cherniavsky-Paskin
Adakah alasan di balik ini atau beberapa pria acak pernah berkata "akan ada judul dengan ukuran ini"?
rzb
1
Sebaiknya perbarui jawaban untuk menyertakan default HTML5.
Moha unta yang maha kuasa
1
Di sini, di HTML5 w3.org/TR/html5/rendering.html#sections-and-headings
Sirene
@ BeniCherniavsky-Paskinthe link rusak, bisakah Anda memposting yang baru?
kuldeep
3

Judul biasanya dicetak tebal; yang telah dimatikan untuk demonstrasi korespondensi ukuran ini. MSIE dan Opera menafsirkan ukuran ini sama, tetapi perhatikan bahwa browser Gecko dan Chrome menafsirkan Judul 6 sebagai 11 piksel, bukan 10 piksel / ukuran font 1, dan Judul 3 sebagai 19 piksel, bukan 18 piksel / ukuran font 4 (meskipun sulit untuk membedakannya bahkan dalam perbandingan langsung dan tidak mungkin digunakan). Tampaknya Gecko juga membatasi teks hingga tidak lebih kecil dari 10 piksel.

Sujit Agarwal
sumber