Адаптивные шрифты: ключевой фактор в создании успешного дизайна

Адаптивные шрифты в дизайне сайта решают вполне измеримую задачу: сделать так, чтобы текст оставался читаемым на экране в 320 пикселей шириной и не разваливался на мониторе в 2560, без десятка ручных исключений под каждое устройство. Задача звучит скучно ровно до того момента, пока вы не посмотрите записи визитов с телефонов и не увидите, как человек трижды зумит страницу пальцами и уходит.

В SEO я с 2005 года и типографикой занимаюсь не из любви к шрифтам, а потому что она напрямую влияет на две вещи: дочитывают ли текст и не сдвигается ли макет при загрузке. Первое видно в картах прокрутки, второе — в отчётах о скорости. Ниже — как устроена адаптивная типографика на практике: какими единицами задавать размеры, где брать цифры, как не поймать сдвиг макета из-за шрифта и что проверять перед запуском.

Что считать адаптивным шрифтом

Термин используют в двух разных смыслах, и от этого путаница. Первый смысл — начертание, которое подстраивается: переменные шрифты, где толщина и ширина букв меняются плавно в пределах одного файла. Второй смысл, и он для веб-разработки основной, — размер текста, который зависит от ширины экрана.

Простейший вариант второго подхода — ступеньки: набор медиазапросов, в каждом свой размер шрифта. Работает, но плохо масштабируется. Каждая новая ступень — ещё один блок кода, а между ступенями размер стоит на месте, и на 767 пикселях текст выглядит одним образом, а на 768 внезапно прыгает.

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

Почему это не только вопрос дизайна

Три эффекта, каждый из которых измерим.

Дочитываемость. Мелкий текст на телефоне заставляет масштабировать страницу. Каждое такое действие — повод закрыть вкладку. В картах прокрутки это видно как резкий обрыв на первом-втором экране, причём одинаково по всем страницам сайта, а не на отдельной.

Сдвиг макета. Если основной шрифт грузится файлом, браузер сначала рисует текст запасным шрифтом, а потом заменяет. Когда метрики двух шрифтов различаются, содержимое прыгает — это тот самый сдвиг, который учитывается в оценке качества загрузки. Пользователь в этот момент нередко попадает не по той ссылке.

Вес страницы. Набор из четырёх начертаний в четырёх форматах легко даёт полмегабайта, которые грузятся до отрисовки текста. На мобильном интернете это заметные секунды, и лечится это не сжатием картинок, а сокращением числа начертаний.

Тему разбирал отдельно: «Сайт без дизайна».

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

Единицы измерения: чем задавать размер

Единица	От чего зависит	Где уместна	Подвох
px	Ни от чего, фиксированный размер	Тонкие элементы: рамки, тени	Игнорирует настройку размера шрифта в браузере
em	От размера шрифта родителя	Отступы внутри компонента	Накапливается по вложенности, легко получить неожиданный размер
rem	От базового размера в корне документа	Основной инструмент для текста	Требует единой базовой точки, иначе теряется смысл
vw	От ширины окна	Крупные заголовки	В чистом виде опасен: на узком экране текст исчезает, на широком становится огромным
%	От родителя	Ширины блоков	Для размера текста ведёт себя как em со всеми его особенностями
ch	От ширины символа	Ограничение длины строки	Зависит от конкретного шрифта, меняется при подмене

Помогу с продвижением: продвижение сайта с гарантией результата — вывожу сайты в топ Яндекса белыми методами.

Рабочая связка простая: базовый размер в корне задан в rem, все размеры текста считаются от него, а масштабирование делает функция, зависящая от ширины окна. Единица vw используется только внутри такой функции, а не сама по себе, — иначе на экране телефона заголовок ужмётся до нечитаемого, а на большом мониторе займёт полстраницы.

