Текст присутствует повсюду. Вы встретите письменные фрагменты даже в продуктах, ориентированных на визуальный контент, которые не содержат длинных описаний или статей. Поэтому типографика является важным элементом дизайна.
Как и в любой другой области, в типографике существует множество терминов, незнакомых людям, не связанным с дизайном (а иногда даже и самим дизайнерам!). Чтобы говорить на одном языке с вашими дизайнерами и копирайтерами, необходимо понимать разницу между гарнитурой и шрифтом, а также не путать заголовок с основным текстом.
Типографика
Типографика выполняет двойную функцию в дизайне. Во-первых, она отвечает за визуальную эстетику — как выглядит и ощущается текст, какую атмосферу он создаёт. Во-вторых, она играет функциональную роль — обеспечивает удобочитаемость и разборчивость текста. Хорошая типографика помогает пользователям легко воспринимать и понимать контент. Она задаёт тон и темп, влияя на взаимодействие с продуктом. В этом контексте дизайнеры внимательно продумывают:
- Гарнитуры
- Размер шрифта (Кегль)
- Длину строки
- Межстрочный интервал (Интерлиньяж)
- Межбуквенный интервал (Трекинг)
- Кернинг
Цель состоит в том, чтобы использовать эти элементы гармонично, создавая текст, который не только привлекателен внешне, но и удобен для восприятия.
Гарнитура (typeface)
Гарнитура — это семейство шрифтов. Каждая гарнитура включает в себя уникальные символы, объединённые единым дизайном: буквы, цифры, знаки препинания и специальные символы. Гарнитуру не следует путать со шрифтом, поскольку шрифты — это вариации гарнитуры.
Например, вы можете выбрать гарнитуру Roboto в качестве основной для проекта, но при этом использовать различные шрифты, такие как Roboto Regular 12 pt и Roboto Bold 9 pt.
Шрифт (font)
Шрифт (font) — это конкретный вариант внутри семейства гарнитуры, отличающийся такими характеристиками, как размер, насыщенность (жирность), наклон и курсив. Например, Helvetica — это гарнитура, а Helvetica Bold 12 pt и Helvetica Light 14 pt — её шрифты.
Вне профессионального круга дизайнеров термины «шрифт» и «гарнитура» часто употребляют как синонимы. Однако в типографике эти понятия различаются. Гарнитура определяет общий дизайн буквенных форм, а шрифт представляет собой конкретное воплощение этого дизайна.
Размер шрифта (font size)
Размер шрифта или кегль — это высота шрифта. Прежде чем подробно объяснить этот параметр, разберём несколько терминов, связанных с типографикой.
Верхний выносной элемент (ascender) — это вертикальный штрих строчной буквы (например, б, b, d, f, h, k, l, t), который выходит за пределы высоты строчных букв (x-height).
Нижний выносной элемент (descender) — это часть строчной буквы, опускающаяся ниже базовой линии (baseline).
Кегль измеряется как расстояние от верхнего края верхнего выносного элемента до нижнего края нижнего выносного элемента. Обычно дизайнеры измеряют кегль в пунктах (например, 8 pt, 10 pt, 12 pt), где 1 пункт равен 1/72 дюйма или 0,35 мм.измеряют размер шрифта в пунктах (8, 10, 12 и так далее), где 1 пункт равен 1/72 дюйма или 0,35 мм.
Насыщенность шрифта (font weight)
Насыщенность шрифта определяет толщину штрихов в конкретной гарнитуре. Она может варьироваться от тонкой (иногда называемой hairline или light) до максимально плотной, такой как black или bold. Выбор насыщенности играет важную роль в передаче акцентов, настроения и удобочитаемости текста. Хотя наиболее распространённые варианты — обычный (regular) и жирный (bold), многие гарнитуры предлагают широкий диапазон насыщенности, давая дизайнерам гибкость в создании сбалансированного и привлекательного интерфейса.
Основной текст (body text)
Основной текст, также называемый основным контентом (body copy), — это ключевой текст в печатных и цифровых материалах. Он содержит основную информацию, отличаясь от элементов, таких как заголовки, сноски или подписи. Будь то веб-страница или печатный журнал, основной текст — это то, что вовлекает пользователя в материал.
Дизайнеры тщательно прорабатывают этот текст, чтобы он был не только удобочитаемым, но и разборчивым, обеспечивая комфортное восприятие информации.
Совет! Минимальный кегль для основного текста на страницах с большим объёмом текста — 12 pt (или 16px).
Заголовки (heading)
Заголовок играет роль ориентировочного маркера в тексте, помогая пользователям ориентироваться в его структуре. В типографике он является важным элементом, создающим иерархию, что упрощает сканирование и понимание контента. Обычно заголовки заметно крупнее основного текста, а их размер и стиль могут варьироваться в зависимости от уровня важности.
Будь то сайт или журнал, заголовки дают представление о содержании разделов, облегчая навигацию и восприятие информации.
Совет! Для выделения заголовков можно использовать не только размер, но и насыщенность и стиль.
Текстовый блок
Текстовый блок — это группа текстовых элементов, таких как абзацы или цитаты, организованных вместе для формирования визуально цельного элемента. Обычно такое объединение имеет прямоугольную форму, отсюда и термин «блок». В контексте низкодетализированного прототипирования (low-fidelity wireframing) текстовые блоки используются в качестве заполнителей, часто содержащих фиктивный текст.
Такие заглушки помогают дизайнерам представить пространственные взаимоотношения между текстовыми элементами, упрощая принятие решений о макете и организации контента. Эффективное использование текстовых блоков позволяет создавать более удобочитаемые и привлекательные интерфейсы для пользователей.
Рыба текст (Lorem Ipsum)
Lorem Ipsum — это заполнитель или фиктивный текст, используемый в дизайне при создании контента. Изначально он происходит из Finibus bonorum et malorum — произведения римского государственного деятеля и философа Цицерона. Однако оригинальный латинский текст был изменён и теперь представляет собой бессмысленный и некорректный вариант латинского языка.
Как правило, Lorem Ipsum — это временное решение, используемое до замены на реальный текст. Такой фиктивный текст полезен на самых ранних этапах прототипирования, при начальном планировании и разработке концепций.
Микротекст (microcopy)
Микротекст — это небольшие фрагменты текста, которые направляют пользователей при взаимодействии с продуктом и помогают им достигать целей. Примеры микротекста включают:
- Уведомления
- Сообщения об ошибках
- Надписи на кнопках
- Элементы меню
- Заполнители в полях ввода в формах
Микротекст играет ключевую роль в навигации, вовлечении пользователей и объяснении функционала продукта. Он формирует значительную часть пользовательского опыта..