Типографика: какие задачи в дизайне решает

В 1984 году исследователи из Microsoft и MIT провели эксперимент и выяснили, что хорошо оформленный текст люди читают охотнее и быстрее. Так работает типографика в дизайне: правильно подобранные шрифт, цвет и контраст «цепляют» внимание и лучше доносят мысль.

Так выглядели две версии текста, которые предложили участникам эксперимента в 1984 году: с «хорошей» (слева) и «плохой» (справа) типографикой

Типографика — это всё, что касается оформления текста в дизайне: шрифты, размер, цвет и начертание букв. Главная цель — объединить визуальную и текстовую составляющую в единое целое. Раньше типографику применяли для оформления книг, буклетов, вывесок, афиш. Теперь её используют во всех сферах дизайна: от графического до веб-дизайна. Знание правил типографики — одно из ключевых для дизайнеров, верстальщиков, креативных специалистов и арт-директоров.

Уникальный способ начертания букв, цифр и символов: по форме, пропорциям, расстоянию между элементами.

Так выглядит один из самых популярных шрифтов конца 90-х — Times New Roman: строгий, классический:с засечками и тщательно выверенной симметрией

А это — Comic Sans: неформальный, без засечек и как будто написанный небрежным почерком.

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

Так выглядит текст, набранный Yandex Sans

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

Шрифт Arial

Сам Arial, к слову, был создан в 80-х по заказу компании Microsoft для ОС Windows. Это быстро сделало его одним из самых популярных и узнаваемых шрифтов.

Группа шрифтов, которые объединены одной стилистикой, например Courier или Georgia.

Шрифт Courier

Шрифт Georgia

Есть две основные группы гарнитур:

1. С засечками — например Times (см. выше) или Antiqua. Эти шрифты используют, когда хотят придать тексту более весомый и официальный тон: в книгах, новостных изданиях или объявлениях в общественных местах.

Шрифт Antiqua

2. Без засечек — такие как Arial (см. выше) или Calibri. Такие шрифты часто используют на веб-сайтах, в онлайн-сервисах и приложениях: они облегчают восприятие текста на разных носителях, помогают передать практичность и современность.

Шрифт Calibri

Высота букв шрифта, которую измеряют в pt (punkt, точка). 1 pt равен 1/72 дюйма, или 0,352 мм. Самый популярный размер, которым обычно набирают тексты для объявлений и веб-документы, — это 12-й кегль. Такой текст удобно читать с небольшого расстояния. Эта статья как раз написана 12-м кеглем.

Расстояние между строками, которое также измеряется в типографских пунктах. Оптимальный интерлиньяж — это кегль + ⅕. Например, для текста, набранного 12-м кеглем, расстояние между строк обычно выставляют в 16 pt.

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

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

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

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

Это графическое изображение графемы в конкретном шрифте.

Разные глифы для буквы «А» в гарнитуре Zapfino

Строчные — или маленькие — буквы стандартного размера, которыми набирают основную часть текста.

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

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

Так выглядят прописные и строчные буквы, а также капитель.

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

Всё пространство, занятое текстом и изображениями. В случае с книгами и СМИ это вся страница, за исключением полей.

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

● Удобочитаемость: насколько легко воспринимается текст, хорошо ли различимы буквы и другие символы, можно ли быстро прочитать текст «по диагонали». За это отвечают шрифт, кегль, расстояние между буквами и строками, контраст.

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

На сайте Apple все элементы хорошо заметны, при этом в центре внимания — новая модель смартфона

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

Текст на странице сайта «Бюро Горбунова» размещён в несколько колонок с выравниванием справа. Это упорядочивает разрозненные фрагменты текста и задаёт направление взгляду, позволяя бегло ухватить суть

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

Сайт МХТ им. А. П. Чехова выполнен в стилистике модерна 1910-х, включая фирменный шрифт и визуальные элементы. Все афиши и другие графические материалы театра оформлены так же

● Контраст: то, за счёт чего текст выделяется на фоне и в сравнении с другой графикой, — например цвет или полужирное начертание.

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

Вот базовые принципы типографики:

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

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

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

● Соблюдать оптимальную длину строки. Лучше, если она будет не длиннее 600 pt — иначе будет сложно сфокусироваться и дочитать текст до конца. Слишком короткие строки тоже нежелательны, если только это не список или плакат со слоганами и призывами к действию.

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

● Выставлять интерлиньяж больше, чем кегль. Расстояние между строками должно быть в полтора раза больше, чем буквы. Например, для 14-го кегля интерлиньяж лучше выставить в 21 pt. Так текст будет выглядеть цельным и собранным, при этом буквы будут достаточно легко читаемы.

● Выбирать шрифт в соответствии с общим дизайном и концепцией. Если это сайт для технологичного продукта или онлайн-сервиса, не стоит набирать текст при помощи Times New Roman или Book Antiqua. Здесь подойдут лаконичные шрифты без засечек.

● Не злоупотреблять акцентами. Даже если нужно сделать акцент и привлечь особое внимание к тексту, набирать его заглавными буквами или слишком большим кеглем — не лучшая идея: это придаёт излишне эмоциональное звучание, вызывает отторжение и беспокойство.

Сейчас не так просто найти примеры визуально перегруженных сайтов, но ещё в начале двухтысячных многие веб-страницы выглядели примерно так

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

Ян Чихольд, «Новая типографика».
Руководство для современного дизайнера: фундаментальный труд по типографике, который создавался как пособие для оформления печатных текстов, но актуален и для веб-дизайна.

Джеймс Феличи, «Типографика: шрифт, вёрстка, дизайн».
Руководство по типографике в современном графическом и веб-дизайне, которое не ограничивается шрифтами и размерами в тексте.

Роберт Брингхёрст, «Основы стиля в типографике».
Всё о том, как структурировать текст, придавать ему выразительность и гармоничность.

Эмиль Рудер, «Типографика. Руководство по оформлению».
Глубокий анализ того, как устроено оформление текста и каким правилам нужно следовать в первую очередь.

Эрик Шпикерман, «О шрифте».
Для тех, кто хочет изучить особенности разных шрифтов, их применение и сочетания.

Ян Чихольд, «Образцы шрифтов».
Исследование о том, как устроены шрифты, идеальные формы и пропорции букв.

Владимир Ефимов, «Великие шрифты».
Ещё один полезный справочник по типографике, где основное внимание уделяется кириллическим шрифтам.

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