Коротко: размер текста в CSS меняют свойством font-size. Задавать его лучше в rem (от размера корня) или в процентах, чтобы страница масштабировалась. Для адаптивного размера используют clamp() и медиа-запросы. Значение 1rem по умолчанию равно 16px.
Единицы измерения
| Единица | От чего считается | Когда |
|---|---|---|
px |
фиксированные пиксели | чек-боксы, иконки |
rem |
размер шрифта корня (обычно 16px) | основной выбор |
em |
размер шрифта родителя | внутри компонентов |
% |
от родителя | относительное увеличение |
vw |
ширина окна | крупные заголовки |
Вкладки: примеры
body { font-size: 16px; }
p { font-size: 1rem; } /* 16px */
h1 { font-size: 2.5rem; } /* 40px */Задайте базовый размер телу, а остальные элементы считайте в rem от него — так проще соблюдать масштаб.
html { font-size: 100%; } /* 16px по умолчанию */
html { font-size: 62.5%; } /* 10px — удобно: 1.6rem = 16px */Приём «62.5%» делает 1rem равным 10px и облегчает счёт. Но ломает ожидания тех, кто рассчитывает на 16px — используйте с пониманием.
h1 {
font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}clamp(мин, идеал, макс) — «плавный» размер: не меньше первого значения, не больше последнего, а между ними — растёт вместе с экраном. Одной строкой вместо десятка медиа-запросов.
:root {
--fs-sm: 0.875rem; /* 14px */
--fs-md: 1rem; /* 16px */
--fs-lg: 1.25rem; /* 20px */
--fs-xl: 1.75rem; /* 28px */
}
.lead { font-size: var(--fs-lg); }«Типографическая шкала» из переменных: набор размеров, которые используют по всему сайту. Красиво и предсказуемо.
Практика: читаемая типографика
- Базовый текст — 16–18px в
rem. - Интерлиньяж —
line-height: 1.5–1.7. - Ширина текстовой колонки — 60–75 символов.
- Заголовки — крупнее, но с коэффициентом 1.2–1.5.
- Крупные заголовки — через
clamp(). - Проверьте на телефоне и на большом экране.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Текст не масштабируется | всё в px |
перейти на rem |
| Размеры «прыгают» | вложенные em |
использовать rem |
| Заголовок обрезается | слишком большой размер | clamp() и переносы |
| iOS приближает при вводе | шрифт поля <16px | задать 16px полям |
Проверьте себя
1rem?
clamp()?
Вопросы и ответы
em считается от размера шрифта родителя и «накапливается» во вложенности. rem всегда от корня — предсказуемее.
Через font-size: clamp(2rem, 5vw, 4rem); — размер будет расти вместе с экраном до верхней границы.
Safari автоматически зумит поля с размером шрифта меньше 16px. Задайте полям font-size: 16px.
Да, в редакторе блоков и в настройках темы; для глобальных размеров — «Стили» в блочной теме или «Дополнительные стили».
Итоги
- Размер текста —
font-size; основной выбор единиц —rem. - Базовый текст — 16–18px, интерлиньяж 1.5–1.7.
- Адаптивные заголовки —
clamp(). - Держите единую шкалу размеров в переменных.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.