Содержание

Что такое типографика и зачем она нужна

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


Основные термины

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

Шрифт

Графическое изображение букв, объединенных едиными пропорциями и стилем. Шрифт содержит не только буквы и цифры, но и знаки пунктуации и диакритики, математические символы и обозначения валют.

Кегль

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

Элементы кегля в шрифте

Выключка

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

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

Межстрочный интервал (интерлиньяж)

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

При определении интервала очень важно учесть характер выбранного шрифта, размер выносных элементов, длину строки, объем текста и кегль. Четкого правила не существует, ведь при разных шрифтах блоки текста будут выглядеть по-разному. Обычно интерлиньяж выставляется на 15–25% больше размера текста.

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

Размер интерлиньяжа текста

Кернинг

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

`Интервал (кернинг и трекинг) между буквами

Трекинг

Увеличивая или уменьшая трекинг, можно регулировать интервал сразу между всеми символами. Этот параметр используется для достижения оптимального баланса между читабельностью и эстетикой.

Пример трекинга

Спецсимволы

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

Список спецсимволов

Начертание

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

Гарнитура шрифта

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

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

Это объединение нескольких гарнитур одного шрифта. Они могут различаться по пропорциям или ширине знаков.

Суперсемейство

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

Суперсемейство Lucida

Классификация шрифтов

Антиква

Характеризуется наличием засечек на концах буквенных элементов.

Шрифт Times New Roman как пример антиквы

Гротеск

Эти шрифты отличаются отсутствием засечек на концах букв.

Шрифт Arial как пример гротеска

Полусериф

Шрифт, сочетающий признаки антиквы и гротеска с умеренным количеством засечек.

Шрифт Georgia как пример полусерифа

Брусковый

Шрифт с широкими засечками и толстыми линиями, напоминающими бруски.

Шрифт Impact как пример брускового шрифта

Рукописный

Шрифт, который имитирует письмо от руки и персонализирует текст.

Шрифт Brush Script как пример рукописного шрифта

Акцидентный

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

Шрифт Pacifico как пример декоративного шрифта

Леттеринг: что это такое, зачем он нужен и как на этом заработать
Открываем мир леттеринга: узнаете, почему он становится неотъемлемой частью современной визуальной культуры
Читайте далее

Как и зачем сочетать разные шрифты

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

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

💥
Арт-директор журнала «Театр» Наташа Агапова отобрала для школьного телеграм-канала о графическом дизайне пять шрифтовых пар из своей практики.

Чтобы правильно сочетать шрифты, стоит учесть несколько принципов.

Разграничьте функции шрифтов, используя один для заголовков, а другой для основного текста.

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

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

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

Совет от куратора курса «Графический дизайнер Plus» и шрифтового дизайнера Феди Аброськина.


Анатомия типографики

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

Анатомия типографики

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

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

Высота букв

Расстояние от базовой линии до верхнего края буквы, причем у строчных и прописных букв высоты разные. Высоту строчных букв измеряют по строчной букве «х», так как у нее нет выносных элементов.

Линии верхних и нижних выносных элементов

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

Межбуквенный просвет

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


Стили в графическом дизайне: подборка из 25 стилей с описанием
Понятие стиля, его суть и как он стал неотъемлемой частью визуального языка современного графического дизайна
Читайте далее

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

Ниже приведем главные правила, которые необходимо соблюдать, работая с типографикой.

  1. Помните об аудитории и целях коммуникации. Если вы работаете с книгой или статьей, то выбирайте текстовые шрифты, а если с рекламным плакатом бренда-бунтаря, то вам нужен броский и «неправильный» шрифт.
  2. Комбинируйте разные шрифты — и похожие, и контрастные, — чтобы понять, какого ощущения вы хотите добиться от проекта.
  3. Выбирайте размер, который обеспечит максимальную читабельность с учетом дистанции от глаз зрителя до текста.
  4. Избегайте висячих предлогов и союзов.

Как улучшить типографику на сайте

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

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

Как использовать шрифт и не нарушать авторские права

Для соблюдения авторских прав и легального использования шрифтов советуем помнить о следующих правилах.

Как использовать шрифт без нарушения авторских прав
Примеры лицензий на сайте fa-fa-fa.xyz
  1. Внимательно читайте лицензию, предоставленную автором или владельцем прав. Этот документ определяет правила работы со шрифтом, включая коммерческое и некоммерческое использование и распространение.
  2. Лицензия на шрифт — гарантия того, что вы используете его легально. Бесплатный шрифт тоже должен иметь лицензию или описание с правилами использования. Если вы не находите никакую информацию о шрифте, лучше не брать его в работу, даже если речь о студенческом проекте.
  3. Некоторые лицензии могут содержать ограничения по числу проектов, количеству пользователей или типу использования. Для веб-проектов может понадобиться своя лицензия.
  4. Изменение дизайна шрифта может требовать отдельного разрешения.
  5. Указывайте авторство шрифта и делитесь активными ссылками на автора, если того требуют правила, или просто в благодарность за пользование.

Тренды в типографике

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

  • Лекции о дизайне Insights Design Lecture Series, подготовленные Центром искусств Уокера в Миннесоте (Walker Art Center), — помимо лекций со знаменитыми творческими единицами, у музея есть блог о дизайне Gradient и свой ютуб-канал.

  • Премии немецкого фонда «Искусство книги» (Stiftung Buchkunst): The Best German Book Design, Sponsorship Prize for Young Book Design и Best Book Design from all over the World. Сборник эссе и писем Луи Альтюссера «Об искусстве», оформленный Наташей Агаповой и выпущенный издательством V-A-C Press, вошел в шорт-лист третьего конкурса в 2020 году.

  • Немецкий издательский дом Spector Books. Издает книги об искусстве и дизайне и, по словам Наташи, является образцом «передового контента и прогрессивного дизайна».

✨ Подборка курсов по графическому дизайну ✨

Поделиться