Px, em, %, pt и ключевые слова

Когда дело доходит до установки размеров в CSS, у вас появляется множество возможностей. Вы можете указать ключевое слово, например:

p { font-size: small; }

или числовое значение. В последнем случае необходимо указать единицы измерения — один из четырёх вариантов. Что же лучше? —Зависит от обстоятельств. Давайте посмотрим повнимательней.

Ключевые слова

Корректными значениями для размеров шрифтов являются ключевые слова xx-small, x-small, small, medium, large, x-large и xx-large, а также smaller и larger, указывающие относительный размер.

Довольно неожиданно, но определение размера с помощью ключевых слов даёт практически одинаковые результаты в различных браузерах и операционных системах.

Заметьте, что, несмотря на сходство, есть различия в разбивке на строки и общей высоте абзацев.

Лишь при указании относительного размера реализуется «каскадность», и размер шрифта родительского элемента влияет на размер шрифта дочернего. Допустим, для родителя указан размер medium, а для потомкаlarge. В этом случает размер шрифта дочернего элемента будет только large, и ничего более. Однако, если для родителя мы укажем medium, а для потомкаlarger (заметьте, larger, а не просто large), дочерний элемент «подрастёт», чтобы иметь больший размер шрифта, чем у родителя. Измените размер шрифта родителя, изменится и дочерний размер, отсюда «каскадность».

Использование ключевых слов — это отличный способ управления шрифтами на web-странице. Вот одно из наиболее распространённых применений этой техники: вы можете определить с помощью ключевого слова размер шрифта для элемента body, а затем устанавливать относительные размеры для других элементов. Это даст вам возможность с лёгкостью уменьшать и увеличивать размер шрифта одного лишь элемента body (например, с помощью JavaScript), при этом будет соответствующим образом изменяться и содержимое всей страницы.

Тем не менее, ключевые слова не позволят вам точно управлять типографикой, ведь выбор значений не так уж велик.

px

Если вам нужна точность, указание размеров в пикселах (px) — отличный выбор (и мой любимый). На компьютерном экране нет ничего мельче отдельного пиксела. Определяя размер в пикселах, вы буквально указываете браузеру вывести символы точно заданной высоты.

В Windows или Маке, в различных браузерах, сглаженный или нет — не важно, шрифт размером 14px будет иметь высоту 14 пикселов. Но это не значит, что не может быть никаких отклонений.

По своей сути, значения, указанные в пикселах, не могут быть каскадными. Если родительский элемент имеет размер 18px, а дочерний — 16px, то последний всегда будет 16px. Тем не менее, можно комбинировать два способа. Например, если для родителя был указан размер 16px, а для потомка — ключевое слово larger, то предок действительно окажется крупнее родителя.

Larger увеличило размер родительского элемента, 16px, до 20px, то есть на 25%.

У этого метода было плохое прошлое в плане общедоступности и юзабилити. В IE версии 6 и ниже, текст с размером, указанным в пикселах не мог быть увеличен или уменьшен пользователем. Это значит, что мы, толковые, молодые и здоровые дизайнеры, можем нормально читать на экране текст размером 12px, однако, когда более пожилые люди попробуют увеличить размер этого текста, чтобы его прочесть, окажется, что это невозможно. На самом деле, это вина IE 6, а не наша, но, что есть, то есть, и эту проблему приходится решать.

Определение размеров шрифта в пикселах — наиболее точный (и, я считаю, наиболее приемлемый) способ, но примите во внимание посетителей вашего сайта, всё ещё пользующихся IE 6. Хотя сейчас мы как раз на пороге того, чтобы перестать об этом заботиться.

em

Указание размеров в em — быть может самый сложный для понимания способ, так как идея, на которой он построен, абстрактна и условна. Вот в чём она заключается: 1em эквивалентен текущему размеру шрифта элемента. Если размер шрифта не был указан, используется значение по умолчанию, для большинства браузеров равное 16px. Итак, по умолчанию 1em = 16px. Если вы установили размер шрифта 20px для элемента body, тогда 1em = 20px.

Думаю, исторически величина «em» происходит от ширины заглавной буквы M, но не стоит ссылаться на меня по этому вопросу.

Трудности начинаются при попытке более сложного управления шрифтами. Допустим, нам нужен заголовок с большим размером:

h1 { font-size: 2em; }

Эта двойка — по сути, коэффициент для текущего значения в em. Так, если текущее значение — 16px, размер заголовка станет равным 32px. Математика работает железно, но, как вы можете себе представить, часто приходится округлять значения.

Наиболее популярный метод работы с em — установка размера шрифта для элемента body в 62.5%. Поскольку по умолчанию размер шрифта равен 16px, это эквивалентно 10px (но без непосредственного указания размера 10px, которое не было бы каскадным). (Это предложение стоит прокомментировать. Размеры, заданные в em, будут каскадировать, даже если размер шрифта в body указан в пикселах. Однако, если задать базовый размер жёстко в пикселах, то будут проигнорированы настройки браузера, что нежелательно, так как пользователи со слабым зрением могут устанавливать увеличенные размеры шрифтов. В этом случае, размеры в пикселах действительно не каскадируют с настройками браузера. — Прим. пер.) Использовать в качестве множителя 10 намного проще, чем 16. Вам нужен размер шрифта 18px? Используйте font-size: 1.8em.

Так зачем морочить голову, если это всего лишь абстракция для значений, заданных в пикселах? Можно назвать три причины:

— Этот способ позволяет пользователю изменять размеры в IE 6
— Можно задавать относительные размеры (для «резиновых» сайтов)
— Можно реализовать каскадность

Первая причина достаточно весомая. Если вы в основном желаете использовать размеры в пикселах, но не хотите проблем с общедоступностью, выходом может быть указание размеров в em.

Em можно применять не только для шрифтов, этой единицей измерения можно задавать любые размеры (ширину, высоту и т. д.). В «резиновых» сайтах em используются везде, что действительно делает их «растягивающимися»: при увеличении размера шрифта увеличивается размер всех элементов в пределах ширины страницы сайта. Размеры, заданные в em имеют прямую связь друг с другом. Если у вас есть контейнер высотой 10em и текст размером 1em внутри него, то текст займёт ровно одну десятую высоты контейнера. Эта точность в пропорциях делает em мощным средством веб-дизайна.

Есть одна потенциальная проблема, относящаяся к третьему пункту. Значения, указанные в em действительно каскадные. Каждое значение в em зависит от родительского значения. Если вы используете em как непосредственную замену значениям в пикселах, это может вызвать проблемы. Например, вы можете выставить элементам p (параграф) и li (элемент списка) размеры 1.2em. Сегодня это будет выглядеть замечательно, но завтра вы добавите параграф, содержащий список. Два размера в силу каскадности будут перемножены (1.2 x 1.2) и элемент списка станет больше, чем текст параграфа. Нет никакого выхода, кроме как удалить тег.

%

Принцип работы значений, указанных в процентах достаточно очевиден. Работают они ровно так, как вы от них ожидаете. Если родитель имеет размер 20px, а предок — 50%, то он окажется высотой 10px. Также как и em, процентные значения относительны. Они также обладают каскадностью, поэтому описанная выше проблема с параграфом и списком проявляется и здесь.

Вот популярная техника использования процентных значений: указать подходящий размер шрифта для элемента body (например, small), а затем использовать процентные значения для всех остальных элементов. Это позволит при необходимости исправить значение всего в одном месте, чтобы отмасштабировать шрифты на всей странице, что намного упростит реализацию такой функции как изменение размеров шрифтов.

pt

Последняя единица измерения, в которой можно указывать размеры — пункты (pt). Пункты используются только в CSS-схемах для печати! Пункт — это единица измерения, используемая на практике в типографии. 72 пункта равны одному дюйму, настоящему, как на линейке. Не дюйму на экране, который целиком и полностью зависит от разрешения.

Пункты, так же, как и пикселы на экране, абсолютно точно задают размеры на бумаге. Для кросс-браузерности и кросс-платформенности задавайте размеры в CSS-схемах, предназначенных для печати, только в пунктах.

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