Каковы наиболее распространенные размеры шрифтов для тегов H1-H6

Я всегда был неуверен в том, с чего начать, основываясь на общем передовом опыте. Да, я знаю, это зависит от вашего дизайна - но что наиболее распространено?

Здесь у меня в настоящее время есть стартер:

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 в моей текущей работе.

Спасибо

Ответы

Ответ 1

Это будет зависеть от таблицы стилей по умолчанию для браузера. Вы можете просмотреть (неофициальную) таблицу 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; }

Надеемся, что эта информация будет полезна.

Ответ 2

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