Jakie są najpopularniejsze rozmiary czcionek dla tagów H1-H6 [zamknięte]

107

Zawsze nie byłem pewien, od czego zacząć, jako podstawa ogólnej najlepszej praktyki. Tak, wiem, że to zależy od twojego projektu - ale co jest najczęstsze?

Oto, co mam obecnie jako starter:

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

Tak, nie używamy EM w mojej obecnej pracy.

Dzięki

html css frontend rsturim
źródło
4
nie myśl, że to jest właściwe pytanie, ponieważ nie ma odpowiedzi ...
Treemonkey
19
Treemonkey, naprawdę? Czy nie można prosić o opinie?
rsturim
27
Moją ulubioną rzeczą jest to, że gdy wyszukuję coś w Google, najlepszym wynikiem jest wpis StackOverflow, a pytanie jest zamknięte lub zawieszone. Nie ma to jak przestarzałe hermetyzowanie wiedzy, które przetrwa próbę czasu.
Kyle Kelley,
2
Nie, @rsturim, nie można prosić o opinie
Liam
6
Szukałem takiego pytania, więc będąc poza tematem dla tego konkretnego stosu, uznałem je za przydatne. Zamknięcie tego pytania oznacza, że ​​nie można dodawać dalszych dialogów, debat ani odpowiedzi, co obniża wartość tego pytania dla całej społeczności. Widziałem inne pytania niezwiązane z tematem, które zostały przeniesione do bardziej odpowiednich stosów. Czy można to zrobić w przypadku tego pytania? Pozdrawiam ~
Pete

Odpowiedzi:

213

Zależałoby to od domyślnego arkusza stylów przeglądarki. Możesz wyświetlić (nieoficjalną) tabelę domyślnych arkuszy stylów agenta użytkownika CSS2.1 tutaj .

Na podstawie powyższej strony domyślne rozmiary wyglądają mniej więcej tak:

    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

Warto również przyjrzeć się domyślnemu arkuszowi stylów dla HTML 4 . W3C zaleca używanie tych stylów jako domyślnych. Skrócony fragment:

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

Mam nadzieję, że te informacje są pomocne.

Pączek
źródło
3
Rekomendacja HTML 4 dla H6 została zignorowana i wygrana 0.67em; obecnie WebKit i FF używają tych samych emrozmiarów, co IE8. w3.org/TR/html-markup/h6.html mówi również, że „typowy” wyświetlacz to 0.67em.
Beni Cherniavsky-Paskin
Jakieś uzasadnienie tego lub jakiegoś przypadkowego faceta powiedział kiedyś: „będą nagłówki w tych rozmiarach”?
rzb
1
Dobrym pomysłem byłoby zaktualizowanie odpowiedzi, tak aby zawierała wartości domyślne HTML5.
Moha wszechmocny wielbłąd
1
Tutaj na HTML5 w3.org/TR/html5/rendering.html#sections-and-headings
Sirens
@ BeniCherniavsky-Paskin Link jest uszkodzony, czy możesz opublikować nowy?
kuldeep
3

Nagłówki są zwykle pogrubione; który został wyłączony dla tej demonstracji zgodności rozmiarów. MSIE i Opera interpretują te rozmiary tak samo, ale zauważ, że przeglądarki Gecko i Chrome interpretują nagłówek 6 jako 11 pikseli zamiast 10 pikseli / rozmiar czcionki 1, a nagłówek 3 jako 19 pikseli zamiast 18 pikseli / rozmiar czcionki 4 (choć trudno odróżnić różnicę nawet w bezpośrednim porównaniu i niemożliwe w użyciu). Wygląda na to, że Gecko ogranicza tekst do nie mniej niż 10 pikseli.

Sujit Agarwal
źródło