Основы типографики в дизайне: базовые термины и принципы текстового набора

slanted.de

Что такое типографика

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

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

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

Книга, разработанная Алисой Касеновой на программе «Графический дизайн. Продвинутый курс»

Семейство шрифтов

Семейство шрифтов — это группа шрифтов, объединенных общим визуальным характером и едиными принципами построения знаков. Внутри одного семейства могут существовать разные шрифты и их варианты. Например, TT Commons Pro, Helvetica Neue или PT Pragmatica Next представляют собой семейства шрифтов, включающие несколько шрифтов для разных задач и сценариев использования. Использование одного семейства помогает сохранить визуальное единство проекта и выстроить последовательную типографическую систему.

typetype.ru

Шрифт

Шрифт — это набор букв, цифр и других символов с определенным графическим рисунком. Например, в семействе Pragmatica Next есть шрифт Pragmatica Next Compressed. В нем уже можно выбрать начертание, допустим, очень светлое (Extralight). Иногда такое разнообразие в рисунках букв и начертаний в семействах шрифтов называют системой начертаний.

paratype.ru

Шрифты принято разделять на различные классы, каждый из которых обладает собственным характером и особенностями применения:

• антиква 
• гротеск 
• брусковый 
• ленточный

contrastfoundry.ru

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

Начертание

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

• светлое 
• обычное 
• полужирное 
• жирное 
• сверхжирное 
• а также наклонное

contrastfoundry.ru

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

Айдентика для кино-лагеря. Проект Дари Ерофеевой, выпускницы программы «Графический дизайн. Продвинутый курс»

Кегль

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

Интерлиньяж

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

Кернинг

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

Трекинг — это изменение расстояния между всеми символами одновременно. С его помощью текст можно сделать более плотным или более разреженным. Чаще всего трекинг используют при работе с заголовками, подписями и акцидентным набором.

Базовая линия

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

Контраст шрифта

Контраст показывает разницу между тонкими и толстыми штрихами букв.

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

Базовые рекомендации при работе с наборным текстом

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

Дизайн книги. Проект Дарьи Коренченко, выпускницы программы «Графический дизайн. Продвинутый курс»

#01 Не используйте слишком много шрифтов

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

Зин Дарьи Колесниковой, выпускницы программы «Графический дизайн. Продвинутый курс»

#02 Подбирайте шрифты осознанно

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

Дизайн книги. Проект Владислава Голохвастова, выпускника программы «Графический дизайн. Продвинутый курс»

#03 Следите за длиной строки

slanted.de

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

Для веб-интерфейсов оптимальной считается длина около 50–70 символов с пробелами. На мобильных устройствах ориентир меньше — 30–40 символов.

#04 Следите за интерлиньяжем

Расстояние между строками влияет на читаемость не меньше, чем размер шрифта. Интерлиньяж должен обеспечивать достаточное разделение строк, сохраняя при этом целостность абзаца.

#05 Выстраивайте визуальную иерархию

slanted.de

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

#06 Используйте выравнивание осмысленно

slanted.de

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

#07 Сохраняйте единый стиль

slanted.de

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