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

nie myśl, że to jest właściwe pytanie, ponieważ nie ma odpowiedzi ...

— Treemonkey

Treemonkey, naprawdę? Czy nie można prosić o opinie?

— rsturim

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,

Nie, @rsturim, nie można prosić o opinie

— Liam

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

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

Dobrym pomysłem byłoby zaktualizowanie odpowiedzi, tak aby zawierała wartości domyślne HTML5.

— Moha wszechmocny wielbłąd

Tutaj na HTML5 w3.org/TR/html5/rendering.html#sections-and-headings

— Sirens

@ BeniCherniavsky-Paskin Link jest uszkodzony, czy możesz opublikować nowy?

— kuldeep

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