TL;DR — Кратко

Если нужно изменить размер текста в HTML — используйте свойство CSS font-size. Предпочтительнее задавать размеры через относительные единицы (rem, em, vw, clamp) для адаптивности и доступности. В статье — синтаксис, примеры (внешний, встроенный), отладка конфликтов, шаблоны и чеклисты для разработчиков и дизайнеров.

Введение

Умение управлять размером шрифта — ключевой навык для веб‑дизайнеров и фронтенд‑разработчиков. Свойство font-size в CSS позволяет задать размер текста для отдельных элементов или для всей страницы. Правильная настройка размеров помогает создать визуальную иерархию, улучшить читабельность и адаптивность на разных устройствах.

Важно: не делайте весь текст одним размером — используйте заголовки и семантические HTML‑теги для структуры документа.

Что такое font-size — краткое определение

font-size — CSS‑свойство, определяющее размер шрифта. Его значение может быть абсолютным (px) или относительным (em, rem, %, vw, vh, ch). Относительные единицы облегчают масштабирование и отклик под разные устройства.

Базовый синтаксис

Укажите селектор, откройте фигурные скобки и назначьте font-size:

/* Простой селектор по тэгу */
p {
  font-size: 18px;
}

Пример минимального HTML‑файла с подключением внешней таблицы стилей:

  
  
  
  


  
Это заголовок
  
Пример абзаца, размер которого можно менять через CSS.

Можно также использовать инлайновый стиль, но в средних и больших проектах это затрудняет поддержку:

Инлайновый размер шрифта

Единицы измерения: обзор и рекомендации

• px — абсолютная единица, фиксированная. Хороша для точной верстки, но не лучшая для масштабирования и доступности.
• rem — относительная к корневому элементу . Рекомендуется для основной типографики, потому что позволяет контролировать масштаб всей страницы изменением одного значения.
• em — относительная к родительскому элементу. Полезна при создании компонентов, где размер должен масштабироваться от контекста.
• % — процент от размера шрифта родителя.
• vw/vh — единицы относительно окна просмотра (viewport). Полезны для крупных заголовков или экспериментальной типографики.
• ch — ширина символа «0» в текущем шрифте; редко используется для font-size.
• clamp() — позволяет задать минимальное, предпочитаемое и максимальное значение: clamp(min, preferred, max).

Примеры:

html { font-size: 16px; } /* базовый размер */
body { font-size: 1rem; } /* равно 16px */
.small { font-size: 0.875rem; } /* 14px */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); } /* гибкий заголовок */

Наследование, каскад и специфичность

Размер шрифта наследуется: если вы не указали font-size для дочернего элемента, он возьмёт значение родителя. При конфликте правил влияет специфичность селектора и порядок в коде. !important перебивает большинство правил — использовать осторожно.

Пример конфликта:

p { font-size: 14px; }
.container p { font-size: 16px; } /* применится этот, т.к. более специфичен */
.inline { font-size: 20px !important; } /* перебьёт даже более специфичные селекторы */

Практические приёмы и шаблоны

• Устанавливайте базовый размер в html: html { font-size: 16px; } — тогда 1rem = 16px.
• Для адаптивности используйте сочетание rem и clamp, либо медиазапросы.
• Не полагайтесь только на px: пользователи могут менять масштаб шрифта в браузере; rem/percent учтут это.
• Для компонентов используйте em, чтобы внутренние размеры масштабировались вместе с компонентом.

Часто используемый подход — «типографическая шкала» (modular scale): задаёте базовый размер и шаги для заголовков.

html { font-size: 16px; }
body { font-size: 1rem; line-height: 1.5; }
h1 { font-size: 2.488rem; }
h2 { font-size: 2.074rem; }

Отладка и распространённые ошибки

• Проверьте, что CSS подключён: и файл сохранён.
• Если изменение не видно, попробуйте инлайновый стиль. Если он работает, значит есть конфликт селекторов.
• Используйте инструменты разработчика (DevTools) для инспекции: посмотрите, какие правила применяются, откуда берутся значения.
• !important решает проблему временно, но сигнализирует о конфликте в архитектуре CSS.

Важно: перед применением !important попытайтесь найти и устранить причину — возможно, требуется пересмотреть специфичность селекторов или порядок импорта стилей.

Адаптивность и доступность (Accessibility)

• Поддерживайте масштабируемость: относительные единицы позволяют пользователям с плохим зрением увеличить текст без поломки верстки.
• Проверяйте контраст между текстом и фоном (WCAG) — увеличение размера может потребовать корректировки компоновки.
• Для улучшения опыта на мобильных устройствах используйте media queries или динамические единицы (vw) и clamp.

Пример медиазапроса:

@media (max-width: 600px) {
  body { font-size: 0.95rem; }
}

Snippets — полезные сниппеты и пресеты

Базовый сетап с rem и тайпографической шкалой:

/* base.css */
html { font-size: 16px; }
:root {
  --base: 1rem; /* 16px */
  --scale-ratio: 1.25;
}
body { font-size: var(--base); line-height: 1.6; }
h1 { font-size: calc(var(--base) * var(--scale-ratio) * var(--scale-ratio)); }

Гибкий заголовок с clamp:

h1 { font-size: clamp(1.5rem, 6vw, 3rem); }

Чеклист по ролям

Разработчик:

• Установить базовый размер в html.
• Использовать rem для глобальной типографики.
• Избегать инлайна, кроме крайнего случая.

Дизайнер:

• Определить типографическую шкалу и шаги размеров.
• Проверить дизайн при увеличении шрифта на 200%.

QA / Тестировщик:

• Проверить на разных масштабах браузера.
• Убедиться, что текст не выходит за контейнеры.

Контент-менеджер:

• Не указывать HTML‑теги с inline‑style для размера.
• Использовать семантические заголовки для структуры.

Дерево решений: какую единицу выбрать?

flowchart TD
  A[Нужна гибкость?] -->|Да| B{Зависит от контекста}
  A -->|Нет| C[Используйте px]
  B --> D[Базовый размер -> rem]
  B --> E[Компонент -> em]
  B --> F[Заголовок адаптивный -> clamp'' / vw]
  D --> G[Управление всей страницей]
  E --> H[Локальное масштабирование]

Критерии приёмки

• Текст соответствует дизайн‑гайду (шкала и пропорции).
• Страница остаётся читабельной при увеличении шрифта в браузере на 200%.
• Никакие элементы не обрезаются и не накладываются при изменении размера шрифта.

Частые сценарии и когда этот подход не сработает

• Если весь дизайн зависит от пиксельной точности (например, пиксель‑перфект макеты), переход на rem может вызвать разницу в рендеринге.
• Очень старые браузеры могут некорректно поддерживать новые функции (clamp), проверяйте совместимость.

Быстрая инструкция по устранению проблем

1. Откройте DevTools → Elements → выберите элемент.
2. Посмотрите вкладку Styles — какие правила применены и откуда.
3. Проверьте наследование значения font-size и вычисленное значение в панели Computed.
4. Если есть !important, найдите его место и оцените необходимость.
5. Примените исправления и протестируйте на нескольких ширинах экрана.

Краткое резюме

Используйте font-size с пониманием наследования и специфичности. Предпочитайте относительные единицы (rem/em) и современные инструменты (clamp) для адаптивной типографики. Всегда тестируйте при разных масштабах и на разных устройствах.

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

Если нужно, могу подготовить компактный cheatsheet в формате PDF с примерами и рекомендуемыми значениями для мобильной и десктоп‑типографики.