Размеры h1-h6 в пикселях

[aaron]

Подскажите, где можно увидеть размеры заголовков h1-h6 в пикселях?

И является ли размер этих заголовков постоянной величиной в различных браузерах?

И еще вопросы.

Какая единица измерения для шрифтов является предпочтительной в css - em или px?

На w3school говорится, что вроде бы em предпочтительней.

В Photoshop по умолчанию размер шрифтов установлен в pt. В настройках выставил, чтобы показывала программа размеры в пикселях. Теперь он мне размеры показывает по следующей схеме: 12pt=12px,13pt=13px,14pt=14px,...

Мне кажется, что Photoshop брешет. Так ли это? И существует ли формула перевода pt в px, наподобие px/16=em ?

В Photoshop pt - это пункты?

В Firebug padding обозначается сиреневым цветом. А какая разница между светло-сиреневым цветом и темно-сиреневым? Что-то типа наложения одного padding на другой?

Edited July 19, 2012 by aaron

[hedgehog]

Подскажите, где можно увидеть размеры заголовков h1-h6 в пикселях?

И является ли размер этих заголовков постоянной величиной в различных браузерах?

Firebug, Dragonfly и другие дебагеры, смотря какой браузер.

[aaron]

Подскажите, где можно увидеть размеры заголовков h1-h6 в пикселях?

И является ли размер этих заголовков постоянной величиной в различных браузерах?

Firebug, Dragonfly и другие дебагеры, смотря какой браузер.

Наверное, неправильно вопрос сформулировал. Мне нужна стандартная величина этих заголовков в пикселях.

[Yazon_Nile]

У каждого браузера своя величина.

[sifilis]

Какая единица измерения для шрифтов является предпочтительной в css - em или px?

На w3school говорится, что вроде бы em предпочтительней.

Поддержу автора вопроса. Зачем использовать непонятные em, значения которых зависит от какой-то родительской величины, когда можно просто использовать пиксели, чтобы по максимуму соответствовать макету дизайна?

[malsyst]

h1 – 32 пикселя.

h2 – 24 пикселя.

h3 – 19 пикселям.

h4 – 16 пикселей.

h5 – 13 пикселей.

h6 – 11 пикселей.

[Feel]

Какая единица измерения для шрифтов является предпочтительной в css - em или px?

На w3school говорится, что вроде бы em предпочтительней.

Поддержу автора вопроса. Зачем использовать непонятные em, значения которых зависит от какой-то родительской величины, когда можно просто использовать пиксели, чтобы по максимуму соответствовать макету дизайна?

Например, для того чтобы посетитель сайта мог сменить размер шрифта на странице, не меняя при этом размер самой страницы. Вопрос - "нужно ли это посетителю?". Но это уже из другой оперы.

Edited July 20, 2012 by Feel

[Great Rash]

Размеры h1-h6 зависят от размеров шрифта, установленного в настройках браузера. Обычно в винде размер шрифта по умолчанию - 16px. От этого размера пляшут шрифты по умолчанию.

[SelenIT]

Подскажите, где можно увидеть размеры заголовков h1-h6 в пикселях?

Как выше подсказали — в инструментах разработчика.

И является ли размер этих заголовков постоянной величиной в различных браузерах?

Нет. Более того, в новых FF и Хроме размер заголовка зависит от уровня вложенности секции.

Какая единица измерения для шрифтов является предпочтительной в css - em или px?

Смотря по задаче. Для промо, где текст привязан к пиксельной графике — явно выигрывают px. Для информационки, где всё строится на тексте и вокруг него — может быть уместен em (или его продвинутый аналог — rem). Но с пикселями проще управляться, а проблем с их масштабированием уже нет.

На w3school говорится, что вроде бы em предпочтительней.

Так считалось несколько лет назад, но сейчас это спорно. И вообще w3school — не самый авторитетный источник (они не связаны с W3C, фактически самозванцы).

В Photoshop по умолчанию размер шрифтов установлен в pt. В настройках выставил, чтобы показывала программа размеры в пикселях. Теперь он мне размеры показывает по следующей схеме: 12pt=12px,13pt=13px,14pt=14px,...Мне кажется, что Photoshop брешет. Так ли это?

Так. Фотошоп исходит из 72 пикселей на дюйм (так было в 90-х на Маках). По стандарту CSS, в дюйме 72 пункта, но 96 пикселей (так чаще всего получалось в реальности, когда стандарт писали). Если в фотошопе выставить 96dpi, то и пиксели, и пункты будут соответствовать CSSным (но рендеринг шрифтов всё равно может отличаться).

