Типографика — это всё, что касается оформления текста в дизайне: шрифты, размер, цвет и начертание букв. Главная цель — объединить визуальную и текстовую составляющую в единое целое. Раньше типографику применяли для оформления книг, буклетов, вывесок, афиш. Теперь её используют во всех сферах дизайна: от графического до веб-дизайна. Знание правил типографики — одно из ключевых для дизайнеров, верстальщиков, креативных специалистов и арт-директоров. Давайте немного углубимся в то, почему на типографику обращают внимание. Текст

Базовые принципы типографики 

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

Вот базовые принципы типографики:

Использовать не более трёх шрифтов

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

Придерживаться единой размерной сетки в шрифтовом оформлении

Это правило касается и кегля, и интерлиньяжа, и кернинга. В рамках одного текста допустимо варьировать в пределах 1 pt. Если же нет, он будет выглядеть неоднородным и сложным для восприятия.

Соблюдать оптимальную длину строки

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

Разбивать текст на блоки и абзацы

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

Выставлять интерлиньяж больше, чем кегль

Расстояние между строками должно быть в полтора раза больше, чем буквы. Например, для 14-го кегля интерлиньяж лучше выставить в 21 pt. Так текст будет выглядеть цельным и собранным, при этом буквы будут достаточно легко читаемы.

Выбирать шрифт в соответствии с общим дизайном и концепцией

Если это сайт для технологичного продукта или онлайн-сервиса, не стоит набирать текст при помощи Times New Roman или Book Antiqua. Здесь подойдут лаконичные шрифты без засечек.

Не злоупотреблять акцентами

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

Располагать текст равномерно по всей полосе

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

Элементы типографики и ее влияние

• Шрифт — это набор символов одного размера, ширины, а также стиля. Например, если использовать в документе Arial 11 размера — это будет шрифт. Шрифт бывает четырех основных видов: c засечками, без засечек, рукописный и декоративный.
• Интерлиньяж — это пространство между строками.
• Кернинг — пространство между двумя отдельными символами или буквами.
• Трекинг относится к общему межбуквенному интервалу всего слова или фрагмента текста.
• Цвет
• Иерархия — это порядок, в котором следует читать разные фрагменты текста на странице или экране. Иерархия отделяет текст, который нужно заметить и прочитать в первую очередь, от менее важного, который можно прочитать в последнюю очередь. Можно использовать разные элементы для создания иерархии текста: размер, цвет, контраст и расположение или выравнивание.  Большой размер шрифта для заголовка и подзаголовков побуждает прочитать их в первую очередь и определить, стоит ли читать статью дальше или нет.
• Консистенция. Важно, чтобы дизайн многостраничного сайта оставался единым от одной страницы к другой или от одного слайда к другому. Использование одинаковых цветов фона и текста помогает читателям связать различные разделы, в то время как страница или презентация с разными элементами, цветами и оформлением будут выглядеть беспорядочно: читателю будет казаться, что это разные куски текста с разной смысловой нагрузкой.

Характеристики шрифтового оформления текста

• Удобочитаемость: насколько легко воспринимается текст, хорошо ли различимы буквы и другие символы, можно ли быстро прочитать текст «по диагонали». За это отвечают шрифт, кегль, расстояние между буквами и строками, контраст.
• Заметность: насколько хорошо различим текст на фоне страницы, привлекает ли внимание и не теряется ли на фоне других визуальных элементов даже при слабом освещении. В этом также помогут шрифт и контраст, а ещё — размер букв, полужирное начертание, цвет и другие акценты. При этом важно соблюдать пропорции и подбирать цветовые сочетания в соответствии с фоном и другой графикой: фото, рисунками, логотипами. Иногда выделяют не весь текст, а отдельный, самый важный фрагмент.
• Выравнивание: расположение текста относительно сторон страницы — по левому или правому краю, по центру или по ширине. В типографике веб-дизайна чаще всего используют выравнивание по левому краю: в большинстве языков текст читают слева направо, поэтому такое выравнивание интуитивно привычно и понятно. Выравнивание по ширине используют в книгах, информационных постерах, а также в СМИ, где текст разбит на колонки. Гораздо реже встречается выравнивание по центру или правому краю. Как правило, такое шрифтовое оформление бывает в рекламных баннерах, постерах или на упаковке, где это оправданно с точки зрения композиции и дизайна.
• Стиль: идея и её визуальное воплощение в типографике. Например, для текста, который посвящён средневековой культуре, можно выбрать готический шрифт для первых букв каждой главы или абзаца.
• Контраст: то, за счёт чего текст выделяется на фоне и в сравнении с другой графикой, — например цвет или полужирное начертание.

Заключение

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