Главные правила типографики в дизайне

Катя Плющева Катя Плющева
April 26, 2024
Главные правила типографики в дизайне

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

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

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

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

  • Шрифт — набор символов с общим дизайном. Например, Verdana или Calibri. Он может быть обычным, курсивным, жирным, полужирным.

  • Начертание — варианты этих символов, например, Verdana Bold или Calibri Italic.

  • Шрифты бывают с засечками (например, Georgia) и без засечек (например, Arial). Еще есть моноширинные (Courier New) и дисплейные шрифты (Impact).

  • Кегль — высота символа и пространство вокруг него, измеряется в пикселях (px) или типографских пунктах (pt).

  • Межстрочное расстояние (интерлиньяж) — пространство между строками.

  • Трекинг и кернинг — контролируют расстояние между символами: трекинг равномерно меняет это расстояние по всему тексту, а кернинг корректирует расстояние между конкретной парой символов.

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

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

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

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

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

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

 

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

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

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

  • легче усвоить смысл прочитанного;

  • проще воспринимать информацию;

  • улучшается структура текста.

Используйте не более 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Размер шрифта соответствует остальным элементам дизайна и не доминирует над ними;

  2. Межстрочный интервал должен быть на 30% больше высоты самих символов;

  3. Тестируйте контент на разных устройствах и экранах, проверяйте размеры, отступы, контрастность и расположение;

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

  2. Соберите обратную связь от коллег или друзей.  

Заключение

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

 

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

Поделиться:

Рекомендуемые статьи

Обучение Как самостоятельно сделать визитку онлайн
Rакие бывают визитки, как их создать самостоятельно — пошагово демонстрируем процесс. Онлайн, бесплатно и своими руками — рассказываем.
Jun 19, 2024
Как самостоятельно сделать визитку онлайн
Обучение Психология цвета в дизайне. Как передать настроение через цвет
Рассказываем о психологии цвета, как это отражается в дизайне. И как цвета могут влиять на восприятие брендов.
Jun 3, 2024
Психология цвета в дизайне. Как передать настроение через цвет
Обучение Какие бывают цветовые профили. Как перевести RGB в HEX или CMYK
Для начинающего дизайнера или человека, незнакомого с работой с цветом, аббревиатуры типа RGB и CMYK могут показаться пугающими. На самом деле всё не так сложно, как кажется на первый взгляд.
May 27, 2024
Какие бывают цветовые профили. Как перевести RGB в HEX или CMYK