Типографика — это не просто «какой шрифт выбрать». В современном фронтенде это живой механизм, который реагирует на размер экрана, ориентацию устройства, плотность пикселей, пользовательские настройки и даже способ ввода данных.
Адаптивная типографика — один из ключевых элементов удобного интерфейса, особенно в мире, где сайт могут открыть и на 6-дюймовом смартфоне, и на 32-дюймовом мониторе.
Разберёмся, как всё это работает на практике — от ориентации экрана и медиазапросов до rem, HTML5-инпутов и доступности.
Разные стили на все случаи
Дизайн страницы для мобильного телефона в вертикальной ориентации далеко не всегда подходит для ситуации, когда пользователь поворачивает устройство.
Шрифт, который идеально читался в портретном режиме, в ландшафтном может оказаться слишком крупным, строки — слишком короткими, а блоки — «воздушными».
Поэтому при создании адаптивной верстки часто возникает необходимость подключать разные стили в зависимости не только от ширины экрана, но и от его пропорций.
И это напрямую касается типографики:
- Меняются размеры шрифта;
- Межстрочные интервалы;
- Отступы;
- Длина строк;
- Иногда — даже начертание.
Макет для вертикальной ориентации
Предположим, по дизайну:
На мобильных устройствах в портретной ориентации элементы блока услуг должны располагаться строго друг под другом
Это логично:
- Экран узкий;
- Вертикальный скролл привычен;
- Текст легче читать одной колонкой.
Здесь типографика обычно:
- Крупнее;
- С увеличенным line-height;
- С большими вертикальными отступами.
Макет для остальных сценариев
Во всех остальных случаях:
- Горизонтальная ориентация смартфона;
- Планшеты;
- Десктопы;
блоки должны выстраиваться по два в строке.
Это автоматически меняет:
- Ширину текстового блока;
- Длину строки;
- Визуальный ритм.
Следовательно, типографика тоже должна подстраиваться:
- Шрифт может быть чуть меньше;
- Межстрочные интервалы — компактнее;
- Отступы — аккуратнее.
Медиа-функции определения ориентации
Попытаться решить задачу через min-width — плохая идея.
Ширины экрана недостаточно, чтобы понять, в какой ориентации находится устройство.
Для этого существуют специальные медиа-функции:
- device-aspect-ratio;
- aspect-ratio;
- orientation.
device-aspect-ratio (устаревшая)
Эта медиа-функция определяет соотношение ширины и высоты физического экрана устройства:
Записывается как отношение device-width / device-height.
Пример расчёта
Разрешение 15″ MacBook Pro: 2880 × 1800
Наибольший общий делитель — 360:
2880 / 360 = 8
1800 / 360 = 5
👉 device-aspect-ratio: 8/5
⚠️ На сегодняшний день считается устаревшей и практически не используется.
aspect-ratio — актуальный вариант
aspect-ratio определяет соотношение ширины к высоте отображаемой области, а не физического экрана.
Записывается в виде дроби width / height.
Минимум / максимум
Как и width или height, aspect-ratio можно использовать с приставками:
- min-aspect-ratio;
- max-aspect-ratio.
Также не забываем базовые брейкпоинты, которые стоит знать наизусть:
- 320px — первые смартфоны;
- 480px — ранние смартфоны;
- 640px — большинство современных телефонов;
- 768px — планшеты;
- 1024px — десктопы;
- 1280px+ — большие экраны.
orientation — самый простой и понятный способ
orientation отвечает на прямой вопрос:
устройство в портретном или ландшафтном режиме?
Возможные значения:
- portrait — ширина меньше или равна высоте;
- landscape — во всех остальных случаях.
Разный фон и типографика
Используя orientation, можно:
- Менять background-image;
- Подгружать разные шрифты;
- Менять размеры заголовков.
Просто, эффективно и читаемо.
От 4:3 до 21:9 — реальность современных экранов
4:3 — классика прошлого
Старое, почти «квадратное» соотношение. Раньше использовалось в ЭЛТ-мониторах и первых iPad.
Сегодня встречается редко, но важно помнить о нём при работе с таблицами, дашбордами и корпоративными системами — по высоте контента тут всегда больше, чем по ширине.
16:9 — абсолютный стандарт
Самое распространённое соотношение экранов:
- Ноутбуки;
- Мониторы;
- Телевизоры;
- Большинство Android-устройств.
Под него чаще всего делаются макеты. Хорошо подходит для видео, лендингов и универсальных интерфейсов, но на широких экранах может появляться «лишнее» пустое пространство.
16:10 — больше воздуха по вертикали
Популярно среди дизайнеров и разработчиков (MacBook, профессиональные мониторы).
Даёт больше полезной высоты — удобно для кода, редакторов и текстового контента. Интерфейсы ощущаются менее «сжатыми».
3:2 — баланс мобильности и удобства
Часто встречается в:
- Microsoft Surface;
- Планшетах;
- Некоторых ноутбуках.
Хорошо подходит для чтения, работы с документами и вертикального скролла. Для веба это почти «золотая середина» между мобильными и десктопными сценариями.
15:10 — маркетинговый родственник 3:2
По сути, очень близок к 3:2 (1.5 против 1.6).
Редко выделяется отдельно, но может всплывать в спецификациях устройств. Вёрстка под него не требует специальных решений — адаптация работает автоматически.
21:9 — ультраширокие экраны
Мониторы для работы, игр и многозадачности.
Проблема для веба — слишком длинные строки текста и «растянутые» блоки.
Решение:
- Ограничение max-width;
- Центрирование контента;
- Многоколоночные сетки.
Итоги по современным экранам
Сегодня фронтенд — это не про конкретное соотношение сторон, а про гибкость:
- fluid-layout;
- Резиновая сетка;
- Адаптивная типографика;
- Ограничения по ширине контента.
Экранов много, а сайт должен выглядеть адекватно на каждом из них — от старого 4:3 до ультраширокого 21:9.
UI vs UX: внешний вид и пользовательский опыт
UI (User Interface) — это визуальная часть интерфейса (сам дизайн), с которой взаимодействует пользователь: кнопки, шрифты, цвета, иконки и компоновка элементов.
UI отвечает за внешний вид продукта и за то, насколько интерфейс выглядит понятным и аккуратным.
UX (User Experience) — это пользовательский опыт, то есть ощущения и впечатления человека от взаимодействия с продуктом.
UX включает логику, сценарии использования, удобство навигации и предсказуемость поведения интерфейса.
Хороший UI делает продукт визуально привлекательным, а хороший UX — удобным и логичным.
UI и UX всегда работают вместе: красивый интерфейс без удобства бесполезен, а удобный без визуального порядка — труден в использовании.
Особенности HTML-элементов и влияние на UX
Типы input в HTML5
Раньше почти везде использовался:
<input type="text">
В HTML5 появились семантические типы:
- search;
- email;
- tel.
Специальные символы на клавиатуре
На мобильных устройствах это даёт огромный плюс к удобству:
- type="search" — кнопка с лупой и крестик очистки;
- type="email" — символ @ сразу на основной клавиатуре;
- type="tel" — цифровая клавиатура.
Меняем поведение поля
<input type="email" required>
<input type="tel">
Пользователь:
- Меньше переключается между раскладками;
- Быстрее вводит данные;
- Реже ошибается.
Дополнительная проверка email
Для email браузер автоматически проверяет:
- Наличие @;
- Наличие части после @.
Ошибки будут показаны без JavaScript.
Поддержка в старых браузерах
Если браузер не знает указанный type, он:
- Просто считает поле type="text".
Ничего не ломается — graceful degradation 👍.
Единицы измерения и адаптивный текст
Почему rem — наше всё
При адаптивной верстке постоянно приходится менять размеры шрифта.
Решение «в лоб» — прописывать размеры каждому элементу — плохо масштабируется.
rem (root em) позволяет привязать весь текст к одному значению — font-size тэга html.
em — предшественник rem и зависит от font-size родительского элемента.
rem зависит от font-size тэга html.
Единица em появилась раньше rem и рассчитывается относительно значения font-size родительского элемента, из-за чего размеры могут накапливаться при вложенности. Это делает em гибким, но менее предсказуемым в сложных интерфейсах.
Единица rem была введена позже как решение этой проблемы и всегда привязана к font-size корневого тега html. Благодаря этому rem обеспечивает единый масштаб типографики и упрощает поддержку дизайна на всём сайте.
Формула перевода px → rem
Vrem = Vpx / FShtml
Где:
- Vrem — значение в rem;
- Vpx — значение в px;
- FShtml — font-size у html.
Пример расчёта
Было: 22px
Root: 10px
22 / 10 = 2.2rem
Расчёт root-размера
Формула:
FShtml = Vpx / Vrem
Для мобильных (до 767px)
- Vpx = 18px
- Vrem = 2.2
18 / 2.2 ≈ 8.19px
Пользовательский размер шрифта
Указывать font-size в px — не лучшая идея:
- Пользователь может увеличить базовый размер шрифта в браузере;
- px полностью игнорируют эти настройки.
👉 Лучший вариант — проценты.
Расчёт в процентах
По умолчанию:
- 16px = 100%
Для десктопа (10px):
10 × 100 / 16 = 62.5%
Для мобильных (8.19px):
8.19 × 100 / 16 ≈ 51.19%
Проверяем значения
Если html = 8px:
- 2rem → 16px;
- 2.5rem → 20px;
- 3rem → 24px.
Типографика сохраняет пропорции — идеально.
Округление rem и физика пикселя
При расчёте размеров в rem браузер часто получает дробные значения в пикселях, но физический экран не может отобразить «половину пикселя» в прямом смысле. Каждый пиксель состоит из трёх субпикселей (RGB), которые могут быть либо включены, либо выключены, поэтому итоговое значение всё равно приводится к целому числу пикселей. Из-за этого браузер выполняет округление — вверх или вниз — чтобы корректно отрисовать текст на экране. Для разработчика это означает, что дробные font-size допустимы и полезны для расчётов, но в реальности они всегда будут сведены к ближайшему отображаемому значению, и выбор стратегии округления зависит от визуального результата.
Когда мы высчитываем rem и получаем дробные части, то мы всегда округляем данные в большую или меньшую стороны, так как пиксель состоит из трех основных светодиодов красный, зеленый и синий (RGB). И когда нам нужен черный свет они все тухнут, а когда нам нужен белый свет они загораются все белым, а когда нам нужен зеленый, красный или синий, то у нас загорается только один зеленый (один зеленый пиксель это одна зеленая «лампочка»), либо красный и синий светодиод соответственно. И поэтому при написании font-size в виде дробного числа, у нас не смогут физически загореться дробные части наших светодиодов, так как может загореться только 1, 2, 3, 8 или 9 светодиодов. Дробно лампочки загореться не могут. Поэтому полученные формулами дробные числа мы всегда округляем в большую или меньшую сторону. В какую сторону округлять, решать Вам!
Заключение
Адаптивная типографика — это не «поставить font-size в медиа-запросе».
Это комплексный подход, который учитывает:
- Ориентацию экрана (orientation, aspect-ratio);
- Разные сценарии использования;
- Семантику HTML-элементов;
- Удобство ввода данных;
- Пользовательские настройки браузера;
- Масштабируемость интерфейса.
Используя rem, проценты для root-размера, правильные типы input и медиа-запросы по ориентации, мы создаём интерфейсы, которые не просто выглядят красиво, а реально удобны и человечны.
А это и есть цель хорошего фронтенда.
Полезные ресурсы:
Сообщество дизайнеров в VK:
https://vk.com/grafantonkozlov
Канал на Дзен:
https://dzen.ru/grafantonkozlov
Телеграмм канал сообщества:
https://t.me/grafantonkozlov
Премиум контент: