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

Рассмотрим правила оформления, которые сделают любой информационный продукт лучше.

Основные понятия в типографике

Для начала разберемся с терминами:

Шрифт — набор символов с общим дизайном. Например, Verdana или Calibri. Он может быть обычным, курсивным, жирным, полужирным.
Начертание — варианты этих символов, например, Verdana Bold или Calibri Italic.
Шрифты бывают с засечками (например, Georgia) и без засечек (например, Arial). Еще есть моноширинные (Courier New) и дисплейные шрифты (Impact).

Кегль — высота символа и пространство вокруг него, измеряется в пикселях (px) или типографских пунктах (pt).
Межстрочное расстояние (интерлиньяж) — пространство между строками.
Трекинг и кернинг — контролируют расстояние между символами: трекинг равномерно меняет это расстояние по всему тексту, а кернинг корректирует расстояние между конкретной парой символов.

Выравнивание текста

Выравнивание (выключка) влияет на общее восприятие и читаемость контента. Бывает:

По левому краю — используется в большинстве случаев. Удобно читать, так как мы читаем слева направо. Такое выравнивание привычно для глаза;
По центру — используется для заголовков, цитат или небольших объемов текста, когда есть только центральная композиция;

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

Разделите текст на абзацы

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

Следуйте принципу: один абзац — одна мысль. Разделение текста повышает читаемость, так как решает сразу три задачи:

легче усвоить смысл прочитанного;
проще воспринимать информацию;
улучшается структура текста.

Используйте не более 2 шрифтов

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

Допускается использование разных шрифтов для заголовков и основного текста. Избегайте очень контрастных или, наоборот, похожих шрифтов, которые трудно отличить друг от друга.

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

❗ Хорошие шрифты для основного текста из библиотеки шрифтов Flyvi: Open Sans, Montserrat, Rubik, Anticva, Capturanow.

Заголовки без Caps Lock

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

Оптимальный размер заголовка можно рассчитать по простой формуле: размер текста умножить на 1,6.

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

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

Располагайте текст по иерархии

Сначала главная мысль — заголовок. Затем — подзаголовок, уточнение главного. Основной текст — детали и подробности.

Располагайте текстовые элементы так, чтобы у читателя не было вопросов о том, к чему относится заголовок или текст.

Заголовок четко соотносится со своим текстовым блоком и не висит в воздухе между предыдущим и следующим блоком.

Следите за грамматикой

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

Дефис — короткая линия, которая разделяет части слов, например: кого-то, из-за, черно-белый.

Тире — знак препинания в виде длинной горизонтальной черточки:

Короткое тире («n-dash», равно ширине N) — ставится между числами, например, 2023–2024;
Длинное тире («m-dash», равно ширине M) — ставится между словами на синтаксическом уровне, разделяет части предложений. Например, век живи — век учись.

Также есть минус, среднее тире — всё это разные символы, лучше их не путать.

Учитывайте «висячие» строки и слова

«Висячая» строка (orphan) — последняя строка абзаца, состоящая из одного или нескольких слов, которая оказывается вверху столбца. «Висячее» слово (widow) — это отдельное слово или слог в конце абзаца.

Такие ситуации часто возникают при верстке длинных текстов. Это затрудняет чтение и нарушает визуальную красоту.

Попробуйте уменьшить интервал между буквами, разбить строку или изменить размер шрифта. Неразрывный пробел ставится с помощью комбинации клавиш Ctrl+Shift+Space для Windows и Option+Shift+Space для macOS.

В первом примере показано слово, оставшееся от предыдущего абзаца; второй показывает одинокое слово в конце текущего абзаца. Справа оба примера исправлены.

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

Опирайтесь на смысл и визуальную композицию текста — поступайте так, как читателю будет комфортнее потреблять информацию.

Создайте контраст с фоном

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

Подробнее о том, как правильно сочетать цвета в дизайне, читайте в нашей статье про круг Иттена, удачные комбинации цветов и полезные инструменты.

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

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

Воздух в композиции

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

Проверяйте масштаб и пропорции

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

Пять советов для верстки текста на разных устройствах:

Размер шрифта соответствует остальным элементам дизайна и не доминирует над ними;
Межстрочный интервал должен быть на 30% больше высоты самих символов;
Тестируйте контент на разных устройствах и экранах, проверяйте размеры, отступы, контрастность и расположение;

Используйте приятные глазу шрифты, например, шрифт без засечек воспринимается с экранов устройств лучше, чем с засечками;
Соберите обратную связь от коллег или друзей.

Заключение

Используйте эти правила типографики в работе и правильно доносите информацию до читателя. Помните: внимание к деталям — стремление к идеалу.

Дарим всем новым пользователям 5 дней премиум-тарифа бесплатно. Перейдите во Flyvi и попробуйте все возможности графического редактора без ограничений.