Что такое типографика: основные понятия и правила

Знание основ типографики пригодится всем, кто работает с текстом. Начинающим дизайнерам, редакторам, копирайтерам, SMM-специалистам важно знать, что такое типографика, какие ошибки нужно не допускать при верстке и как красиво иллюстрировать текст.

Тенденции типографики постоянно меняются, но есть основные правила, которым нужно следовать. Делимся полезными советами от дизайнеров, которые умеют из текстового полотна создать запоминающийся проект. Нажимайте на заголовок, чтобы сразу перейти к нужному разделу статьи.

1. Типографика — это…
2. Шрифты и базовые понятия типографики
3. Верстка текста: основные правила типографики
4. Иллюстрирование текста: важные рекомендации
5. Полезные ресурсы для изучения типографики

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

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

После прочтения этой статьи вы сможете делать структурированные лонгриды, плакаты для мероприятий и красивые картинки с текстом для социальных сетей.

Типографику можно назвать мастерством и даже философией в зависимости от вашего отношения к ней. Мы не будем погружаться в глубины типографики как искусства, но поможем вам разобраться с азами.

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

1. Что такое гарнитура, актиква и гротеск

Группа шрифтов называется «гарнитурой», а шрифт — это отдельное начертание (обычное, курсивное, полужирное, жирное). Самые известные гарнитуры — это Arial, Helvetica, Futura, Roboto и другие. То есть правильнее говорить не «шрифт Arial», а «гарнитура Arial», если речь идет о шрифте, то это, например, Arial Italic. Но привычнее называть гарнитуры и начертания просто шрифтами.

Все шрифты делятся на виды: актиква (шрифты с засечками, serif), гротески (без засечек, san serif) и декоративные. Посмотрите на три готовых шаблона Canva для соцсетей! На первом шаблоне использовали шрифт с засечками Quincy, на втором — без засечек Montserrat, на третьем выбрали рукописный Caveat.

Все шаблоны Canva в наших статьях можно редактировать, нажимайте «Использовать этот шаблон». Для изменения шрифта в редакторе Canva выделите текст, и в разделе со шрифтами выберите нужный.

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

2. Как выбрать лучшее сочетание шрифтов

Запомните важное правило типографики — не больше двух-трех шрифтов в одном макете. Если вы решили сочетать шрифты разных гарнитур, то выбирайте классическое сочетание — шрифты с засечками в заголовке (Georgia, Merriweather) и шрифты без засечек в основном тексте (Open Sans, Roboto, Verdana).

Рекомендуем прочитать наши статьи: «Как выбрать шрифт с засечками? 12 необычных вариантов» и «Кириллические шрифты: 101 бесплатный вариант».

Обычно в макете достаточно использовать начертания из одной гарнитуры шрифтов. На первом изображении шрифт Сlear Sans с начертанием Bold, на втором — Regular с курсивом, а на третьем Thin. Посмотрите, как они отличаются друг от друга, но вместе смотрятся гармонично.

В процессе работы вы быстро запомните названия начертаний. Сохраните этот список для будущих дизайнов.

• Thin – тонкий
• Regular – обычный
• Italic – курсив
• SemiBold – полужирный
• Bold – жирный
• Bold Italic – жирный курсив
• ExtraBold – экстражирный

Из начертаний для заголовков лучше подходят SemiBold, Bold, ExtraBold, для подзаголовков — Italic, для основного текста — Thin и Regular.

3. Как подобрать кегль (размер шрифта) для заголовка и основного текста

В типографике размер заголовка должен быть больше, чем размер основного текста. Есть специальная формула расчета — кегль текста * 1,6 = кегль заголовка. Например, если вы выбрали размер текста 16, умножьте его на 1,6, и вы получите идеальный размер заголовка. 1,6 — это «божественная пропорция», золотое сечение.

Крупным кеглем рекомендуем оформлять наиболее важную информацию, средним — подробное описание, а мелким — заметки и комментарии. Переносите фокус на важное!

4. Как вычислить идеальный интерлиньяж

Интер­ли­ньяж — это межстрочное расстояние, которое зависит от размера шрифта и длины строки.