И существует ли формула перевода pt в px, наподобие px/16=em ?

Да. 1px = 3/4pt = 1/96in. По умолчанию (если не переопределять font-size для body) в соврем. браузерах 1em = 12pt = 16px = 1/6in.

В Photoshop pt - это пункты?

Да. Пункт — старинная типографская мера, 1/72 дюйма (примерно 0.35 мм).

В Firebug padding обозначается сиреневым цветом. А какая разница между светло-сиреневым цветом и темно-сиреневым? Что-то типа наложения одного padding на другой?

Скорее всего так.

[sifilis]

В Photoshop по умолчанию размер шрифтов установлен в pt. В настройках выставил, чтобы показывала программа размеры в пикселях. Теперь он мне размеры показывает по следующей схеме: 12pt=12px,13pt=13px,14pt=14px,...Мне кажется, что Photoshop брешет. Так ли это?

Так. Фотошоп исходит из 72 пикселей на дюйм (так было в 90-х на Маках). По стандарту CSS, в дюйме 72 пункта, но 96 пикселей (так чаще всего получалось в реальности, когда стандарт писали). Если в фотошопе выставить 96dpi, то и пиксели, и пункты будут соответствовать CSSным (но рендеринг шрифтов всё равно может отличаться).

То есть если я вижу в макете размер в 12pt, то надо макет переделать в 96dpi? А как это сделать?

И существует ли формула перевода pt в px, наподобие px/16=em ?

Да. 1px = 3/4pt = 1/96in. По умолчанию (если не переопределять font-size для body) в соврем. браузерах 1em = 12pt = 16px = 1/6in.

Не понял. 12 / 4 * 3 = 9, но не 16.

Открыл ради интереса макет в закромах, в меню у текста выставлено 12pt. Измерил линейкой буквы: прописные в 7 пикселей, заглавные в 9. Получается, что 12pt - это 9px по заглавной букве?

Edited July 20, 2012 by sifilis

[SelenIT]

То есть если я вижу в макете размер в 12pt, то надо макет переделать в 96dpi? А как это сделать?

Как переделать уже готовый макет — сам не знаю. При создании нового файла есть поле "Resolution", туда можно ввести любое число (по умолчанию обычно либо 300 dpi — типичное разрешение для полиграфии, либо 72 — историческое маковское).

Не понял. 12 / 4 * 3 = 9, но не 16.

Открыл ради интереса макет в закромах, в меню у текста выставлено 12pt. Измерил линейкой буквы: прописные в 7 пикселей, заглавные в 9. Получается, что 12pt - это 9px по заглавной букве?

12/(3/4) = 12/3*4 = 16. Но это кегль шрифта — высота кегельной площадки, где предусмотрено место не только для заглавных букв, но и для всяких "хвостиков" и "закорючек" выше и ниже (выносных эл-тов и диакритических знаков). Размер самих букв может быть разным в разных шрифтах (но не больше кегля). Обычно строчные буквы — в районе 0.4–0.5 кегля, заглавные раза в полтора больше.

[sifilis]

И как тогда быть с вёрсткой? Пункты не совпадают, пиксели не совпадают. Какое решение?

[aaron]

И как тогда быть с вёрсткой? Пункты не совпадают, пиксели не совпадают. Какое решение?

Присоединяюсь к вопросу. Мне кажется, ответ (исходя из практики - общался с одной девушкой-верстальщицей с опытом) один - тупо брать то, что показывает Photoshop. Так ли это?

[SelenIT]

Пиксели практически совпадают. За вычетом нюансов отрисовки/сглаживания (текст может казаться более или менее жирным чем на макете и т.п.).

[aaron]

Пиксели практически совпадают. За вычетом нюансов отрисовки/сглаживания (текст может казаться более или менее жирным чем на макете и т.п.).

Вот теперь понятно.

[sifilis]

Пиксели практически совпадают.

До какого момента? Должен быть предел, после которого разница в пунктах и пикселях становится явно заметной.

[SelenIT]

Разница в пунктах и пикселях в CSS есть всегда. Три пункта равны четырем пикселям. Спор был о соотношении пунктов в фотошопе с пунктами в CSS.

[neznai]

В связи с появлением "новых" величин vw (viewport width) — 1 процент от ширины окна браузера;

vh (viewport height) — 1 процент от высоты окна браузера;

vmin и vmax — выбирают среди vw или vh меньшее или большее значение, хотелось бы услышать мнение, кто-нибудь уже использует?