Мы живем среди потока информации — от рекламных щитов и городских афиш до лент новостей и статей в интернете. За визуальным контентом стоят дизайнеры, но часто их работу со шрифтом зритель не замечает.
А зря — типографика важна. Еще в 1984 году в ходе эксперимента исследователи из компании Microsoft выяснили, что качественно оформленный текст читают быстрее и охотнее. Все дело в грамотно подобранном стиле, шрифте и контрасте, которые либо привлекают внимание, либо, наоборот, уводят его.
Разберемся, какую функцию имеет типографика в дизайне и как она влияет на восприятие информации.
Что такое типографика и зачем она нужна в интерфейсах
Типографика — это визуальное оформление текста с помощью шрифтов, символов и знаков. Слово пришло из греческого языка, а сама практика — из печатного дела. Сегодня типографика используется как при создании рекламных материалов, логотипов и в веб-дизайне, так и в навигации по городу.
Переломным моментом для типографии стала середина XV века, когда Иоганн Гутенберг изобрел первый печатный станок. Тогда при наборе текста использовали литеры — свинцовые буквы, установленные в наборные формы.
В XX веке типографика и верстка переехали в цифровую среду. И с тех пор набор текста стал быстрее, гибче и разнообразнее.
В современных реалиях грамотная верстка текста и подбор шрифтов во многом влияют на удержание внимания читателя и конверсию. По данным исследований, на сайтах с качественной типографикой пользователи проводят на 38% дольше.
К каждому элементу требуется особый подход. Это одно из самых важных правил расположения текста в дизайне. На заголовки обращают внимание в первую очередь, поэтому они должны выделяться контрастом размера и начертания.
Чтобы читать с экрана было комфортно, длина строки должна быть в пределах 45–70 символов. Интерлиньяж — расстояние между строками — лучше делать примерно в 1,5 раза больше размера шрифта.
При создании типографики для смартфонов размер шрифта стоит увеличивать на 2–4 пункта по сравнению с десктопной версией. Минимальный размер для комфортного чтения — 16 пикселей, а ширина колонки — 30–40 символов.
Значение шрифта для визуала и пользовательского опыта
Грамотное использование типографики в дизайне:
делает интерфейс более привлекательным и современным;
подчеркивает фирменный стиль;
позволяет быстро понять, что важно, а что второстепенно.
Функции шрифтов в графическом и веб-дизайне
Одна из основных функций шрифта — улучшение читабельности. Важно помнить, что текст должен быть удобным для пользователя. Низкий контраст между текстом и фоном, разреженные или слишком тесные буквы, неверно выбранный межстрочный интервал затрудняют восприятие.
Есть такое понятие, как семантика шрифта — способность передавать заложенные смыслы, тон и характер бренда. Например, тяжелые, массивные начертания ассоциируются с силой и надежностью. А тонкие и аккуратные — с технологичностью, легкостью и простотой. Курсив подчеркивает творческую и художественную направленность компании. Но в роли основного начертания может утомлять глаз.
Создание визуальной иерархии — еще одна важная функция шрифтов. Более крупные символы применяются для заголовков, мелкие — для основного текста. Важные слова выделяют жирным или полужирным. Курсивом можно помечать термины, цитаты и подписи. Так интерфейс будет удобным, предсказуемым и понятным.
Основы и принципы типографики в дизайне: как выбрать правильный шрифт
Говоря о значении шрифтов в дизайне, важно обращать внимание на несколько аспектов:
Читабельность. Легкость восприятия текста зависит от шрифта, кегля, контраста, расстояния между буквами и межстрочного интервала.
Заметность. Важно соблюдать правильные пропорции и подбирать цвета, сочетающиеся с графическим оформлением — иллюстрациями, фото, логотипом компании.
Выравнивание текста. В веб-дизайне преобладает выравнивание по левому краю, тогда как в журналах, информационных плакатах и книгах — по ширине. Выравнивание по правому краю или по центру, как правило, встречается в дизайне рекламных постеров и на упаковках товаров.
Большое значение имеет стиль шрифта — художественное воплощение идеи в типографике. Например, для текстов, посвященных эпохе Средневековья, уместно выбирать готические шрифты с элементами леттеринга. Их используют для визуального выделения абзацев или первых букв каждой из глав.
Классификация шрифтов в дизайне
Какие же бывают шрифты в дизайне? Рассмотрим основные категории.
Первая — без засечек. В цифровых медиа и веб-дизайне чаще всего применяются Helvetica и Arial благодаря легкости их восприятия на экране.
Первый шрифт без засечек (гротеск) был создан в 1816 году дизайнером Уильямом Кезлоном IV. Такое оформление долгие годы не пользовалось популярностью, но в середине ХХ века о нем вспомнила широкая публика. Одним из ярких представителей этой категории является Helvetica. Он был создан в 1957 году талантливым дизайнером Максом Мидингером.
Вторая категория — с засечками. К этому типу шрифтов в дизайне относятся Georgia и Times New Roman.
Третья — рукописные. Они добавляют проекту уникальности и индивидуальности. Но решая, какие шрифты использовать в дизайне, стоит проявлять осторожность. Рукописные варианты могут быть сложными для восприятия, особенно при чтении объемных текстов. Важно учитывать целевую аудиторию и контекст использования материала.
Существует и классификация шрифтов в дизайне по стилям. Модернистские шрифты Futura и Helvetica отражают «дух современности» и поэтому востребованы в корпоративном дизайне. Геометрические варианты, например, Avenir и Century Gothic, характеризуются четкостью и строгой симметрией. Отличительной чертой гуманистических символов, таких как Garamond и Gill Sans, являются естественные и мягкие линии, приятные для восприятия.
Примеры популярных гарнитур для интерфейсов
Гарнитуры рассматривают как семейство шрифтов с общими дизайн-решениями. Внутри одной гарнитуры могут быть разные стили и начертания: от тонкого до жирного, от прямого до курсивного. Среди наиболее популярных вариантов для интерфейсов — Garamond и Arial. У них есть наборы символов для разных задач: курсив, полужирный, жирный и другие.
Программы для работы со шрифтами и текстом
Программа FontLab, интерфейс которой во многом напоминает продукты Adobe, интуитивно понятна. Буквы здесь можно создавать с помощью привычных инструментов: Rectangle Tool, Pen или Ellipse Tool. FontLab позволяет экспериментировать со стилями шрифтов в графическом дизайне. Этот профессиональный инструмент работает на Windows, macOS и поддерживает все популярные векторные форматы:
Multiple Master;
TrueType;
OpenType.
Программа Calligraphr преобразует рукописные знаки в векторные символы. Предусмотрена и функция объединения букв в лигатуры.
Glyphs — еще один профессиональный инструмент для работы с типографикой в веб-дизайне. Программа поддерживает большое количество плагинов и расширений, например, Tops and Bottoms и Synced Tabs. В Glyphs можно создавать трехмерные веб-шрифты и смайлики в стиле Apple.
RoboFont, как и Glyphs, работает только на macOS. Принципиальное отличие этого сервиса в том, что он написан на языке Python. Для полноценной работы желательно разбираться в программировании. Программа имеет только базовые инструменты для прорисовки букв. Все необходимое для работы с текстом в дизайне можно добавить из библиотеки расширений.
Сервис FontStruct позволяет оперативно составлять шрифты из геометрических фигур. Это похоже на конструктор, где дизайнер выбирает формы и компонует их в новый шрифт.
Распространенные ошибки при работе с типографикой
Даже хороший дизайн легко испортить неправильным применением шрифтов. В числе наиболее популярных ошибок:
использование более 2–3 гарнитур в одном проекте — это перегружает восприятие;
неподходящие сочетания шрифтов, особенно внутри одного текстового блока;
неверно подобранный трекинг (пробелы между словами, строками или абзацами) — слишком разреженный или плотный текст портит впечатление;
чрезмерное использование декоративных шрифтов, которые лучше оставить для логотипов и постеров.
Проблемой становится и плохая читаемость: узкий межстрочный интервал, слишком маленький кегль, слабо выраженный контраст заголовка и основного текста делают контент трудным для восприятия.
Новые тенденции
Как и в любой сфере, в типографике появляются тренды. Дизайнеру важно их знать, чтобы говорить с аудиторией на одном языке и создавать актуальные проекты.
Одна из главных тенденций — возвращение к ретро. Сейчас популярны винтажные шрифты: мягкие округлые буквы в стиле 60-х или брутальные и массивные, как в 90-е. На фоне цифрового минимализма ретро добавляет индивидуальности и эмоциональности.
Другая свежая тенденция — рукописные шрифты. Люди устают от безликих визуальных решений, а рукописные символы придают дизайну «личность».
Также стоит отметить органические формы. Плавные очертания шрифтов (например, Shaking, Natural Rough, Mallong) ассоциируются с природой — волнами, песчаными барханами, изгибами веток.
Практические советы по работе с текстом в интерфейсе
В работе со шрифтом очень полезна насмотренность. Ниже — несколько полезных онлайн-ресурсов, где можно изучить работы профессионалов в области графического и веб-дизайна и найти вдохновение.
Paratype. Российская компания, успешно создающая шрифты более 20 лет, предлагает решения для разных задач. Ведет медиа о типографике и роли шрифтов в графическом дизайне.
Студия Brownfox. На сайте можно найти подробное описание каждого из шрифтов, которые были разработаны студией. Среди клиентов — образовательный проект Arzamas, «Парк Горького».
Letterhead Studio. Основана дизайнерами Валерием Голыженковым и Юрием Гордоном. В Letterhead создаются экспериментальные и классические виды шрифтов в дизайне. В портфолио — кейсы для «Аэрофлота», модных журналов и не только.
«Новая типографика» Яна Чихольда — фундаментальный труд, который будет полезен как специалистам из полиграфии, так и веб-дизайнерам.
«Основы стиля в типографике» Роберта Бринхерста — практическое руководство по структуре и выразительности текста.
«Образцы шрифтов» Яна Чихольда — глубокое исследование идеальных форм и пропорций букв.
Освоить основы типографики в дизайне можно и онлайн, например, в ProductStar на курсе «Профессия: UX/UI-дизайнер». Так вы с нуля и за 10 месяцев получите творческую IT-специальность и научитесь создавать удобные и понятные сайты. UX/UI-дизайнеры востребованы практически во всех сферах, связанных с цифровыми продуктами — от разработки мобильных приложений до игровой индустрии.
Курс ведут практикующие специалисты, а программа постоянно обновляется. Это гарантирует, что вы получите актуальные знания, которые требуются на рынке. После обучения специалисты центра карьеры ProductStar продолжают работать с выпускниками и помогают с трудоустройством.