«Чем длин­нее стро­ка по коли­че­ству слов, тем боль­ше дол­жен быть интер­ли­ньяж. И наобо­рот, слиш­ком узкая колон­ка из корот­ких строк урод­ли­во смот­рит­ся даже со стан­дарт­ным интер­ли­нья­жем. В таком слу­чае интер­ли­ньяж допус­ка­ет­ся немно­го уменьшить» — совет из «Бюро Горбунова».

Обычно интерлиньяж составляет 120-125% (1,2 — 1,25 в Canva) от используемого размера шрифта. Например, вы выбрали кегль 16. Рассчитать значение можно по классической формуле: (16 * 120) : 100=19,2. То есть рекомендуемый интерлиньяж — 19-20.

5. Как следовать правилу близости

В основе этого дизайнерского правила принцип близости из гештальт-психологии — расположенные рядом объекты воспринимаются вместе. Подробно о теории близости рассказывает Артемий Лебедев.

Если коротко, то суть вашего дизайна в том, чтобы пользователь с легкостью его «читал». Ему должно быть ясно, к какой части текста относится конкретный заголовок. Интер­ли­ньяж снизу заголовка должен быть меньше, чем сверху, чтобы заголовок не висел в воздухе, а относился к конкретному абзацу.

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

Не забывайте об этом принципе при создании дизайнов! Для изменения интер­ли­ньяжа в редакторе Canva выделите текст, выберите «Интервалы» — «Высота строки».

По-другому это правило выглядит так — внутреннее расстояние всегда должно быть меньше внешнего. Это касается букв, строк, абзацев, колонок. Например, внутреннее расстояние буквы должно быть меньше пространства соседних букв. Иначе слово будет выглядеть «слипшимся». Итак, запоминайте следующие правила.

• Расстояние между буквами меньше, чем между словами.
• Расстояние между словами меньше, чем между строками.
• Расстояние между строками меньше, чем между абзацами.
• Расстояние между заголовком и последующим текстом меньше, чем расстояние между концом этого текста и следующим заголовком.

6. Почему не стоит изменять кернинг

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

Но если хочется поэкспериментировать, делайте это осторожно, не нарушайте правило близости. Обязательно прочитайте нашу статью «Кернинг: полная инструкция по применению». Чтобы изменить межбуквенный интервал в Canva, нужно выделить текст, а затем выбрать нужное значение в разделе «Интервалы» — «Письмо».

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

7. Как подбирать цвет текста

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

С основными понятиями типографики разобрались, переходим к практике. Верстка — это оформление текста, списков, расположения блоков.

8. Создайте визуальную иерархию

Типографская иерархия — это порядок в расположении заголовков и основного текста. Когда вы впервые приступаете к работе с полотном текста, важно его структурировать. Для этого нужно определить, главный заголовок (h1) и подзаголовки (h2, h3, h4 и далее).

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

9. Следите за количеством символов в строке

В строке должно быть не больше 45–65 знаков для латиницы и 45–75 для кириллицы. Конечно, не всегда нужно строго следовать указанному количеству знаков. Главное, чтобы взгляд читателя легко воспринимал строку от начала и до конца.

Иногда лучше еще сильнее уменьшить строку и сделать вместо одной широкой колонки несколько узких по 30–35 знаков. Так глазам будет удобнее воспринимать текст, повысится скорость ознакомления с материалом. Особенно важно, если это статья или брошюра!

10. Лучше использовать выравнивание по левому краю

Текст с выравниванием по центру, по правому краю и ширине сложнее читать. Для выравнивания текста в Canva выделите текст, нажмите на иконку «Выравнивание» и выберите подходящий вариант.

11. Правильно оформляйте списки

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

Списки бывают маркированными и немаркированными (нумерованными). Для маркировки списков можно использовать различные графические символы.

Если предложение перед списком заканчивается двоеточием, то перечисление элементов нужно начинать со срочных букв. В конце каждой строки поставить точку с запятой (;), а последний пункт завершить точкой. Такой список — одно логически законченное предложение.

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

12. Избегайте «вдов» и «сирот»

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

13. Разберитесь с тире и дефисом

