Как изменить размер шрифта в HTML с помощью CSS
Введение
Умение управлять размером текста — базовый навык для веб‑дизайнеров и frontend‑разработчиков. Свойство font-size позволяет задать размер для отдельных элементов или для всей страницы. Правильный выбор единиц измерения и иерархии размеров повышает читаемость, удобство сканирования страницы и доступность для пользователей.
Важно: чаще стоит менять размер только у тех элементов, которым нужно выделиться (заголовки, кнопки, подписи), а не у всего подряд.
Что такое CSS font-size и как оно работает
font-size задаёт высоту эм‑коробки шрифта для элемента. Значение может быть абсолютным (например, px) или относительным (em, rem, %, vw). Относительные единицы наследуются: em вычисляется относительно размера шрифта родителя, rem — относительно корневого элемента (html).
Краткие определения:
- px — пиксели, фиксированная единица.
- em — относительная единица к родителю.
- rem — относительная единица к корню (html).
- % — процент от размера шрифта родителя.
- vw/vh — проценты от ширины/высоты окна просмотра.
Синтаксис: как задать размер шрифта
Общий синтаксис в CSS:
селектор {
font-size: значение;
}Пример простого HTML с подключением стилей (локализованная версия):
Простой HTML
Это заголовок
Пример абзаца текста для демонстрации изменения размера шрифта.
Внешний CSS для изменения размера абзаца:
p {
font-size: 18px;
}Альтернатива — inline‑стили (удобно для быстрого теста, но не для поддержки):
Текст с inline‑размером
Как выбрать единицы измерения — таблица сравнения
| Единица | Поведение | Когда использовать | Преимущества | Ограничения |
|---|---|---|---|---|
| px | Фиксированная | Пиксельная точность для интерфейсных элементов | Предсказуемость | Плохая масштабируемость для доступности |
| em | Относительно родителя | Компоненты с локальной масштабируемостью | Наследуемость, гибкость | Может накапливаться при вложении |
| rem | Относительно html | Базовый масштаб сайта | Простая система масштабирования | Зависит от корня только |
| % | Процент от родителя | Встраиваемые блоки | Гибкость в контексте | Нужно понимать контекст родителя |
| vw/vh | Процент окна просмотра | Крупные заголовки или типографика, зависящая от ширины | Адаптивность | Может привести к слишком маленькому тексту на узких экранах |
Примеры и паттерны
- Установка базового размера и использование rem по всему проекту:
html { font-size: 16px; } /* базовый размер */
body { font-size: 1rem; }
h1 { font-size: 2rem; }- Локальная шкала с em для компонентов:
.card { font-size: 14px; }
.card .title { font-size: 1.25em; } /* 17.5px */- Адаптивный заголовок с clamp (без JavaScript):
h1 {
font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}clamp(min, preferred, max) помогает задать минимальную, предпочтительную и максимальную величины.
Ментальные модели и эвристики
- Начинайте с корневого размера (html) — это ваш «шкальный» базис.
- Используйте rem для глобальной типографики и em для локальной (внутри компонентов).
- Для интерфейсных элементов (иконки, кнопки) применяйте px, если требуется точность.
- Проверяйте чтение на разных устройствах и при увеличении масштаба (CTRL+/Cmd +).
Мини‑правило: если хотите, чтобы текст масштабировался вместе со всей страницей — rem; если контролируете только компонент — em; если нужен абсолютный размер — px.
Доступность и лучшие практики
- Поддерживайте масштабируемость: не блокируйте увеличение шрифта в браузере.
- Минимальный читаемый размер тела текста обычно не ниже 16px (рекомендация практическая, зависит от шрифта).
- Используйте line-height ~1.4–1.6 для удобочитаемости.
- Проверяйте контраст и поведение при увеличении шрифта.
Важно: относительные единицы облегчают пользователям с особыми потребностями менять масштаб без нарушения верстки.
Технические приёмы и сниппеты (cheat sheet)
- Быстро задать базу сайта:
html { font-size: 100%; } /* обычно 16px; удобно для % */Преобразование rem в px (если нужно понять): 1rem = значение font-size на html.
Комбинация с переменными CSS:
:root { --base: 16px; }
html { font-size: var(--base); }
h2 { font-size: calc(1.25 * 1rem); }Когда подход не работает — типичные ошибки и контрпримеры
- Ошибка: использование только px по всему проекту — при увеличении браузера верстка ломается для пользователей с особыми потребностями.
- Ошибка: накопление em в глубокой вложенности — итоговый размер становится неожиданно большим или маленьким.
- Контрпример: если вам нужна точная печатная вёрстка, тогда absolute (px) может быть оправдан.
Отладочный план: runbook при проблемах с font-size
- Убедитесь, что CSS подключён: проверьте и путь к файлу.
- Откройте инструменты разработчика и посмотрите, какое значение вычислено (Computed).
- Проверьте специфичность селекторов: более специфичный селектор или inline‑стиль может перебивать.
- Ищите !important в стилях, которое может влиять.
- Попробуйте временно установить inline style — если работает, ищите конфликт в файле стилей.
- При использовании препроцессоров удостоверьтесь, что сборка обновилась.
Роли и чеклист
Дизайнер:
- Укажите базовый размер шрифта (дизайн‑система).
- Определите модульную шкалу для заголовков.
Frontend‑разработчик:
- Настройте root size и переменные CSS.
- Протестируйте в масштабах 100–200% и на мобильных ширинах.
QA:
- Проверить доступность (чтение при увеличении размера, контраст).
- Проверить переносы и высоту строк при разных размерах.
Критерии приёмки
- Базовый текст читаем при масштабе 100% и 150%.
- Заголовки и подписи соблюдают заданную модульную шкалу.
- Нет неожиданных переполнений или налезаний текста при увеличении шрифта.
- Вёрстка целостна на основных браузерах (Chrome, Firefox, Safari, Edge).
Диаграмма принятия решения: какую единицу выбрать
flowchart TD
A[Нужна адаптивность?] -->|Да| B{Контекст}
B -->|Глобально| C[Используй rem]
B -->|Компонент| D[Используй em]
A -->|Нет| E[Нужна точность]
E --> F[Используй px]
C --> G[Добавь clamp для масштабирования заголовков]Короткая сводка
- font-size управляет размером шрифта. Выбирайте единицы в зависимости от масштаба и контекста.
- rem — хороший выбор для глобальной типографики; em — для локального масштабирования.
- Используйте clamp, vw и calc для адаптивных решений.
- Всегда тестируйте на доступность и масштабируемость.
Полезные ссылки: изучите модульные шкалы (modular scale), системы дизайна и инструменты проверки доступности.