Почему нельзя оставить всё в пикселях, хотя так проще всего. Пользователь может увеличить базовый размер шрифта в настройках браузера или системы — это делают люди со слабым зрением, и таких заметно больше, чем кажется. Размер, заданный в px, эту настройку игнорирует. Размер в rem — учитывает.

Если интересно направление с сайтами — базу даю в своём курсе:

8:14

Плавная типографика вместо ступенек

Функция clamp() задаёт минимум, предпочтительное значение и максимум одной строкой. Смысл конструкции: пока вычисленное значение находится между границами, оно используется; вышло за границу — берётся граница.

Практически это означает следующее. Для заголовка первого уровня вы задаёте нижнюю границу — размер, ниже которого он не опустится даже на самом узком экране. Верхнюю — размер, выше которого он не вырастет на широком мониторе. И среднее выражение, где размер связан с шириной окна. Между этими двумя точками шрифт меняется плавно, без прыжков на границах медиазапросов.

Смежный материал по теме — «Использование SEO-вебинаров для успешного повышения квалификации».

• Нижняя граница важнее верхней. Слишком крупный заголовок на большом экране выглядит неаккуратно, слишком мелкий на телефоне делает страницу нечитаемой.
• Не применяйте функцию к каждому элементу подряд. Достаточно масштабировать базовый размер и несколько крупных заголовков, остальное считается от базы.
• Проверяйте на трёх ширинах. 320, 768 и 1440 пикселей закрывают основные случаи; промежуточные значения при плавной схеме уже не преподносят сюрпризов.
• Оставьте медиазапросы там, где меняется не размер, а раскладка. Число колонок, порядок блоков, показ или скрытие элементов — это по-прежнему их работа.

Отдельно стоит запретить себе одну вещь: отключение возможности масштабирования страницы. В мета-теге viewport иногда встречаются параметры, запрещающие зум. Смысла в этом нет никакого, а людям, которым нужен крупный текст, вы закрываете единственный способ его получить.

Цифры, на которые можно опираться

Ориентиры ниже собраны из практики и типовых требований к доступности. Это не догма, но отклоняться от них стоит осознанно.

Параметр	Мобильные	Десктоп	Комментарий
Основной текст	16–18 px	17–20 px	Ниже 16 на телефоне часть браузеров сама предлагает зум
Заголовок статьи	26–32 px	36–48 px	Разрыв с основным текстом должен быть заметен сразу
Подзаголовки в тексте	20–24 px	24–30 px	Между уровнями нужна видимая разница, иначе структура не читается
Мелкие подписи	не менее 14 px	не менее 14 px	Сноски и подписи под таблицами тоже кто-то читает
Межстрочный интервал	1,5–1,7	1,5–1,6	На узком экране интервал нужен больше
Длина строки	по ширине экрана	60–80 знаков	Строка во всю ширину монитора теряется при переходе на следующую
Контраст текста к фону	от 4,5:1	от 4,5:1	Светло-серый текст на белом не спасёт никакой размер

Строка про длину заслуживает пояснения, потому что о ней забывают чаще всего. На широком мониторе текстовый блок без ограничения ширины растягивается на всю страницу, и глаз теряет начало следующей строки. Ограничение ширины контейнера примерно в 70 знаков решает вопрос — и это единственный пункт, который улучшает чтение именно на больших экранах, а не на телефонах.

Загрузка шрифтов и сдвиг макета

Даже идеально настроенные размеры не спасут, если сам файл шрифта приезжает с задержкой. Здесь работают несколько приёмов, и они важнее выбора начертания.