Главная проблема большинства начинающих дизайнеров — использование только дефиса. Хотя во многих случаях стоит выбирать тире! Тире больше дефиса, используется между членами предложений, для выделения прямой речи, для указания маршрутов (дуб — дерево, Владивосток — Москва и т. д.). А дефис подходит для разделения в словах (например, что-либо, пошли-ка, во-первых, бизнес-леди, стоп-лосс, COVID-19, точь-в-точь).

Если проще, то тире (длинная черта) используется в пределах предложения, а дефис (короткая черта) в пределах слова. Еще есть короткое тире, оно ставится без пробелов между числами (3–4 часа).

• Длинное тире на Windows: удерживайте Alt+0151, среднее: Alt+0150.
• Длинное тире на MacOS: Option+Shift+-, среднее: Option+-.

14. Используйте правильные кавычки

Кавычки — еще одна боль дизайнеров и редакторов. В русском языке принято использовать французские кавычки-елочки «». Используйте их всегда! Поставить их можно с помощью комбинации на Windows Alt+0171 и Alt+0187, на MacOS — Option+Shift+= левая кавычка, а правая — Option+ =.

Иногда внутри цитаты есть слова, которые тоже нужно заключить в кавычки. Например, ЗАО «Издательский дом „Империя“». В таких случаях не стоит бояться двойных кавычек, внутри цитаты используйте кавычки-лапки „“.

15. Как сделать неразрывный пробел

Неразрывный пробел поможет избежать разрыва строк для удобочитаемости. Примеры: и т. д., г. Омск, А. М. Седин, 1990 г., 50 кг. В подобных случаях для чтения очень некомфортно, когда часть сокращения остается на одной строчки, а остальное автоматически переносится на другую. Обычно поставить неразрывный пробел можно с помощью комбинации клавиш на Windows Ctrl+Shift+пробел, на MacOS Option+Shift+пробел.

Если не хочется расставлять все эти пробелы в процессе верстки, рекомендуем использовать «Типограф» А. Лебедева, он расставит все нужные неразрывные пробелы автоматически.

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

По словам Артема Горбунова, «иллюстра­ция — самый замет­ный якор­ный объ­ект», то есть привлекающий внимание пользователей. Якорными считаются еще заголовки, списки, но именно картинки забирают на себя большую часть внимания. Поэтому с визуальными элементами важно хорошо поработать!

В этом разделе рассмотрим основы иллюстрирования текста: где искать картинки, как их располагать и какие правила применять.

16. Используйте картинки, чтобы передать эмоцию

Изображения в тексте должны иллюстрировать текст, передавать главную мысль, настроение, эмоцию. Не стоит добавлять картинки ради того, чтобы просто были. Читатель только долго будет пытаться понять, к чему это изображение, зачем оно здесь. Это мешает восприятию информации.

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

Вы можете брать изображения для своих дизайнов из редактора Canva или других фотостоков. Рекомендуем узнать об этом больше в нашей статье «42 необычных сайта со стоковыми фото и бесплатными картинками».

17. Для выбора расположения объекта следуйте правилам композиции

Композиция — это гармоничное сочетание объектов дизайна между собой. Со временем насмотренность поможет выбирать лучшие места для объектов. Важно использовать правило золотого сечения.

Как применять формулу? Например, если вы решили сделать прямоугольный дизайн, выберите любой размер квадрата, умножьте его сторону на 1,618. Теперь у вас идеальный прямоугольник со вписанным квадратом и новым прямоугольником. Применяйте формулу золотого сечения по отношению к этому прямоугольнику и так до тех пор, пока не останутся самые маленькие квадраты. Теперь проведите дуги от одного угла к другому в каждом квадрате, получится одна большая спираль.

Можно не мучиться с расчетами, а наложить эту спираль на свой прямоугольный дизайн, чтобы определить расположение объектов. Используйте этот прием в дизайне! Еще рекомендуем прочитать нашу статью «Золотое сечение в дизайне и жизни».

18. Применяйте правило третей

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

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

19. Используйте гифки и видео для наглядости

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

В редакторе Canva вы можете использовать анимированные стикеры в своих дизайнах в разделе «Элементы» — «Стикеры» или попробовать сделать гифку из статичных изображений. Для этого рекомендуем прочитать нашу статью «Стоп-моушен: руководство по созданию видео и стильных коллажей».

Вы можете загружать свои видеозаписи в редактор Canva для создания интересных дизайнов.

