Каковы наиболее распространенные размеры шрифта для тегов 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.

Спасибо

html css frontend ртурим
источник
4
не думаю, что это уместный вопрос, поскольку на него нет ответа ..
Treemonkey
19
Treemonkey, правда? Разве не следует спрашивать мнение?
rsturim
27
Мне больше всего нравится, когда я что-то гуглию, лучшим результатом является сообщение на StackOverflow, а вопрос закрывается или находится в режиме ожидания. Ничего похожего на устаревшую инкапсуляцию знаний, которая выдерживает испытание временем.
Кайл Келли
2
Нет, @rsturim, спрашивать мнение
Лиам
6
Я искал подобный вопрос, поэтому, хотя он был не по теме для этого конкретного стека, я нашел его полезным. Закрытие этого вопроса означает, что дальнейшие диалоги, обсуждения или ответы не могут быть добавлены, что снижает ценность этого вопроса для сообщества в целом. Я видел, как другие вопросы, не относящиеся к теме, были перенесены в более подходящие стеки. Можно ли это сделать по этому вопросу? Cheers ~
Пит

Ответы:

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
Рекомендация HTML 4 для H6 была проигнорирована и выиграла 0.67em; Сегодня WebKit и FF используют те же emразмеры, что и IE8. w3.org/TR/html-markup/h6.html также говорит, что "типичный" дисплей составляет 0,67em.
Бени Чернявский-Паскин
Есть какие-нибудь доводы в пользу этого или какой-то случайный парень однажды сказал, что «должны быть заголовки такого размера»?
rzb
1
Было бы неплохо обновить ответ, включив в него значения по умолчанию HTML5.
Моха всемогущий верблюд
1
Здесь, на HTML5, w3.org/TR/html5/rendering.html#sections-and-headings
Sirens
@ BeniCherniavsky-PaskintСсылка не работает, не могли бы вы опубликовать новую?
kuldeep 03
3

Заголовки обычно выделяются жирным шрифтом; который был отключен для демонстрации соответствия размеров. MSIE и Opera интерпретируют эти размеры одинаково, но обратите внимание, что браузеры Gecko и Chrome интерпретируют заголовок 6 как 11 пикселей вместо 10 пикселей / размер шрифта 1, а заголовок 3 - как 19 пикселей вместо 18 пикселей / размер шрифта 4 (хотя это трудно отличить даже при прямом сравнении и невозможно в использовании). Кажется, Gecko также ограничивает размер текста не менее 10 пикселей.

Суджит Агарвал
источник