Когда говорят о дизайне сайта, обычно вспоминают цвета, изображения, анимацию и расположение блоков. Но большую часть информации человек получает через текст.
Если текст трудно читать, пользователь не станет разбираться в предложении. Он может не заметить стоимость, пропустить важное условие, не понять разницу между услугами или не найти кнопку.
Типографика отвечает за то, как текст выглядит и воспринимается на странице. К ней относятся выбор шрифта, размер букв, длина строки, интервалы, контраст, расположение заголовков и связь между разными текстовыми элементами.
Хорошая типографика почти не привлекает к себе внимания. Человек просто читает страницу и понимает, куда смотреть дальше. Проблемная типографика заставляет напрягаться даже тогда, когда сам текст написан понятно.
Что относится к типографике сайта
Типографика — это не только выбор шрифта.
При работе с текстом дизайнер определяет:
- гарнитуру;
- начертание;
- размер;
- межстрочный интервал;
- расстояние между буквами;
- длину строки;
- ширину текстовой колонки;
- выравнивание;
- цвет;
- контраст с фоном;
- интервалы между абзацами;
- размеры заголовков;
- оформление списков;
- способ выделения ссылок;
- поведение текста на разных экранах.
Все эти параметры работают вместе. Даже хороший шрифт становится неудобным, если текст слишком мелкий, строки растянуты на всю ширину экрана, а между абзацами нет воздуха.
Зачем бизнесу разбираться в типографике
Владельцу компании не нужно вручную настраивать кернинг каждой пары букв. Но он должен понимать, помогает ли оформление текста посетителю изучить предложение.
Типографика влияет на несколько практических задач.
Помогает быстро понять страницу
Большинство пользователей сначала просматривает страницу, а уже затем решает, стоит ли читать подробнее.
Человек обращает внимание на:
- основной заголовок;
- подзаголовки;
- выделенные фразы;
- списки;
- цены;
- кнопки;
- подписи;
- изображения.
Если все элементы выглядят одинаково, страницу трудно сканировать. Пользователь видит сплошной массив текста и не понимает, где находится нужная информация.
Показывает, что на странице главное
Размер, насыщенность и расположение текста создают визуальную иерархию.
Например:
- H1 объясняет основную тему страницы.
- H2 разделяет материал на крупные смысловые части.
- H3 раскрывает отдельный вопрос внутри раздела.
- Основной текст объясняет детали.
- Подписи и примечания дают дополнительную информацию.
Иерархия должна быть заметной. Если H2 отличается от обычного абзаца только на один пиксель, посетитель не увидит структуру.
Влияет на доверие
Неаккуратный текст может создать ощущение, что компания так же невнимательно относится к своей работе.
На восприятие влияют:
- разные размеры одинаковых элементов;
- слишком много шрифтов;
- случайные выделения;
- неравномерные отступы;
- ошибки в переносах;
- слишком мелкие подписи;
- слабый контраст;
- заголовки, которые не помещаются в блок;
- разное оформление кнопок и ссылок.
Пользователь может не назвать конкретную ошибку, но заметит, что страница выглядит несобранной.
Помогает довести человека до целевого действия
Текст на сайте должен последовательно отвечать на вопросы:
- Что предлагает компания?
- Подходит ли это мне?
- Как решается моя задача?
- Сколько это стоит?
- Почему компании можно доверять?
- Что нужно сделать дальше?
Типографика помогает разделить ответы и выделить следующий шаг. Если кнопка теряется среди других элементов, а условия написаны мелким серым текстом, даже сильное предложение может не сработать.
Основные термины
Гарнитура
Гарнитура — семейство шрифтов, объединённых общим стилем. Например, у одной гарнитуры могут быть обычное, полужирное и курсивное начертания.
На сайте обычно достаточно одной или двух гарнитур:
- основной — для большинства текста;
- дополнительной — для заголовков или отдельных акцентов.
Использование большого количества шрифтов усложняет дизайн и увеличивает загрузку страницы.
Начертание
Начертание определяет насыщенность и стиль текста:
- обычное;
- среднее;
- полужирное;
- жирное;
- курсивное.
Полужирный текст помогает выделить важную мысль. Если выделить почти весь абзац, акцент исчезнет.
Кегль
Кегль — размер шрифта. На сайте он должен оцениваться не изолированно, а вместе с гарнитурой, межстрочным интервалом и шириной колонки.
Два разных шрифта при одинаковом значении 16 px могут выглядеть по-разному. У одного буквы крупнее и шире, у другого — меньше и тоньше.
Интерлиньяж
Интерлиньяж — расстояние между строками.
При слишком маленьком интервале строки визуально слипаются. При слишком большом каждая строка выглядит отдельным фрагментом и абзац теряет цельность.
Для основного текста часто используют высоту строки около 1,4–1,6 от размера шрифта, но это не универсальное правило. Итог зависит от гарнитуры, длины строки и размера экрана.
Кернинг
Кернинг — расстояние между конкретными парами символов. Он нужен, чтобы буквы визуально воспринимались равномерно.
В большинстве современных шрифтов базовый кернинг уже настроен. Вручную его чаще корректируют в крупных заголовках, логотипах и рекламных материалах.
Трекинг
Трекинг меняет расстояние между всеми буквами в слове или фрагменте текста.
Слишком плотный текст становится тяжёлым. Слишком разреженный ухудшает связь букв внутри слова. Особенно осторожно нужно работать с трекингом основного текста.
Длина строки
Длина строки — количество символов, которое человек читает до перехода на следующую строку.
На широком экране нельзя автоматически растягивать абзац от одного края страницы до другого. Глазам сложно возвращаться к началу следующей строки.
Для обычного текста разумной отправной точкой может быть диапазон примерно 50–75 символов, но ширину необходимо проверять на реальном шрифте. В критерии WCAG 2.2 для расширенного уровня доступности указана возможность ограничить строку 80 символами. Это не означает, что каждая строка обязательно должна иметь ровно такую длину. WCAG 2.2.
Как выбрать шрифт для сайта
Проверьте читаемость русского текста
У шрифта должна быть полноценная кириллица. Недостаточно проверить только название компании и один заголовок.
Посмотрите, как выглядят:
- строчные буквы;
- цифры;
- кавычки;
- тире;
- знаки валют;
- буквы «ё», «й», «д», «л», «ж»;
- полужирное начертание;
- длинные абзацы.
Некоторые гарнитуры красиво смотрятся в латинице, но имеют слабую или неполную кириллицу.
Учитывайте характер бизнеса
Шрифт помогает создавать образ компании.
Строгая геометрическая гарнитура может поддерживать образ технологичного продукта. Мягкие округлые формы подходят проектам, которые хотят выглядеть дружелюбно. Контрастный шрифт с засечками может создавать ощущение редакционного или премиального оформления.
Но характер не должен мешать чтению. Декоративный шрифт можно использовать в одном крупном заголовке, но длинное описание услуги в таком оформлении читать трудно.
Не выбирайте шрифт только по моде
Популярная гарнитура не обязательно подходит конкретному сайту.
Перед выбором нужно проверить:
- соответствует ли шрифт позиционированию;
- есть ли нужные начертания;
- поддерживается ли кириллица;
- хорошо ли читаются цифры;
- понятны ли буквы при небольшом размере;
- не слишком ли большой файл;
- разрешено ли использование на сайте;
- как шрифт выглядит на Windows, Android и iOS.
Проверьте лицензию
Не каждый файл, найденный в интернете, можно законно использовать в коммерческом проекте.
У лицензии могут быть отдельные условия для:
- печатных материалов;
- сайта;
- приложения;
- логотипа;
- рекламы;
- передачи файла заказчику.
Если шрифт платный, необходимо сохранить подтверждение покупки и условия лицензии.
Шрифт с засечками или без
Нет правила, по которому для сайтов разрешены только шрифты без засечек.
Современные экраны позволяют использовать оба варианта. Важнее качество конкретной гарнитуры, размер, контраст и условия использования.
Шрифты без засечек подходят, когда:
- нужен нейтральный интерфейс;
- на странице много коротких элементов;
- используются таблицы, формы и карточки;
- важна компактность;
- бренд должен выглядеть современно и технологично.
Шрифты с засечками подходят, когда:
- нужен редакционный характер;
- сайт связан с культурой, образованием или премиальным продуктом;
- используются крупные заголовки;
- гарнитура хорошо подготовлена для экрана;
- дизайн предусматривает достаточно воздуха.
Можно сочетать оба типа: один использовать для заголовков, другой — для основного текста. Но шрифтовая пара должна создавать понятную иерархию, а не конкурировать внутри страницы.
Сколько шрифтов использовать
Для большинства корпоративных сайтов достаточно:
- одной гарнитуры с несколькими начертаниями;
- либо двух совместимых гарнитур.
Одна гарнитура может полностью закрыть задачу, если в ней есть обычное, среднее и полужирное начертания.
Каждый дополнительный шрифт создаёт новые вопросы:
- где его использовать;
- как он сочетается с остальными;
- как выглядит на мобильном устройстве;
- сколько весит файл;
- не нарушает ли он единообразие.
Если нельзя одним предложением объяснить роль нового шрифта, скорее всего, он не нужен.
Размер основного текста
Значение около 16 px часто используют как отправную точку для текста на экране. Но воспринимаемый размер зависит от гарнитуры.
Поэтому проверяем не число само по себе, а реальное чтение:
- можно ли читать текст без увеличения;
- различаются ли похожие символы;
- хватает ли расстояния между строками;
- не становится ли строка слишком длинной;
- удобно ли читать со смартфона;
- не выглядит ли текст второстепенным из-за слабого цвета.
Мелкий текст нельзя оправдывать тем, что он «аккуратнее смотрится». Если пользователю приходится приближать экран, дизайн не выполнил свою задачу.
Как построить типографическую иерархию
До разработки сайта полезно определить типографическую систему.
Например:
- крупный заголовок первого экрана;
- H1 внутренних страниц;
- H2;
- H3;
- основной текст;
- крупный вводный абзац;
- подпись;
- текст кнопки;
- ссылка;
- примечание;
- цена;
- числовой показатель.
Для каждого элемента задаются:
- размер;
- начертание;
- высота строки;
- цвет;
- максимальная ширина;
- отступ сверху и снизу;
- поведение на мобильном устройстве.
Это позволяет сохранять единообразие. При добавлении новой страницы не приходится заново придумывать оформление каждого заголовка.
Заголовки должны объяснять содержание
Крупный шрифт не делает слабый заголовок полезным.
Заголовок должен сообщать, о чём раздел. Фразы вроде «Наши возможности», «Новый уровень» или «Будущее уже здесь» без контекста плохо помогают пользователю.
Лучше использовать конкретные формулировки:
- «Что входит в разработку сайта»;
- «Сколько времени занимает работа»;
- «Как мы отслеживаем заявки»;
- «Какие страницы нужны для SEO»;
- «Что получает клиент после запуска».
Типографика выделяет смысл, но не заменяет его.
Как оформлять абзацы
Один абзац — одна мысль
Длинный текст без разделения трудно читать, особенно на смартфоне.
Абзац стоит закончить, когда:
- закончилась мысль;
- начинается новый аргумент;
- появляется пример;
- меняется этап процесса;
- нужно выделить важное условие.
Не нужно искусственно делать каждое предложение отдельным абзацем. Текст превращается в набор обрывков и теряет ритм.
Используйте подзаголовки
Подзаголовок помогает пользователю вернуться к нужному разделу и понять структуру материала.
В длинной статье новый смысловой блок не должен начинаться незаметно внутри большого абзаца.
Используйте списки по назначению
Список полезен, когда элементы действительно равноправны:
- характеристики;
- этапы;
- причины;
- требования;
- варианты;
- результаты проверки.
Если пункты продолжают одну связанную мысль, обычный абзац может читаться лучше.
Контраст текста и фона
Светло-серый текст на белом фоне может выглядеть аккуратно на дизайнерском мониторе, но часть пользователей будет читать его с трудом.
WCAG 2.2 устанавливает минимальный контраст:
- 4,5:1 для обычного текста;
- 3:1 для крупного текста.
Для усиленного уровня требования выше: 7:1 и 4,5:1 соответственно. Разъяснение W3C о контрасте.
Особенно важно проверить:
- основной текст;
- подписи к полям;
- ссылки;
- текст на кнопках;
- ошибки формы;
- текст поверх изображения;
- серые примечания;
- неактивные состояния;
- текст в карточках.
Если фон представляет собой фотографию или градиент, контраст может меняться в разных частях блока. В этом случае помогает затемнение, однотонная подложка или перенос текста на спокойный участок.
Почему текст поверх изображения часто плохо читается
Изображение содержит светлые и тёмные детали. Даже если белый текст хорошо виден на одном участке, на другом буквы могут потеряться.
Проблема усиливается на мобильном устройстве, где изображение обрезается иначе.
Перед публикацией нужно проверить:
- все разрешения;
- длинный и короткий заголовок;
- изменение текста;
- разные фотографии;
- увеличение шрифта;
- перевод страницы на другой язык.
Безопаснее отделить текст от изображения или использовать стабильную контрастную подложку.
Не передавайте важный текст картинкой
Текст внутри изображения:
- нельзя нормально выделить;
- сложнее увеличить;
- труднее адаптировать;
- поисковой системе сложнее использовать как основной текст страницы;
- неудобно менять;
- может быть недоступен экранным дикторам без корректного альтернативного описания.
WCAG рекомендует использовать настоящий текст везде, где нужное оформление можно реализовать средствами страницы. Исключения возможны, когда изображение текста действительно необходимо, например в логотипе. WCAG 2.2, критерий 1.4.5.
Рекламный баннер Вайтиру можно использовать как изображение-ссылку, но содержание предложения желательно продублировать обычным текстом рядом или в альтернативном описании.
Типографика на мобильном устройстве
Нельзя просто уменьшить десктопный макет.
На смартфоне меняются:
- ширина строки;
- количество строк в заголовке;
- расстояние между элементами;
- положение кнопок;
- размер изображений;
- длина страницы;
- контекст чтения.
Пользователь может смотреть сайт на ходу, при ярком освещении или на небольшом экране.
Что проверить на мобильной версии
- основной текст читается без увеличения;
- строки не прижаты к краям экрана;
- заголовок не занимает весь первый экран;
- слова не обрезаются;
- кнопки сохраняют понятную подпись;
- таблицы не ломают страницу;
- телефон и цена читаются;
- ссылки заметны;
- между разделами есть визуальные паузы;
- при увеличении текста ничего не перекрывается.
WCAG предусматривает возможность увеличить текст до 200% без потери содержания и функций. WCAG 2.2.
Адаптивный размер заголовков
Большой заголовок может хорошо выглядеть на мониторе и не помещаться на смартфоне.
Размер можно менять в зависимости от ширины экрана. Но важно сохранить иерархию: H1 должен оставаться заметнее H2, а H2 — заметнее основного текста.
Нужно проверять реальные заголовки. Короткое слово из макета не показывает, что произойдёт с фразой длиной в восемь слов.
Особенно внимательно тестируем:
- длинные названия услуг;
- заголовки статей;
- фамилии;
- числовые показатели;
- цены;
- кнопки;
- карточки товаров.
Межстрочные и межабзацные интервалы
WCAG не требует, чтобы каждый сайт по умолчанию использовал строго заданные интервалы. Требование состоит в том, чтобы пользователь мог увеличить расстояния без потери текста и функций.
При пользовательском изменении должны выдерживаться:
- высота строки не менее 1,5 размера шрифта;
- расстояние после абзаца не менее двух размеров шрифта;
- расстояние между буквами не менее 0,12 размера шрифта;
- расстояние между словами не менее 0,16 размера шрифта.
Сайт при таких настройках не должен обрезать или накладывать текст. Разъяснение W3C о настройке интервалов.
Практически это означает: нельзя помещать текст в блок с жёстко заданной высотой, если при увеличении он не сможет расшириться.
Выравнивание текста
Для русскоязычного текста чаще всего удобно выравнивание по левому краю.
При выравнивании по ширине браузер увеличивает пробелы между словами. На узкой колонке появляются визуальные «реки» из пробелов, которые мешают чтению.
Центрирование подходит для:
- короткого заголовка;
- подписи;
- небольшой цитаты;
- отдельного рекламного сообщения.
Длинные абзацы по центру читать неудобно: каждая строка начинается в новом месте.
Как типографика влияет на скорость сайта
Каждый веб-шрифт — дополнительный ресурс. Если загрузить несколько гарнитур со всеми возможными начертаниями, браузеру придётся скачать больше файлов.
Проблемы могут проявляться так:
- текст появляется с задержкой;
- сначала показывается системный шрифт, затем основной;
- после загрузки меняется длина строк;
- кнопки и блоки сдвигаются;
- ухудшается показатель CLS;
- первый экран загружается медленнее.
Google рекомендует загружать только нужные шрифты, выбирать подходящий режим font-display, использовать близкий резервный шрифт и заранее загружать действительно критичные файлы. Рекомендации web.dev по веб-шрифтам.
Что можно сделать
- не подключать неиспользуемые начертания;
- использовать современные форматы файлов;
- создавать отдельный набор символов для кириллицы при корректной настройке;
- указывать резервный системный шрифт;
- не загружать декоративный шрифт ради одного слова;
- проверить CLS после подключения;
- тестировать сайт при медленном соединении.
Красивый шрифт не должен заставлять пользователя смотреть на пустой экран.
Типографика и SEO
Поисковые системы не поднимают страницу только потому, что на ней выбран хороший шрифт. Но оформление текста влияет на факторы, связанные с удобством страницы:
- мобильное использование;
- скорость загрузки;
- логичную структуру заголовков;
- доступность;
- восприятие основного содержания;
- возможность быстро найти ответ.
Важно различать визуальный размер и HTML-семантику.
Большой текст не становится H1 автоматически. Заголовки должны быть размечены как заголовки, а не просто увеличены визуально.
На странице должен быть один основной H1, после которого логично используются H2 и H3. Не стоит выбирать уровень заголовка по тому, как он выглядит. Внешний вид задаётся стилями, а уровень отражает структуру документа.
При работе с сайтами на Tilda полезно использовать рекомендации из раздела SEO на Tilda.
Как типографика влияет на конверсию
Нельзя достоверно сказать, что замена одного шрифта увеличит продажи на определённый процент. Результат зависит от предложения, аудитории, источника трафика и всей страницы.
Но типографика может создавать конкретные препятствия:
- предложение трудно прочитать;
- цена не заметна;
- важное условие спрятано;
- кнопка теряется;
- форма выглядит сложной;
- текст вызывает недоверие;
- на смартфоне заголовок обрезается;
- ссылка не отличается от обычного текста;
- пользователь не понимает последовательность действий.
Исправление таких проблем не гарантирует продажу, но убирает помехи на пути к заявке.
На этом месте стоит поставить ссылку на статью «Как повысить конверсию на сайте: практическое руководство».
Типографика кнопок
Текст кнопки должен объяснять действие.
Понятные варианты:
- «Рассчитать стоимость»;
- «Получить консультацию»;
- «Посмотреть проекты»;
- «Скачать пример отчёта»;
- «Записаться на встречу».
Менее понятные:
- «Далее»;
- «Отправить»;
- «Подробнее»;
- «Нажмите здесь».
Иногда «Подробнее» допустимо, если из контекста карточки совершенно ясно, что откроется. Но для основного действия лучше конкретная подпись.
При оформлении кнопки проверяем:
- читаемость;
- контраст;
- длину текста;
- перенос;
- размер на смартфоне;
- состояния наведения и фокуса;
- отличие от декоративных элементов.
Типографика форм
В форме пользователь должен без догадок понимать:
- какие данные нужны;
- какие поля обязательны;
- в каком формате вводить телефон;
- почему произошла ошибка;
- что случилось после отправки.
Название поля нельзя заменять только подсказкой внутри него, если после ввода подпись исчезает. Пользователь может забыть, какие данные требовались.
Ошибку лучше писать рядом с конкретным полем:
Укажите телефон в формате +7 900 000-00-00.
Фраза «Неверное значение» не объясняет, что исправлять.
Частые ошибки типографики на сайтах
Слишком мелкий основной текст
Дизайн выглядит воздушным, но читать его неудобно.
Длинные строки на широком экране
Абзац занимает всю ширину страницы, и взгляд теряет начало следующей строки.
Низкий контраст
Серый текст сливается со светлым фоном.
Слишком много шрифтов
Каждый блок выглядит отдельным макетом.
Отсутствие иерархии
Заголовки, основной текст и подписи почти не различаются.
Заглавные буквы в длинном тексте
Большой абзац прописными буквами читается хуже и выглядит так, словно сайт кричит.
Случайные выделения
Жирным, цветом и подчёркиванием отмечены разные элементы без единой логики.
Текст поверх активного изображения
Буквы теряются на деталях фотографии.
Жёсткая высота текстового блока
При увеличении шрифта текст обрезается или накладывается на следующий элемент.
Шрифт загружается слишком долго
Пользователь видит пустое место или скачок макета.
Заголовки выбираются по размеру
H3 используется вместо H2 только потому, что выглядит меньше.
Плохая мобильная адаптация
Заголовок занимает почти весь экран, а основной текст приходится увеличивать пальцами.
Чек-лист проверки типографики
Откройте главную страницу, страницу услуги и одну длинную статью. Затем проверьте следующее.
Шрифты
- используется не больше необходимого количества гарнитур;
- у всех шрифтов есть кириллица;
- начертания выглядят единообразно;
- лицензия разрешает использование на сайте;
- не загружаются лишние файлы.
Основной текст
- читается без увеличения;
- не выглядит слишком светлым;
- строка не растянута на весь экран;
- между строками достаточно пространства;
- абзацы отделены друг от друга;
- текст выровнен предсказуемо.
Заголовки
- на странице один H1;
- H2 и H3 соблюдают структуру;
- уровни визуально различаются;
- длинные фразы помещаются на смартфоне;
- заголовки конкретно описывают содержание.
Ссылки и кнопки
- ссылка отличается от обычного текста;
- кнопка выглядит кликабельной;
- подпись объясняет действие;
- текст не переносится случайно;
- есть заметное состояние фокуса.
Мобильная версия
- ничего не обрезается;
- нет горизонтальной прокрутки;
- текст не прижат к краям;
- заголовки не перекрывают изображения;
- форма остаётся понятной;
- страницу можно увеличить без потери содержания.
Производительность
- подключены только нужные начертания;
- указан резервный шрифт;
- нет заметного скачка текста;
- первый экран не ждёт загрузки декоративного шрифта;
- проверены Core Web Vitals.
Как понять, что типографика работает
Не нужно оценивать сайт только по ощущению «красиво — некрасиво».
Проверьте реальные сценарии:
- Может ли новый посетитель за несколько секунд понять предложение?
- Находит ли он цену или способ расчёта?
- Видит ли различия между услугами?
- Понимает ли, куда нажать?
- Может ли прочитать страницу со смартфона?
- Не теряется ли важное условие в мелком тексте?
- Загружается ли текст без заметной задержки?
- Можно ли увеличить страницу без поломки блоков?
Дополнительно можно посмотреть записи визитов в Яндекс Метрике и провести короткое тестирование с людьми, которые раньше не видели сайт.
Если пользователи постоянно спрашивают информацию, которая уже есть на странице, проблема может быть не только в тексте. Возможно, нужный фрагмент плохо выделен или расположен там, где его не замечают.
Когда стоит переделывать типографику сайта
Проверка особенно нужна, если:
- дизайн создавался частями разными специалистами;
- на сайте используется много случайных размеров;
- мобильная версия появилась после десктопной;
- изменился фирменный стиль;
- добавились новые услуги;
- статьи оформляются иначе, чем основные страницы;
- посетители не доходят до важных блоков;
- после загрузки страницы элементы сдвигаются;
- текст сложно редактировать без нарушения дизайна.
При комплексной переработке сначала создают систему, а затем применяют её ко всем типам страниц. Если исправлять каждый блок отдельно, несогласованность быстро вернётся.
Как Вайтиру работает с типографикой
При разработке сайта мы рассматриваем текст как часть интерфейса.
До визуального оформления определяем:
- структуру страницы;
- порядок аргументов;
- основные заголовки;
- роли текстовых элементов;
- места целевых действий;
- особенности мобильной версии.
После этого формируем типографическую систему и проверяем её на реальном содержании. Мы не подставляем в макет только короткие демонстрационные фразы, если на готовой странице будут длинные названия услуг и подробные объяснения.
Типографика должна помогать человеку понять предложение и перейти к следующему шагу. Если оформление выглядит эффектно, но мешает читать, его нужно менять.
Подробнее о процессе можно рассказать через уже обновлённую статью «Веб-дизайн сайта: что входит в работу и как оценить результат».
