skip to main content

font-size

css

Кратко 🔗

Используй это свойство, чтобы задать размер текста.

Примеры 🔗

/* Абсолютные значения */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* Относительные значения */
font-size: smaller;
font-size: larger;

/* Значения длины */
font-size: 12px;
font-size: 0.8em;

/* Проценты */
font-size: 80%;

/* Общие значения */
font-size: inherit;
font-size: initial;
font-size: unset;

Как это понять 🔗

Значение font-size можно задать разными способами.

Лучше всего сделать это в относительной единице измерения em. Тогда размер шрифта будет адаптироваться под настройки браузера. em выражается в единицах, например, 1.6em: это значит, что в текущем элементе размер шрифта будет составлять 1.6 от родительского элемента.

Ещё есть другая относительная единица измерения rem. Она, в отличие от em, берёт за базовое значение не размер шрифта родительского элемента, а размер шрифта на странице, который указывается в <html>. Подробнее в статье: Относительные единицы измерения шрифтов.

Также размер текста можно задать в пикселях px, пунктах pt и процентах % или применить такой же, как в родительском элементе с помощью font-size: inherit;.

Как пишется 🔗

Вот какие значения можно задать:

  • em — относительная единица, которая определяется по родительскому элементу. 1em — это стандартный размер текста, который установлен в браузере. Обычно он равен 16px. Соответственно, 2em будут равны 32px, а 0.5em — 8px. Если задаешь font-size внутри другого элемента, то em будет рассчитан относительно этого элемента.

    Например, мы установили размер шрифта в <body> 16px. Если нужен размер шрифта 12px, укажи 0.75em, потому что 12/16 = 0.75. Точно также, если нужен размер 10px, укажи 0.625em (10/16 = 0.625); для 22px, укажи 1.375em (22/16).

  • % — значение в процентах, например 80%. Работает похожим образом, что и единица em. За 100% берётся размер текста в родительском элементе. Значение может быть только положительным.

  • px — можно задать значение в пикселях, когда важно, чтобы шрифт всегда был одного конкретного размера, вне зависимости от браузера и настроек устройства. Это не всегда лучший вариант, потому что, например, пользователи, которые плохо видят и используют крупные шрифты, не смогут увеличить текст в своём браузере.

  • inherit — просто наследует значение родительского элемента.

  • rem — работает похожим образом, что em, но в этом случае размер шрифта зависит не от родительского элемента, а от корневого html элемента. Другими словами, так можно не зависеть от размера родительского элемента.

  • **xx-small**, **x-small**, **small**, **medium**, **large**, **x-large**, **xx-large** — абсолютные значения, которые зависят от настроек браузера и операционной системы. Обычно не используют.

  • **larger**, **smaller** — больший или меньший размер шрифта относительно родительского элемента. Обычно не используют.

Ещё примеры 🔗

Значение в em высчитывается относительно текущего шрифта. Поэтому дочерняя строка в 1.5 раза больше, чем родительская.

HTML

<div class="parent">
Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера,
<span class="child">
а этот текст в 1.5 раза больше, чем в родительском контейнере.
</span>
</div>

CSS

.parent {
font-size: 1.5em;
}

.child {
font-size: 1.5em;
}

А вот как сочетается значение em, когда родительский элемент задан в процентах.

Очень часто можно встретить ситуацию, когда размер шрифта у html равен 62.5%. Это магическое число появилось не просто так. Всё дело в том, что стандартный размер шрифта в браузере — 16 пикселей. А 62.5% от него равно 10 пикселям. Что крайне удобно для расчётов.

HTML

<div>
<span>
Здесь основной текст такой же, как в стандартных настройках браузера,
<span>а эта фраза в 1.6 раз больше, чем основной текст</span>.
</span>
</div>

CSS

html {
font-size: 62.5%; /* Теперь 1em равен 10px (62.5% от 16) */
}

span {
font-size: 1.6em; /* Размер шрифта элемента 10 * 1.6 = 16px */
}

Пример, где размер шрифта не зависит от родительского элемента, потому что мы задали его в rem.

HTML

<span>
Теперь один контейнер находится <span>внутри другого</span>, но относительный
размер текста больше не зависит от родительского элемента.
</span>

CSS

html {
font-size: 100%; /* 1em = 16px, как в стандартных настройках браузера */
}

span {
font-size: 2rem;
}

И ещё три примера, как можно задать размер шрифта:

/* Текст параграфа будет очень большим */
p {
font-size: xx-large;
}

/* Заголовок <h1> будет в 2.5 раза больше, чем текст вокруг него */
h1 {
font-size: 250%;
}

/* Размер текста внутри тега <span> будет равен 16px, не зависимо ни от чего */
span {
font-size: 16px;
}

Подсказки 🔗

💡 Не забывай, что все значения, кроме пикселей px и пунктов pt, подстраиваются под родительский элемент, который принимается за 100%.

💡 Если не задать никакое значение font-size, то браузер использует размер по умолчанию. Обычно это 16px.

💡 У font-size не бывает отрицательных значений.

В работе 🔗

Алёна,

🛠 Для использования относительных единиц измерения — em, rem или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что ты запутаешься в вычислениях.

🛠 Если в вёрстке используются строчно-блочные (inline-block) элементы, то не забывай задавать родителю свойство font-size со значением 0.

Между строчно-блочными (inline-block) элементами, как и между словами в тексте, есть небольшие отступы — пробелы. Ставь размер шрифта в ноль чтобы эти отступы не влияли на положение вложенных элементов и можно было получить более ожидаемый результат от задания внешних отступов.

🛠 Единицы измерения pt не используются в вёрстке веба. Эта единица измерения возникла ещё во времена вёрстки печатной продукции, например, газет.

Сперва она перекочевала в Фотошоп, к дизайнерам. Многие из них также перешли из печатки в веб. По инерции эта единица просочилась и в CSS, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.

Владимир 👨‍🔧

🛠 Размер шрифта очень удобно указывать в пикселях. Но есть один косяк: шрифты хранятся в векторном формате, а значит родной размер для них — относительный. И если у твоего сайта много разных шрифтов и нагруженный фронт, то в конце концов будет заметно, что шрифты в пикселях тормозят больше, чем в em или процентах.


Автор: Макс 👨‍🔧