1. Свойство font-display. Значение swap показывает текст сразу запасным шрифтом и меняет его по загрузке — текст виден мгновенно, но возможен сдвиг. Значение optional позволяет браузеру вообще не применять шрифт при медленной сети, зато сдвига не будет.
2. Подбор запасного шрифта по метрикам. Если системный запасной шрифт близок по ширине букв к основному, подмена проходит почти незаметно. Разницу можно дополнительно скорректировать настройками отступов запасного шрифта.
3. Предзагрузка. Файлы шрифтов, которые нужны на первом экране, стоит загружать с приоритетом, а не ждать, пока браузер дойдёт до них при разборе стилей.
4. Хранение на своём домене. Подключение с внешнего сервиса добавляет обращение к чужому домену и делает вас зависимым от его доступности. Файлы лучше держать у себя.
5. Формат woff2. Он заметно легче предшественников и поддерживается всеми актуальными браузерами. Отдавать четыре формата на всякий случай сегодня незачем.
6. Подмножество символов. Если сайт на русском, из шрифта можно вырезать всё, кроме кириллицы, латиницы и знаков препинания. Вес файла падает в разы.

И главный вопрос, который стоит задать до всех технических приёмов: сколько начертаний вам действительно нужно. Обычно хватает двух — обычного и полужирного. Каждое дополнительное начертание, включая курсив и все промежуточные толщины, — отдельный файл и отдельная задержка. Дизайн-макет, требующий пяти толщин, стоит обсудить с дизайнером ещё раз.

Системные и переменные шрифты: что выбрать

Вариант	Плюсы	Минусы	Кому подходит
Системные шрифты	Ноль байт загрузки, нет сдвига, привычный вид на каждой системе	Разный вид у разных пользователей, слабая узнаваемость	Сайтам услуг, блогам, всему, где скорость важнее уникальности
Один файл шрифта	Единый вид, приемлемый вес	Одна толщина, полужирный браузер дорисовывает сам	Небольшим проектам с простой типографикой
Два-три начертания	Достаточная гибкость при контролируемом весе	Несколько файлов, нужна предзагрузка	Большинству коммерческих сайтов
Переменный шрифт	Все толщины в одном файле, плавные переходы	Файл тяжелее одного начертания, оправдан от трёх толщин	Проектам со сложной типографикой и брендбуком
Внешний сервис шрифтов	Быстрое подключение	Зависимость от чужого домена и его доступности	Прототипам, но не рабочим сайтам

Если нужна помощь по теме — обучение SEO-продвижению.

Про системные шрифты стоит сказать отдельно, потому что их незаслуженно считают признаком дешёвого сайта. Набор системных начертаний на актуальных операционных системах выглядит прилично, грузится мгновенно и не создаёт сдвига в принципе. Для информационного сайта или сайта услуг это часто лучший выбор, а сэкономленные килобайты заметнее любых типографских тонкостей.

Если нужны детали, смотрите «Фотографии товаров интернет магазина — это фактор ранжирования».

Доступность и настройки пользователя

Часть посетителей приходит с изменёнными настройками: увеличенный базовый размер шрифта в браузере, системное увеличение текста на телефоне, включённый режим повышенного контраста. Адаптивная типографика должна это переживать.

• Размеры текста в rem, а не в px — тогда изменение базового размера в настройках браузера работает.
• Высота блоков не должна быть жёстко фиксированной: при увеличенном шрифте текст просто обрежется или вылезет наружу.
• Кнопки и поля форм тоже масштабируются: типичная поломка — увеличенный текст в кнопке фиксированной ширины.
• Проверка простая: увеличьте в браузере размер шрифта до 150% и пройдите по ключевым страницам. Ломается обычно шапка, меню и карточки товаров.
• Ещё проверка — масштабирование страницы до 200% на телефоне. Горизонтальная прокрутка при этом появляться не должна.

Это не абстрактная забота. Люди с ослабленным зрением — реальная и платёжеспособная часть аудитории, а для многих сфер требования доступности прописаны в отраслевых нормативах и проверяются формально.

Что проверить перед запуском

