Расскажу про правильную типографику в веб-дизайне — как настроить и адаптировать тексты на сайте, чтобы они хорошо читались на любом устройстве. Это сделает ваш сайт удобнее и доступнее для пользователей, а значит — поможет получить больше клиентов. Также поделюсь полезными сервисами и лайфхаками, ускоряющими работу, и покажу, как быстро реализовать адаптивность текстов в конструкторе сайтов Taptop.
Мы все хотим, чтобы тексты на сайте били в цель и превращали посетителей в клиентов. Но для начала нужно, чтобы ваш контент хотя бы прочитали. Этого может не случиться, если информация на страницах представлена неудобно для восприятия.
Вот примеры возникающих сложностей:
Посмотрим, как не допускать этих ошибок и грамотно выстраивать типографику на сайте.
Выбор шрифтов — это баланс между удобочитаемостью и визуальной привлекательностью. Они должны не только гармонично вписываться в общий дизайн сайта, но и быть доступными для чтения на любых устройствах.
Основные рекомендации:
Не используйте много шрифтов
Желательно, чтобы на сайте было не больше 2-3 вариантов гарнитуры. Иначе страница будет выглядеть перегруженной. Рекомендуется выбрать один шрифт для основного текста и один–два для заголовков, подзаголовков и акцентных элементов.
Отдавайте предпочтение дружественным для веба вариантам
Они легко воспринимаются на экранах, хорошо масштабируются и будут корректно отображаться на большинстве устройств.
Например, стандартные популярные шрифты для сайта:
Sans-serif (без засечек):
Serif (с засечками):
Выбирайте шрифты, которые хорошо сочетаются между собой
Гармоничное сочетание стилей поможет улучшить визуальное восприятие.
Как сделать быстрее: Используйте специальные сервисы для подбора шрифтовых пар. Они предлагают готовые сочетания, а также примеры их использования. Например, Fontpair, Fontjoy, Mixfont.
Проверяйте, как шрифт читается на мобильных устройствах
Сначала протестируйте его на маленьких экранах. Бывает так, что гарнитура хорошо воспринимается на компьютере, но при этом на смартфоне выглядит нечитабельно.
Можно выбирать размеры на глаз, но более грамотный подход — создание единой шрифтовой иерархии или типографской шкалы. Как это сделать:
1. Выбрать базовый размер для основного текста. Для хорошей читабельности оптимально — 16-18 пикселей.
2. Установить размеры заголовков разного уровня (от H1 до H6). Для этого удобно использовать коэффициент, на который последовательно умножается размер шрифта. Таким образом получится гармоничная для восприятия текстовая иерархия.
Обычно используются следующие коэффициенты:
Например, при базовом размере шрифта 16px и коэффициенте 1.5 — получатся заголовки 24, 36, 54px и т.д.
Как сделать быстрее: Для создания типографской шкалы используйте специальные сервисы, которые за пару секунд рассчитают размеры с учетом выбранного коэффициента. Например, сайт Typescale или плагин для Figma Typescales.
Правильно подобранный интерлиньяж сделает контент удобнее для восприятия. Высота строки выбирается в зависимости от типа и размера шрифта: обычно от 110% до 140%.
Чем больше размер шрифта, тем меньше должна быть высота строки. Например, если для крупного заголовка поставить интерлиньяж 140%, то каждая строка будет выглядеть, как отдельный заголовок. Поэтому в данном случае лучше выбрать значение 100-110%.
Заголовок 74px, высота строки 140%
Заголовок 74px, высота строки 100%
Для основного текста можно установить интерлиньяж 120-140%.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
12343 тендера
проведено за восемь лет работы нашего сайта.
Размер 18px, высота строки 120%
Оптимальная длина строки для отображения на компьютере — 45-75 знаков. В этом варианте контент удобно читать и глаза не устают от постоянного перемещения по экрану. Особенно это актуально для больших разрешений. Желательно не растягивать текстовый блок на всю ширину страницы, а выбрать его размеры с учетом оптимальной длины строки.
Длина строки 59 символов
Чтобы контент на сайте было удобно читать с любого устройства, нужно адаптировать тексты под разные разрешения экранов. При этом важно учитывать как размеры шрифтов, так и расположение текстовых блоков.
Адаптация размера шрифта
Размер текста нужно масштабировать в зависимости от разрешения экрана. Обычно для каждой версии сайта (например, для компьютера, планшета и смартфона) устанавливают свой размер шрифта.
В примере ниже для заголовка установлены следующие значения: для компьютера 110px, для планшета 90px, для смартфона 50px. Можно сделать еще дополнительные версии, например, для широкоэкранных мониторов.
Как сделать быстрее: Чтобы быстрее адаптировать текст при верстке сайта, используйте вместо пикселей относительные единицы измерения — em и rem.
Относительные единицы измерения используются при написании кода сайта разработчиками, но их можно использовать и в некоторых современных конструкторах сайтов. No-code платформа Taptop помогает значительно ускорить сборку страниц в редакторе за счет использования em, rem, % и других относительных единиц измерения.
Поясним разницу между em и rem:
Пример: Текст размещен в блоке, у которого установлен размер шрифта 16px. Устанавливаем шрифт 1em → получаем 16px, 1.5em → получаем 24px.
Используя em, можно одновременно управлять размерами текста у всех вложенных элементов блока одним действием — меняя его собственный размер шрифта.
Меняем шрифт у блока с 16 на 20 и текст автоматически увеличивается
Пример: Если у пользователя в браузере установлен шрифт 16px (используется по умолчанию), то 1rem = 16px, 2rem = 32px и т.д. Если пользователь увеличит масштаб базового текста до 18px, то получится 1rem = 18px, 2rem = 36px и т.д.
Использование rem помогает сделать сайт доступным для слабовидящих — текст на сайте будет автоматически адаптироваться к настройкам пользователя.
Адаптация расположения текста и отступов
Расположение и размеры текстовых блоков нужно подстраивать под разные устройства. На больших экранах ширину столбцов лучше сделать поменьше для более удобного чтения. На смартфонах контент обычно растягивается на весь экран. Также на мобильных устройствах желательно увеличивать отступы по бокам, чтобы контент не «утопал» в краях экрана.
1. Все стили типографики настраиваем на одной странице, создавая UI Kit.
Для корневого блока Root, который содержит все остальные элементы страницы, устанавливаем желаемый размер базового шрифта. Например, выберем 16px.
2. Добавляем на страницу все типы текстов, которые используются на сайте (заголовки всех уровней, основной текст и т.д.), и создаем каждому класс для хранений стилей — например, text--h1 для заголовка первого уровня.
3. Для каждого элемента выбираем соответствующий шрифт и устанавливаем размер в em и другие параметры. Единица измерения em привязывает размер шрифта каждого текстового элемента к корневому блоку Root. Так что все тексты будут автоматически адаптироваться к изменениям его настроек.
4. На контентных страницах присваиваем элементам созданные классы, чтобы они приобрели нужные стили. Например, тексту с названием страницы добавим класс text--h1.
5. Меняя величину шрифта у блока Root, можно управлять размерами всех текстов на сайте.
Вот так это выглядит в работе:
Чтобы улучшить восприятие текстов на сайте и сделать их более привлекательными для пользователей, нужно:
Чтобы узнать еще больше полезного про веб-дизайн и создание сайтов — подписывайтесь на Телеграм-канал no-code платформы Taptop.
А если хотите научиться пользоваться современными инструментами no-code разработки — приходите к нам на бесплатный курс Академии Taptop. Вас ждет 10 уроков, обратная связь от преподавателя, проверка домашних работ и два проекта в портфолио.
