Использование различных свойств размера шрифта в CSS-стилях

В CSS есть масса различных свойств, которые позволяют влиять на размер шрифта. Кроме этого разнообразия, у данных свойств фактическая величина их значения часто вычисляется браузерами по-разному. Все это обусловлено исторически и по мере развития технологий. Одни свойства устаревают, а другие появляются и становятся популярными. Например, сегодня некоторые свойства уже считаются устаревшими (ex, pt, pc и др.), а другие наоборот становятся все более популярными (vh, vw, vmin и vmax). Последние свойства завоевали любовь веб-дизайнеров благодаря своей относительности: они позволяют указывать размер шрифта на основе ширины или высоты окна просмотра (другими словами – на основе размера устройства).

Как же разобраться в этих свойствах и какие использовать? Вам в помощь сегодняшняя статья, из которой вы узнаете о разных единицах измерения и о том, как они влияют на размер шрифта элементов, к которым применяются.

 

 

Размер шрифта в пикселях (px)

Пиксели – это единицы фиксированного размера. Раньше пиксель приравнивался к одной точке на экране пользователя. Теперь же, поскольку устройства могут иметь разную плотность пикселей, имеет место другое определение. Сегодня размер пикселя высчитывается с учетом опорного пикселя. Опорный пиксель определяется как угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi на среднем расстоянии в 28 дюйма (71,12см). Это делает размер пикселя равным примерно 0,26 мм.

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

<div class="container">
  Текст внутри родительского элемента <code>div</code>.
  <p>Первый абзац нашего контейнера.</p>
  <p>Второй абзац содержит ссылку на <a href="https://sebweo.com/">SebWeo</a>.</p>
  <p>Ссылка на Википедию в качестве прямого дочернего <code>div</code> элемента.</p>
  <a href="https://ru.wikipedia.org">Ссылка на Википедию.</a>
</div>

 

В CSS-стилях установим свойство font-size для всех элементов в пикселях:

div.container {font-size: 18px;}
code {font-size: 15px;}
p, a {font-size: 20px;}

 

Несмотря на то, что мы установили для каждого элемента свое значение размера шрифта, здесь не будет срабатывать правило вложенности элементов. Например, размер шрифта ссылок будет одинаковым – 20px. Хотя ссылка внутри непосредственно тега div должна иметь размер 18px.

Одним словом, использование пикселей при настройке размера шрифта элемента не будет иметь нужной нам гибкости.

 

 

Размер шрифта в em

Использование em для размера шрифта поможет избежать любых проблем, связанных с переопределением пользовательских настроек. Значение в 1em будет зависеть от значения размера шрифта по умолчанию в браузере. Если это не изменено вами в стилях или пользователем в настройках браузера, по умолчанию это значение будет равным 16px.

Значение свойства для элемента будет определяться вычисленным размером шрифта, унаследованным этим элементом. Это означает, что если элемент наследует размер шрифта 25px, значение 2em для этого элемента будет вычисляться как 50px.

Следующие CSS-стили устанавливают размер шрифта всех элементов из нашего предыдущего примера в em единицах:

div.container {font-size: 1.2em;}
code {font-size: 0.9em;}
p, a {font-size: 1em;}

 

С этими настройками стилей, если мы вложим в тег div другой элемент div, тогда размер шрифта всех элементов в нем будет больше в 1,2 раза за первый.

Если вам будет нужно изменить размер шрифта для всех элементов в сторону увеличения (или уменьшения), с этим подходом вам нужно будет изменить только значения в самых верхних элементах DOM (html и body). Затем размер шрифта всех остальных элементов будет масштабироваться соответствующим образом.

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

 

 

Размер шрифта в rem

Единственная проблема с em-единицами заключается в том, что иногда нужно, чтобы размер шрифта дочерних элементов не масштабировался в зависимости от размера шрифта своих родителей. Это наследование размера шрифта может сделать процесс вычисления правильного значения em довольно сложным.

Эту проблему можно решить с помощью единиц измерения rem. Значение 1rem всегда равно значению размера шрифта для корневого элемента. Таким образом, вы не столкнетесь с какой-либо проблемой наложения размера шрифта.

Ниже мы установим размер шрифта для контейнера в единицах rem. Остальные элементы по-прежнему будут иметь размер шрифта в единицах em:

div.container {font-size: 1.2rem;}
code {font-size: 0.9em;}
p, a {font-size: 1em;}

 

Установка размера шрифта контейнера в единицах rem поможет нам избежать проблемы с унаследованным размером шрифта. В этом случае размер шрифта всех элементов внутри контейнера будет основан на родительском элементе, и в то же время не будет зависеть от других контейнеров и блоков.

 

 

Размер шрифта в процентах (%)

Проценты ведут себя как em единицы. Они обычно используются для установки размера шрифта для корневых элементов с помощью медиа-запросов, чтобы упростить расчеты для адаптивного веб-дизайна. Например:

html {font-size: 100%;}
div.container {font-size: 1rem;}
code {font-size: 0.7em;}
p, a {font-size: 0.9em;}

 

Поскольку значение по умолчанию для размера шрифта в браузерах составляет 16 пикселей, установка размера шрифта для элемента html, равного 100%, составляет ровно 16 пикселей. Это упрощает расчет размеров шрифтов для всех остальных элементов. Например, теперь вы можете просто установить размер шрифта элемента в 2rem, чтобы сделать его размер равным 32px и так далее.

 

 

Размер шрифта в единицах просмотра viewport (vw, vh, vmin, vmax)

Единицы просмотра vw, vh, vmin и vmax появились относительно недавно и сразу завоевали популярность среди веб-дизайнеров. Они позволяют устанавливать размер шрифта для разных элементов в зависимости от размеров окна просмотра (на основании значения viewport). Когда все сделать правильно, этот подход может устранить необходимость установки разных значений размера шрифта на нескольких контрольных точках (с использованием медиа-запросов). Это связано с тем, что значение этих единиц будет постоянно меняться в зависимости от ширины или высоты окна просмотра. Например, 1vw будет равным 5px, когда область просмотра имеет ширину 500 пикселей и будет равна 12px, когда область просмотра имеет ширину 1200 пикселей.

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

Здесь вы сможете прочитать более подробно о том, что такое единицы просмотра vw, vh, vmin и vmax в CSS.

 

 

 

Краткий вывод

В этой статье мы обсудили различные единицы измерения в CSS и то, как они влияют на размер шрифта элемента. Лучше всего, конечно же, использовать по-максимуму относительные единицы. Но прежде чем принимать решение об использовании любого из этих свойств, вам также нужно убедиться в его поддержке целевыми браузерами. Абсолютные единицы, такие как px, pt, pc, in, cm и mm, поддерживаются во всех браузерах. Относительные единицы em поддерживаются во всех основных браузерах, включая более старые версии IE. Тем не менее, rem единицы не поддерживаются в IE8 и ниже. В IE9 и IE10 также нет поддержки rem у псевдоэлементов. Из всех единиц, обсуждаемых в этой статье, единицы просмотра имеют минимальную поддержку браузерами, хотя они и имеют наибольшую эффективность в веб-дизайне.