freepik.com
Что такое типографика в графическом дизайне
Типографика — это одновременно и техника, и искусство оформления текста как одного из графических элементов любого макета — книги, плаката, экрана приложения. Техника — поскольку существуют стандарты выбора параметров шрифта и верстки, искусство — потому что типографика управляет пространством, структурой, ритмом, а также гармонией текстовых и графических элементов.
В графическом дизайне типографика включает выбор шрифтов и параметров верстки, их интеграцию с другими графическими элементами, а также помогает адаптировать оформление под разные платформы.
Для опытного графического дизайнера типографика текстов — фундаментальная основа для формирования восприятия информации и тона визуальной коммуникации, который соответствует контексту, бизнес-целям компании и ожиданиям аудитории.
Основные термины в типографике
Рассказываем подробнее, что такое типографика, и разбираемся с основными терминами.
Гарнитура (Typeface)
Гарнитура — это семейство шрифтов, объединенных общим дизайном. У них единый рисунок основных и выносных элементов, конструктивные особенности и пропорции. Например, Helvetica или Times New Roman.
Внутри гарнитуры могут быть разные начертания — Light, Thin, Thin Italic, Normal, Medium, Bold, Extra Bold. Минимально гарнитура наборных шрифтов обычно содержит три базовых начертания: нормальное, жирное и курсив (Normal, Bold, Italic). Декоративные и рукописные шрифты могут содержать только одно начертание. Выбор гарнитуры влияет на общий тон и стилистику проекта — от традиционности до минимализма.
Для сохранения целостности в оформлении вы можете базировать дизайн на одном семействе шрифтов.
Шрифт (Font)
Шрифт — это конкретное начертание в пределах одной гарнитуры. Если гарнитура — это семья, то шрифт — один из ее членов. Например, Helvetica Bold или Roboto Black.
Пример шрифтов семейства Roboto
С засечками и без засечек (Serif и Sans-serif) — это основная классификация шрифтов. Помимо шрифтов с засечками и без выделяют еще рукописные и декоративные. Шрифты без засечек также называют рублеными.
Засечки — короткие штрихи, перпендикулярные основным линиям буквы. В зависимости от дизайна шрифта они могут быть разными по форме. У шрифта без засечек основные линии заканчиваются без штрихов.
Пример шрифта с засечками и без
Традиционно считается, что книжная полоса набора выглядит более цельно, если она сверстана шрифтом с засечками. Шрифт без засечек лучше масштабируется — мелкий текст на экране смартфона будет читаться легче.
Кегль (Point Size)
Кегль — это высота кегельной площадки типографской литеры для ручного (металлического) набора высокого способа печати, на которой располагаются буквы. Высота кегельной площадки отличается от высоты самого символа. В современной компьютерной верстке — это высота прямоугольника, в который должны вписаться все буквы — от минимальной «о» до высоких прописных «Щ» или «Й». Правильный выбор кегля определяет читаемость текста на разных носителях. Разные шрифты одного и того же кегля могут различаться по размеру.
Пример текста, набранного 12-м кеглем, но разными шрифтами: Montserrat, Verdana, Times New Roman, Roboto Serif Extra Light и Courier New
Базовая линия (Baseline)
Базовая линия — это невидимая линия, на которой выравниваются символы. Вниз за базовую линию спускаются нижние выносные элементы.
Пример подсветки базовой линии в Figma / figma.com
Интерлиньяж (Leading)
Интерлиньяж — это расстояние между базовыми линиями строк. Увеличение межстрочного интервала делает текст более воздушным, а уменьшение — более плотным. Есть пределы, за которые выходить не рекомендуется. Чтобы не нарушить целостность верстки, не стоит выходить за 150% от высоты кегля. Интерлиньяж менее 100% сделает текст трудночитаемым.
Пример интерлиньяжа — цитата из сборника статей Яна Чихольда «Облик книги»
Особенно важно правильно выбрать интерлиньяж для мобильных экранов, так как короткие строки легко рассыплется визуально:
Пример одного текста на экране смартфона: интерлиньяж 200, 150 и 115%
Кернинг (Kerning)
Кернинг — это индивидуальная настройка расстояния между парами букв для достижения гармоничного визуального восприятия. Например, буквы «A» и «V» часто требуют уменьшения пространства между ними: «AV». Современные шрифты имеют качественный кернинг.
Трекинг (Tracking)
Трекинг — это интервал между всеми символами в тексте. Его часто используют для выделения в тексте (разрядка) либо для небольшого увеличения плотности строки.
Пример использования трекинга в одном шрифте
Высота строчных букв (x-height)
Высота строчных букв — это высота символов без учета выносных элементов, например высота «о» или «п». Обычно это высота буквы «х» в шрифте, на высоту которой проще всего ориентироваться, отсюда и произошло само название. Чем выше x-height, тем крупнее будет шрифт в одном и том же кегле.
Выносные элементы (Ascender и Descender)
Ascender — это элемент буквы, выходящий выше x-height (например, «б» и «й»). Descender — элемент, уходящий ниже базовой линии (например, «щ» и «р»).
Контраст шрифта (Stroke Contrast)
Контраст — разница между толстыми и тонкими линиями в конструкции буквы.
Пример контраста в шрифте. Более контрастный — Luminari, почти без контраста — American Typewriter
Эти параметры — высота строчных букв, длина выносных элементов и контраст — влияют на общий облик текста. Строки могут выглядеть равномерными и монотонными либо более воздушными или контрастными.
Лигатуры (Ligatures)
Лигатуры — это соединенные символы, созданные для улучшения эстетики. Например, сочетания «fi» или «fl» часто объединяются в одну связку — это новый знак в шрифте.
Пример шрифта с лигатурой и без
Это наследие свинцового набора — так экономили место в строке. В кириллических шрифтах лигатуры используются редко, а вот в тексте на английском языке они будут выглядеть изящно. Сейчас лигатуры есть не во всех шрифтах.
Основы типографики: важные правила
Основные правила типографики, которые актуальны сейчас, задавались для бумажной верстки. Веб-верстка имеет свои ограничения. Например, не каждый браузер поддерживает некоторые шрифты. Главные цели дизайнера при выборе типографики — обеспечить читаемость текста, гармонию страницы или экрана и решение задачи самого визуала.
Не больше трех шрифтов на сайт
Если нужно создать лендинг или дизайн для мобильного приложения, достаточно двух, максимум трех шрифтов: для основного текста, заголовков и визуальных акцентов. Для небольшого баннера достаточно одного шрифта. Обилие шрифтов добавит визуальный мусор и разрушит гармоничность решения.
Сочетаемость
Шрифты в типографике одного проекта объединяют стилистически: они должны быть либо схожими, либо, наоборот, контрастными. Можно использовать контраст формы, например рубленый шрифт для заголовка (Calibri, Noto, Helvetica) и с засечками для основного текста (Georgia, Times New Roman).
Чтобы найти подходящее шрифтовое сочетание, можно использовать одну гарнитуру. Например, у одного из гельветических шрифтов Gill Sans — девять начертаний, которые позволят сделать и основной текст, и курсивные цитаты, и заголовки:
Пример шрифтов семейства Gill Sans
Для привлечения внимания зрителя иногда уместно поставить рядом максимально несочетаемые элементы. Такой прием часто используют в работе с печатной продукцией или на первом экране лендинга — шрифтовое выделение заголовка или УТП может быть существенно крупнее остального текста или очень жирным шрифтом. Очень крупный текст может быть самостоятельным элементом дизайна страницы.
Пример резкого контраста размеров и начертаний одного шрифта / britishdesign.ru
Еще один способ создать контраст — цвет шрифта. Например, выделение заголовков или врезки другим цветом. При этом обычно не рекомендуется сочетать акцидентный цвет и шрифтовое выделение в одном элементе дизайна.
Оптимальная длина строки
Длина строки влияет на восприятие текста. Слишком длинные строки на всю ширину экрана рассеивают внимание аудитории. Оптимальная длина строки для веб-сайтов — 50–70 символов с пробелами. Для смартфонов лучше ориентироваться на 30–40 знаков. У разных устройств и браузеров разный размер экрана — важно всегда проверять, как выглядит текст на итоговой верстке.
Если вы проектируете UX/UI-дизайн для мобильных приложений, обратите внимание на размер шрифта. Дизайнеры советуют брать для основного текста 16px, для заголовков — 26—28px. При этом заголовки не должны занимать больше двух, максимум трех строк.
Интерлиньяж в пределах 110–130%. Слишком большой интерлиньяж сделает блок текста дробным, он визуально рассыплется. Слишком плотно сжатые строки ухудшают читаемость текста.
С помощью отступов между абзацами (отступ, paragraph spacing) так же можно отбить расстояние между заголовком и предыдущим абзацем либо в целом сделать текст более просторным.
Выравнивание строк. В веб-верстке, скорее всего, не будут отрабатывать переносы, поэтому красивое выравнивание на всю ширину колонки (justify) может выглядеть не слишком читаемо. Можно использовать выключку влево либо по центру. В книжно-журнальной верстке переносы обычно есть, и колонки можно сделать визуально цельными.
Пример выравнивания текста в Google Docs без использования знака переноса
Единый стиль верстки. В одном проекте оптимально сохранять общие настройки шрифтов — самой гарнитуры, размера, интерлиньяжа, цветов. Удобнее всего собрать мини-гайдлайн с библиотекой стилей для каждого проекта.
На программе «Графический дизайн. Продвинутый курс» вы овладеете диджитал и крафтовыми инструментами современного графического дизайна, научитесь мыслить вне шаблонов и стереотипов, узнаете, как строить и оформлять отношения с клиентом. Изучите, что такое фирменный стиль и как разработать дизайн для книг и упаковки, разберетесь в типографике и специализированном ПО. Для поступления нужно подать заявку на сайте, подготовить портфолио и пройти очное собеседование с куратором. По окончании программы вы получите диплом о дополнительном образовании установленного образца.
