Свойство font-size: размер текста
Как использовать rem и clamp для читаемого текста на разных экранах.
Как это работает
font-size задаёт размер шрифта, но не общую высоту строки: за неё отвечает line-height. Значение rem зависит от размера корневого элемента, а em для font-size — от размера шрифта родителя. Это различие особенно важно во вложенных блоках.
Функция clamp выбирает значение между минимумом и максимумом. Её удобно применять к заголовкам, которые плавно меняются с шириной окна. Основной текст не стоит делать слишком мелким ради плотности: проверьте чтение и при увеличенном масштабе.
Пример в интерфейсе
h1 { font-size: clamp(1.8rem, 1rem + 3vw, 3rem); line-height: 1.15; }
p { font-size: 1rem; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| 1rem | Размер относительно корневого элемента. |
| 1.2em | Размер относительно родительского шрифта. |
| clamp(min, preferred, max) | Границы адаптивного размера. |
| px | Фиксированная CSS-единица размера. |
На что обратить внимание
Размер в vw без нижней и верхней границы может стать слишком маленьким на телефоне или огромным на широком мониторе.
Проверьте на практике
Измените ширину окна и масштаб браузера до 200%. Заголовок должен переноситься и не перекрывать абзац.
Связанные темы: font-family, line-height.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.