Правила типографики
при верстке:

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

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

ЧТО ТАКОЕ ТИПОГРАФИКА?
Типографика — это искусство оформления текста, от его набора до верстки. Без верстки не получить классный результат. Кропотливый процесс выбора шрифтов, вычисления интерлиньяжа, кернинга, расположения текста называется его версткой.

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

ПЕРВАЯ ГЛАВА

Шрифты, основные понятия

Типографику можно назвать мастерством. Данная статья поможет овладеть азами этого тонкого искусства

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


1. Гарнитуры и виды шрифтов

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

Все шрифты делятся на виды: актиква (шрифты с засечками), гротески (без засечек) и акцедентные или по другому декоративные, применяемые приемущественно в заголовках.

2. Как не прогадать с комбинацией шрифтов

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

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

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

3. Подбираем кегль для заголовка и основного текста

Помимо варьирования начертаний не забывайте использовать разный кегль (размер).

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

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

4. Разбираемся с кернингом

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

Типы букв:

По характеру, буквы условно делятся на пять подвидов:
· прямоугольные — с вертикальными элементами (И, М);
· округлые (О, Ф);
· полуокруглые — с прямыми элементами с одной стороны и закругленными с другой (В, Ю);
· полуоткрытые— с одной открытой стороной (Г, Е, С);
· открытые (Ж, Т).

Если слово состоит только из букв с вертикальными элементами, то механическая расстановка с равными расстояниями даст вполне удовлетворительный результат:
bureau.ru
Но как только в игру вступают более сложные формы в дело вступает кернинг. Тут следует уравнивать площади между буквами.

Изучим метод «по тройкам». Общие правила просты: наибольшее расстояние окажется между прямоугольными буквами. Несколько меньшее расстояние требуется, если буква с прямолинейными элементами граничит c буквой округлой формы. Ещё меньшее расстояние требуется между двумя круглыми буквами. И ещё меньшее — с буквами, имеющими открытые формы.

Метод расстановки тройками:

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

5. Идеальны интерлиньяж

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

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

Обычно интерлиньяж составляет 120-125% от используемого размера шрифта. Рассчитать значение можно по классической формуле: (кегль * 120) : 100= рекомендуемый интерлиньяж.

6. Теория близости

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

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

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

Из этого правила вытикают такие аксиомы как:

Расстояние между буквами меньше, чем между словами.
Расстояние между словами меньше, чем между строками.
Расстояние между строками меньше, чем между абзацами.
Расстояние между заголовком и последующим текстом меньше, чем расстояние между концом этого текста и следующим заголовком.
§ 136. Теория близости. Ководство. Артемий Лебедев

7. Цвет текста

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

ВТОРАЯ ГЛАВА

Верстка текста

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

8. Следуйте иерархии

Типографская иерархия — это порядок в расположении заголовков и основного текста. Текст важно структурировать. Для этого нужно определить, основной текст, главный заголовок и подзаголовки.

Читатель должен суметь легко и быстро изучить информацию с первого взгляда.
vk.com
9. Следите за длинной строки

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

Чтобы решить эту проблему, отредактируйте кернинг, перенесите строку или измените размер шрифта.
designpub.ru
11. Используйте выравнивание по левому краю

Стандартно принято выравнивать текст по левому краю или по всей ширине, например, вспомните текст в книгах, поэтому старайтесь использовать данное выравнивание. Так людям привычнее. Текст с выравниванием по центру, по правому краю и ширине сложнее читать.
Александр Маслак, Санкт-Петербург
Jess Bailey Designs
12. Правильно оформляйте списки

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

Списки бывают маркированными, с использованием графических символов, и нумерованными.
Александр Маслак, Санкт-Петербург
deadsign.ru
13. Не забывайте о тире!

Начинающие дизайнеры используют только дефис – это очень грубая ошибка. Тире длиннее дефиса и используется на месте отсутствующего члена предложения, между подлежащим и сказуемым, для обозначения пауз, для выделения прямой речи («У меня распустилась розочка! – радостно сказал садовник.), для указания маршрутов (Новосибирск — Москва). А дефис подходит для разделения в слова (физ-ра, ковер-самолет, по-русски, кто-то и т.д.).

И так, запоминаем:

1) Длинное тире на Windows: удерживайте Alt+0151, среднее: Alt+0150 (проверьте, включен ли num lk и используйте цифры справа на клавиатуре);
2) Длинное тире на MacOS: Option+Shift+-, среднее: Option+-.
Александр Маслак, Санкт-Петербург
primavista.ru
14. Каждому случаю и языку свои кавычки

В русском языке принято использовать французские кавычки-елочки «». Поставить их можно с помощью комбинаций:

1) Windows Alt+0171 и Alt+0187 (проверьте, включен ли num lk и используйте цифры справа на клавиатуре);
2) На MacOS — Option+Shift+= левая кавычка, а правая — Option+ =.

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

1) Windows Alt+0132 и Alt+0147 (проверьте, включен ли num lk и используйте цифры справа на клавиатуре);
2) На MacOS — Option+Shift+/ левая кавычка, а правая — Option+/.
Александр Маслак, Санкт-Петербург
§ 104. Кавычки. Ководство. Артемий Лебедев
15. Как сделать неразрывный пробел

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

1) на Windows Ctrl+Shift+пробел;
2) на MacOS Option+Shift+пробел.

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

ТРЕТЬЯ ГЛАВА

Иллюстрации и текст

Картинки являются не менее значимыми чем совестная составляющая, что может вводить в ступор начинающего дизайнера: «На чем сделать акцент?», «Как гармонично совместить графику и текстовый блок?». Даем вам ответы на эти вопросы и несколько полезных советов, используя которые все пойдет как по маслу!

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

Секрет хорошей типографики — сочетание плавных линий текста и изображения. Ищите взаимосвязи, мысленно продолжайте основное направление иллюстрации и ее элементов для дальнейшего понимания где расположить текст, а также какой шрифт выбрать.
Александр Маслак, Санкт-Петербург
Татьяна Теуш, Минск
17. Для выбора расположения объекта следуйте правилам «золотого сечения»

Композиция — это гармоничное сочетание объектов дизайна между собой. Используйте спираль «золотого сечения», чтобы грамотно расположить объекты.
Александр Маслак, Санкт-Петербург
Uprock
18. Цвета текста должны сочетаться с оттенками изображения

Еще один способ сделать ваш дизайн гармоничным.
Александр Маслак, Санкт-Петербург
Дарья Веденкина, Новосибирск
19. Если решили наложить текст на изображение, используйте подложку или плашки

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

Uniconsulting и Wildberries

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

Продолжайте и повторяйте направление, заданное иллюстрациями, блоками с текстом.
Александр Маслак, Санкт-Петербург
Александр Маслак, Санкт-Петербург
21. Оставляйте пустое пространство

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

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

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

Дарья Веденкина
Дизайнер
dvdnkna@mail.ru
Новосибирск, Россия