Справочник · CSS

font-size: размер текста

Редакция PraktumОбновлено 24 октября 20267 мин чтенияУровень: новичок

Свойство font-size задаёт размер шрифта. Значение указывают в пикселях (16px), в rem — относительно размера шрифта страницы, в em — относительно шрифта родителя, или плавно через clamp(). По умолчанию браузеры используют 16px, и человек может изменить это значение в настройках.

Минимальный пример

html { font-size: 100%; }          /* уважаем настройку браузера, обычно 16px */
body { font-size: 1rem; line-height: 1.6; }
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
h2 { font-size: 1.75rem; }
small { font-size: .875rem; }

Основной текст — 1rem, заголовки — кратные rem, главный заголовок плавно растёт с шириной экрана от 32 до 56 пикселей. Если человек поставил в браузере крупный шрифт, вся шкала увеличится пропорционально.

Единицы размера шрифта

rem или em

.menu { font-size: 0.9em; }
.menu .menu { font-size: 0.9em; }   /* вложенное меню станет 0.81 от родителя */

.button { font-size: 1rem; padding: .6em 1.2em; } /* отступы растут с размером текста кнопки */

em считается от шрифта родителя, поэтому при вложенности размеры перемножаются: список в списке с 0.9em становится всё мельче. rem всегда считается от корня, и 1.25rem одинаков в любом месте страницы. Практичное сочетание: шрифты в rem, внутренние отступы кнопок — в em, чтобы они росли вместе с её текстом.

Плавный размер через clamp()

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }

clamp(минимум, желаемое, максимум): на узком экране шрифт не меньше минимума, на широком — не больше максимума, а между ними плавно растёт. Желаемое значение пишут как сумму rem и vw: часть в rem сохраняет реакцию на масштабирование и настройку шрифта браузера.

Почему нельзя задавать размер только в vw

h1 { font-size: 5vw; }                        /* плохо: не увеличивается при масштабе */
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); } /* хорошо */

Размер в одних vw зависит только от ширины окна. При увеличении страницы через Ctrl + «+» ширина окна в CSS-пикселях уменьшается, и текст в vw почти не растёт — а на телефоне он вовсе микроскопический. Это нарушает требование доступности о масштабировании текста до 200%. Всегда добавляй к vw слагаемое в rem и ограничивай clamp.

Шкала размеров

:root {
  --text-s: .875rem;   /* 14px — подписи */
  --text-m: 1rem;     /* 16px — основной текст */
  --text-l: 1.25rem;  /* 20px — лид */
  --h3: 1.5rem;       /* 24px */
  --h2: 1.875rem;     /* 30px */
  --h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}

Несколько размеров в переменных лучше десятка случайных чисел: заголовки разных уровней явно различаются, а интерфейс выглядит цельным. Уровень заголовка в HTML выбирают по структуре, а размер — в CSS: h3 может выглядеть мельче или крупнее, но остаётся h3.

Читаемость

Основной текст — не меньше 16px; для длинных статей часто берут 17–18px. Мелкий текст (подписи, сноски) — не меньше 12–14px и с хорошим контрастом. Размер работает вместе с межстрочным интервалом: для основного текста line-height 1.5–1.7, для крупных заголовков — 1.1–1.25. В полях форм ставь не меньше 16px: иначе Safari на iPhone увеличивает страницу при фокусе на поле.

Приём html { font-size: 62.5% }

Иногда корню ставят font-size: 62.5%, чтобы 1rem был равен 10px и считать было проще. Приём рабочий, но тогда весь текст на сайте обязан явно получить размер (иначе он будет 10px), а сторонние компоненты, рассчитанные на 1rem = 16px, станут мелкими. Проще оставить 100% и пользоваться шкалой в переменных.

rem или px

Частые ошибки

• Задают основной текст меньше 16px «чтобы поместилось больше».
• Используют em во вложенных элементах и получают всё более мелкий текст.
• Задают заголовки только в vw — текст не растёт при масштабировании.
• Ставят полям ввода шрифт 14px, и iPhone увеличивает страницу при вводе.
• Выбирают уровень заголовка (h2, h3) по размеру, а не по структуре.

Доступность

Текст должен увеличиваться до 200% без потери содержания (WCAG 1.4.4). Это работает, если размеры заданы в rem или em, а в meta viewport не запрещено масштабирование. Учитывай людей, которые выставили в браузере крупный шрифт по умолчанию: px его игнорирует, rem — уважает.

Поддержка браузерами

font-size и единицы px, em, rem и % поддерживаются всеми браузерами. Функция clamp() работает во всех актуальных браузерах.

:root {
  --text-s: .875rem; --text-m: 1rem; --text-l: 1.25rem;
  --h3: 1.5rem; --h2: 1.875rem; --h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}
html { font-size: 100%; }
body { font-size: var(--text-m); line-height: 1.6; }
h1 { font-size: var(--h1); line-height: 1.15; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
.lead { font-size: var(--text-l); }
small { font-size: var(--text-s); }
.button { font-size: 1rem; padding: .6em 1.2em; }