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

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

Цель типографики:

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

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

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

• Антиква — шрифты с засечками, которые имитируют форму пера при письме, например, Times New Roman. Первые шрифты с засечками появились еще в Древнем Риме.
• Гротеск — шрифты без засечек, с простыми геометрическими формами букв, например, Arial. Гротески стали популярны в XIX веке благодаря развитию промышленной печати.
• Брусковый шрифт — шрифты с засечками, но более массивными и рублеными, чем у антиквы, например, Rockwell. Брусковые шрифты часто используются для создания заголовков и рекламных объявлений.
• Рукописный шрифт — шрифты, имитирующие ручное письмо, например, Brush Script MT. Они могут быть как формальными, так и неформальными, и используются в самых разных областях дизайна: логотипы, реклама, упаковка, печатные материалы.
• Акцидентный шрифт — Декоративный шрифт, которые используются для привлечения внимания, например, Lobster. Акцидентные шрифты не всегда подходят для чтения больших объемов текста.

Что такое суперсемейства

Источник изображения: Adobe.com

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

Примеры суперсемейств:

• Roboto: включает в себя sans-serif, serif, slab serif, condensed и другие варианты
• Open Sans: sans-serif, serif, condensed
• Inter: sans-serif, mono, display
• Lora: serif, slab serif, display
• Playfair Display: serif, script, display

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

Источник изображения: Pablo Jordán Vilches | Behance

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

Основные правила:

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

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

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

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

Не перегружайте: не используйте слишком много разных шрифтов в одном проекте. Как правило, достаточно использовать 2-3 шрифта.

Цвет в типографике

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

При работе с цветом в типографике важно учитывать несколько основных принципов:

1. Контраст: используйте цвета, которые контрастируют друг с другом, чтобы текст был читаемым.
2. Гармония: используйте цвета, которые хорошо сочетаются друг с другом.
3. Цветовая схема: выберите цветовую схему, которая соответствует вашему дизайну.
4. Читаемость: убедитесь, что текст легко читается на выбранном вами фоне.
5. Акцент: используйте цвет, чтобы выделить важные элементы текста.
6. Психология цвета: учитывайте психологическое влияние цвета при выборе цветовой схемы.

Размеры шрифтов

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

При выборе размера шрифта важно учитывать несколько факторов:

Целевая аудитория

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

Носитель

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

Функция текста

Заголовки должны быть больше, чем основной текст.

Длина текста

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

Сочетание шрифтов

Учитывайте размеры шрифтов при их сочетании. Существует несколько методов расстановки размеров шрифтов:

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

Рекомендуемые размеров шрифтов в веб-дизайне:

• Заголовки: H1: 24-30pt, H2: 18-24pt, H3: 16-20pt
• Основной текст: 14-18pt
• Подзаголовки: 16-20pt
• Меню: 12-16pt
• Примечания: 10-12pt
• Мобильные устройства: 16-18pt (основной текст)

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

Источник изображения: freepik | freepik

Интерлиньяж

Интерлиньяж (от фр. interligne, букв. «написанное между строк») – это расстояние между базовыми линиями соседних строк текста. В типографике интерлиньяж один из важнейших инструментов, влияющий на: читаемость, восприятие информации, эстетику текста. Итерлиньяж измеряется в пунктах (1 пункт = 1/72 дюйма) и в процентах (относительно размера шрифта).

Трекинг

Трекинг (от англ. tracking) – это равномерное изменение расстояния между буквами (межбуквенных пробелов) в тексте. Он применяется для улучшения читаемости текста: слишком плотный трекинг делает текст трудным для восприятия. Также он применяется для создания различных визуальных эффектов: выделение важных слов или фраз и создание ощущения движения или динамики.

Кернинг

Кернинг (от англ. kerning) – это избирательное изменение расстояния между буквами в тексте. Он применяется для улучшения читаемости текста: слишком плотный кернинг может сделать текст слишком плотным и трудным для восприятия. Также кернинг применяется для создания различных визуальных эффектов: выделение важных слов или фраз, создание ощущения движения или динамики, придание тексту более гармоничного и профессионального вида.