Які найпоширеніші розміри шрифтів для тегів H1-H6 [закрито]

107

Зачинено. Це питання поза темою . Наразі відповіді не приймаються.

Хочете вдосконалити це питання? Оновіть питання, щоб воно було тематичним для переповнення стека.

Закрито 9 років тому .

Я завжди був не впевнений, з чого почати, як основна загальна практика. Так, я знаю, це залежить від вашого дизайну - але що найчастіше?

Ось що я зараз маю в якості стартера:

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

Так, ми не використовуємо електромережі на моїй теперішній роботі.

Дякую

html css frontend

— рстурим
джерело

не думайте, що це відповідне питання, оскільки немає відповіді ..

— Treemonkey

Treemonkey, справді? Невже питати думки?

— rsturim

Моя улюблена річ - коли я щось переглядаю в Google, то найвищим результатом є публікація StackOverflow, а питання закрите або затримано. Ніщо не схоже на несвіжу інкапсуляцію знань, щоб витримати випробування часом.

— Кайл Келлі

Ні, @rsturim, не гаразд запитувати думки

— Ліам

Я шукав таке запитання, тому, не входячи в тему для цього конкретного стека, я вважав його корисним. Закрити це питання означає, що більше діалогу, дебатів чи відповідей не можна додавати, що знижує значення цього питання для загальної громади. Я бачив, як інші питання, що не стосуються теми, мігрували до більш відповідних стеків. Чи можна це зробити для цього питання? Ураження ~

— Піт

Відповіді:

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

Сподіваюся, ця інформація корисна.

— Пончик
джерело

Рекомендація HTML 4 для H6 була проігнорована і виграна 0,67ем; сьогодні WebKit і FF використовують ті ж emрозміри, що і IE8. w3.org/TR/html-markup/h6.html також говорить, що "типовий" дисплей становить 0,67ем.

— Бені Чернявський-Паскін

Будь-які міркування цього або якогось випадкового хлопця одного разу сказали, "чи повинні бути заголовки цих розмірів"?

— rzb

Було б корисно оновити відповідь, щоб вона включала HTML5 за замовчуванням.

— Моха всемогутній верблюд

Тут, на HTML5, те w3.org/TR/html5/rendering.html#sections-and-headings

— Сирени

@ BeniCherniavsky-Paskinthe посилання розірвано, ви можете, будь ласка, опублікувати нове?

— Kuldeep

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

— Суджіт Агарвал
джерело