20. Схемы, диаграммы, инфографика для отчетов и гайдов

Используйте схемы и инфографики, чтобы показать структуру или принцип работы чего-либо. Схему можно сделать в редакторе Canva или использовать готовые интеллект-карты, инфографику, диаграммы. Главное, чтобы было понятно вашим читателям, какую информацию до них вы стараетесь донести.

21. Основные линии иллюстрации должны рифмоваться с начертанием текста

Секрет хорошей типографики — сочетание плавных линий текста и изображения. Посмотрите на замечательный пример Игоря Штанга, в статье «Подружить текст с картинкой» дизайнер рассказывает о важности «рифмовки» линий изображения и штрихов надписи.

22. Цвета текста должны сочетаться с оттенками изображения

Обязательно следуйте этому правилу, чтобы ваш дизайн получился гармоничным. На шаблоне Canva для истории Инстаграм цвет шрифта выбран из палитры оттенков картинок. В редакторе Canva посмотрите «Цвета с фото» и выберите лучший вариант.

23. Блоки текста могут продолжать линии иллюстраций

Еще один прием от дизайнера Игоря Штанга. Прочертите мысленно основные линии изображения и продолжите их блоком текста. Таким образом вы создадите гармонию между иллюстрацией и текстом.

24. Если решили наложить текст на изображение, слегка затемните фон

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

25. Используйте плашки для наложения текста

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

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

26. Вырезайте объекты и сочетайте с надписями

В редакторе Canva Pro есть возможно вырезать объект — эффект называется Background Remover. С этой функцией можно располагать надписи позади объекта. В бесплатной версии Canva вы можете использовать уже вырезанные объекты, найти их можно в разделе «Фото» по запросу Сut out и Png. Если хотите сделать интересную типографику, поиграйте с расположением объектов и надписей.

27. Попробуйте использовать текстуры

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

28. Используйте контраст в типографике

Используйте контраст, чтобы акцентировать внимание читателей на определенных визуальных элементах. Этот прием подходит для любых дизайнов, но особенно для плакатов и афиш. На шаблоне Canva весь фокус с фонового изображения на контрастный шрифт.

29. Не перегружайте текст иллюстрациями

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

30. Не бойтесь оставлять пустое пространство

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

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

Посмотрите дизайн карточек с рецептами от Serafini Creative, рамка белого пространства вокруг графических элементов делает дизайн интереснее.

31. Обязательно указывайте источники

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

Если вы решили взять изображение из «Google Картинки», то используйте фильтр. Нажмите «Права использования», выберите лицензию Creative Commons, но все равно указывайте источник и автора, чтобы не было претензий.

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

• Если вы часто верстаете текст, купите настольный «Справочник издателя и автора» Аркадия Мильчина и Людмилы Чельцовой. В нем вы найдете все правила русской типографики, наконец разберетесь с кавычками, тире и не только.
• Скачайте книгу Александры Корольковой «Живая типографика», сейчас она находится в открытом доступе по желанию автора.
• Оформите платную подписку на учебник «Типографика и верстка» издательства «Бюро Горбунова» — практическое руководство по типографике и верстке с акцентом на макетировании для экрана.
• Читайте блог Игоря Штанга о типографике, тексте и дизайне.
• Смотрите вдохновляющие примеры! На сайте Fontsinuse много замечательных примеров комбинаций шрифтов на плакатах и афишах.
• Читайте журнал о шрифте и типографике, языке и времени, людях и визуальных традициях «Шрифт».

• Если вам понравился шрифт на каком-то сайте, используйте расширение WhatFont для Chrome или для Safari, чтобы узнать его название.

Теперь вы знаете, что такое типографика, каким базовым правилам стоит следовать, чтобы начать свой профессиональный путь в дизайне. Но нет предела совершенству! Продолжайте развиваться и экспериментировать с дизайном в Canva.

Подписывайтесь на обновления в Телеграме⁠(открывается в новой вкладке или окне), ВКонтакте⁠(открывается в новой вкладке или окне) и Яндекс Дзене⁠(открывается в новой вкладке или окне), чтобы всегда быть в курсе трендов графического дизайна и возможностей Canva, которые помогут воплотить их в жизнь!