H1-H6 etiketleri için en yaygın yazı tipi boyutları nelerdir [kapalı]

107

Genel bir en iyi uygulama temeli olarak nereden başlayacağımdan her zaman emin değildim. Evet, tasarımınıza bağlı olduğunu biliyorum - ama en yaygın olanı nedir?

İşte şu anda bir başlangıç olarak sahip olduğum şey:

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

Evet, şu anki işimde EM kullanmıyoruz.

Teşekkürler

html css frontend

— Rsturim
kaynak

Bunun uygun bir soru olduğunu düşünmeyin çünkü cevap yok ..

— Treemonkey

Treemonkey, gerçekten mi? Fikir sormak doğru değil mi?

— rsturim

En sevdiğim şey, bir şeyi google'da arattığımda, en iyi sonuç bir StackOverflow gönderisi ve soru kapalı veya beklemede. Zamanın testine dayanmak için bilginin bayat kapsüllenmesi gibisi yoktur.

— Kyle Kelley

Hayır, @rsturim, görüş sormak uygun değil

— Liam

Bunun gibi bir soru aradım, bu nedenle bu belirli yığın için konu dışındayken, onu yararlı buldum. Bu sorunun kapatılması, daha fazla diyalog, tartışma veya yanıt eklenemeyeceği anlamına gelir ve bu sorunun genel olarak topluluk için değerini düşürür. Diğer konu dışı soruların daha uygun yığınlara taşındığını gördüm. Bu, bu soru için yapılabilir mi? Şerefe ~

— Pete

Yanıtlar:

213

Tarayıcının varsayılan stil sayfasına bağlı olacaktır. CSS2.1 Kullanıcı Aracısı stil sayfası varsayılanlarının (resmi olmayan) bir tablosunu burada görüntüleyebilirsiniz .

Yukarıda listelenen sayfaya bağlı olarak, varsayılan boyutlar şuna benzer:

    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 için varsayılan stil sayfası da göz atmaya değer . W3C, bu stilleri varsayılan olarak kullanmanızı önerir. Kısaltılmış bir alıntı:

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

Umarım bu bilgiler yardımcı olur.

— Tatlı çörek
kaynak

H6 için HTML 4 önerisi göz ardı edildi ve 0.67em kazandı; Günümüzde WebKit ve FF em, IE8 ile aynı boyutları kullanır . w3.org/TR/html-markup/h6.html ayrıca "tipik" ekranın 0,67em olduğunu söylüyor.

— Beni Cherniavsky-Paskin

Bunun arkasında herhangi bir mantık veya rastgele bir adam "bu boyutlarda başlıklar olacaktır" dedi mi?

— 2017

Yanıtı HTML5 varsayılanlarını içerecek şekilde güncellemek iyi bir fikir olabilir.

— Yüce deve Moha

HTML5 olanlar burada w3.org/TR/html5/rendering.html#sections-and-headings

— Sirenler

@ BeniCherniavsky-PaskinBağlantı koptu, lütfen yenisini gönderir misiniz?

— kuldeep

Başlıklar normalde kalın karakterlidir; bu boyut uyuşması gösterimi için kapatıldı. MSIE ve Opera bu boyutları aynı şekilde yorumlar, ancak Gecko tarayıcılarının ve Chrome'un Başlık 6'yı 10 piksel / yazı tipi boyutu 1 yerine 11 piksel ve Başlık 3'ü 18 piksel / yazı tipi boyutu 4 yerine 19 piksel olarak yorumladığını unutmayın (ancak doğrudan karşılaştırmada ve kullanımda imkansız olsa bile farkı söyleyin). Görünüşe göre Gecko ayrıca metni 10 pikselden daha küçük olmayacak şekilde sınırlıyor.

— Sujit Agarwal
kaynak