Проверка	Как делается	Признак проблемы
Ширины 320, 768, 1440	Инструменты разработчика в браузере	Прыжки размера, обрезанные заголовки, горизонтальная прокрутка
Размер основного текста на телефоне	Открыть сайт на реальном устройстве	Желание приблизить страницу пальцами
Сдвиг при загрузке шрифта	Медленная сеть в инструментах разработчика	Текст меняет размер и прыгает после отрисовки
Вес файлов шрифтов	Вкладка сети в инструментах разработчика	Суммарно больше 150–200 КБ
Увеличение шрифта до 150%	Настройки браузера	Наложение блоков, обрезанный текст в кнопках
Длинные слова и числа	Длинное название товара, телефон, артикул	Выход текста за границу блока
Контраст	Проверка цвета текста и фона	Соотношение ниже 4,5:1 для основного текста

Отдельно про предпоследнюю строку. Русские составные слова и длинные артикулы регулярно ломают верстку на узких экранах, и в макете этого не видно, потому что дизайнер подставлял короткие примеры. Проверять надо на самых длинных реальных данных из вашей базы, а не на образцовом тексте.

Частые вопросы

Влияют ли шрифты на позиции в поиске? Напрямую нет. Влияние идёт двумя путями: через скорость загрузки, где тяжёлые файлы шрифтов задерживают появление текста, и через поведение, где нечитаемый на телефоне текст сокращает дочитывания. Оба параметра поиск измеряет, поэтому связь есть, но она не прямая.

Нужно ли отказываться от медиазапросов совсем? Нет. Плавная типографика заменяет медиазапросы для размеров текста, но раскладка по-прежнему меняется скачком: три колонки на десктопе, одна на телефоне. Разумный порядок такой — размеры плавные, структура ступенчатая.

Что лучше для скорости: системный шрифт или свой? Системный, без вариантов: ноль байт загрузки и отсутствие сдвига макета. Свой шрифт оправдан, когда типографика — часть узнаваемости бренда. В этом случае оставьте два начертания, положите файлы на свой домен и включите предзагрузку.

Почему текст на телефоне выглядит крупнее, чем задумано? Мобильные браузеры умеют самостоятельно увеличивать текст, который считают мелким. Отключать эту функцию не нужно — правильнее задать основному тексту размер от 16 пикселей, и браузер перестанет вмешиваться.

Можно ли задавать размер заголовка только в vw? Технически можно, практически не стоит. На ширине 320 пикселей заголовок станет нечитаемым, на широком мониторе — непропорционально огромным. Единица vw нужна как переменная часть внутри выражения с ограничителями, а не как самостоятельное значение.

Как проверить, что шрифт вызывает сдвиг макета? В инструментах разработчика включите замедление сети и перезагрузите страницу с отключённым кэшем. Если после появления основного шрифта текст меняет размер и содержимое подпрыгивает, сдвиг есть. Лечится подбором близкого запасного шрифта или переходом на системный.

Коротко

• Адаптивная типографика — это размер текста как функция ширины экрана с жёсткими нижней и верхней границами, а не набор ступенек по медиазапросам.
• Размеры текста задаются в rem от единой базовой точки: только так работают настройки размера шрифта в браузере и системе.
• Ориентиры: основной текст от 16 пикселей на мобильных, межстрочный интервал 1,5–1,7, длина строки 60–80 знаков на десктопе, контраст от 4,5:1.
• Файлы шрифтов дают сдвиг макета и задержку отрисовки: помогают font-display, предзагрузка, формат woff2, подмножество символов и сокращение числа начертаний.
• Системные шрифты для сайта услуг или блога чаще всего лучше своих: ноль байт загрузки и отсутствие сдвига перевешивают уникальность.
• Проверять надо на трёх ширинах, на реальном телефоне, при увеличении шрифта до 150% и на самых длинных реальных данных из базы.

Если после переделки типографики хочется понять, что ещё тормозит сайт и как это отражается на поиске, приходите на SEO-консультацию: посмотрим отчёты о скорости и карты прокрутки вместе и разберём, где теряются посетители до того, как дочитали.