Адаптивная типографика

Размеры шрифта, меняющиеся с шириной: clamp и шкалы.

Уровень: средний 10 разделов 12 минут

1. Что это и зачем

Размеры шрифта, меняющиеся с шириной: clamp и шкалы.

Адаптивность — это пересборка макета под ширину вьюпорта. Медиазапросы реагируют на ширину и другие характеристики, а breakpoint'ы объявляются там, где макет «ломается», а не по устройствам.

{title} — это не «мобильная версия», а единая гибкая система, которая честно ведёт себя на любой ширине.

2. Синтаксис и пример

h1 { font-size: clamp(2rem, 1rem + 3vw, 3.5rem); }

Запись выше — базовый вариант использования. Обратите внимание, как адаптивная типографика вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Современный CSS стремится от медиазапросов к внутренним механизмам: clamp(), %, container queries и flex/grid-схемы справляются без брейкпоинтов. Медиазапросы оставляют для исключений.

В реальной разметке адаптивная типографика встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это не «мобильная версия», а единая гибкая система, которая честно ведёт себя на любой ширине.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

media queries работают везде; container units (@container) требуют свежих браузеров и имеют fallback на обычные правила.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Без больших скачков при смене экрана.

Слишком большой vw «взрывает» заголовок.

7. Практическое задание

Настройте шкалу заголовков под ширину.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

h1 { font-size: clamp(2rem, 1rem + 3vw, 3.5rem); }

8. Как применять в проектах

Резиновые сетки, адаптивная типографика, «схлопывание» меню и боковых колонок, оптимизация картинок под разные экраны — типовые сценарии.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

макет не «ломается» между брейкпоинтами;
изображения гибкие: max-width: 100%;
clamp() и гибкие сетки там, где можно без медиазапросов;
скрытие контента используется осознанно;
проверено на мобильном и десктопе;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам