Типографика — важнейшая часть дизайна. При грамотном подходе она не только делает интерфейс визуально привлекательным, но и помогает эффективно донести информацию до аудитории.
Вы когда-нибудь задумывались, почему некоторые дизайны выглядят намного лучше, чем другие? Зачастую все дело в типографике. Хорошая типографика имеет решающее значение и может существенно повлиять на качество и привлекательность вашей работы.
Независимо от того, являетесь ли вы опытным дизайнером или только начинаете свой путь в этой отрасли, собранные в этой статье практические советы точно поднимут ваш дизайн на новый уровень. Давайте приступим!
1. Выбирайте качественные шрифты
Хорошие шрифты создаются опытными шрифтовыми дизайнерами. Чаще всего они включают множество стилей и начертаний, что делает их максимально универсальными. Такие шрифты проходят строгий контроль качества, благодаря чему они остаются читабельными и выглядят согласованно на различных платформах и устройствах.
Вы можете найти примеры подобных шрифтов в моих подборках:
Совет: Многие профессиональные шрифтовые студии предлагают дизайнерам бесплатные пробные версии своих шрифтов. Используйте эту возможность, чтобы поэкспериментировать с различными опциями.
2. Позаботьтесь об иерархии
Чтобы дизайн не перегружал зрителя слишком большим количеством информации, в нем должна быть четкая информационная иерархия. Основа иерархии — разные размеры, стили и цвет шрифтов. Так вы сможете направить взгляд посетителя и выделить наиболее важную информацию.
Совет: Работая над макетом, постоянно спрашивайте себя, какую информацию читатель должен получить в первую, вторую, третью очередь и т.д.
3. Используйте системы сеток
Сетки делят макет на колонки и строки, создавая систему координат для размещения контента. Они помогают выравнивать текст и изображения последовательным и упорядоченным образом.
Существуют различные виды сеток:
- манускриптная сетка,
- колоночная сетка,
- модульная сетка,
- сетка из базовых линий,
- иерархическая сетка.
Выбор сетки зависит от типа проекта. Например, манускриптная (блочная) сетка используется в основном в книгах, в то время как колоночная сетка отлично подходит для сайтов.
Совет: Потратьте немного времени и поэкспериментируйте с разными сетками, чтобы понять, какая из них лучше всего подходит для вашего проекта.
4. Не смешивайте слишком много текстовых стилей
Когда дело доходит до типографики, мы должны следовать принципу “чем меньше, тем лучше”. Если вы используете слишком много разных шрифтов, ваш дизайн может быстро стать беспорядочным и непрофессиональным. "Не более трех" — хорошее проверенное временем правило, которое следует держать в голове.
Совет: Слишком похожие шрифты плохо сочетаются друг с другом. Попытайтесь создать контраст. Пример — комбинация шрифта с засечками и шрифта без засечек или сочетание разных начертаний (жирное + тонкое).
5. Используйте контраст
Контраст можно создать за счет размера, цвета, формы элементов. Контрасты помогают выстроить четкую информационную иерархию и направляют взгляд пользователя.
Совет: Действительно, контраст можно создать не только с помощью типографики, но и с помощью других элементов дизайна, таких как формы, изображения и цвета.
6. Не пренебрегайте негативным пространством
Новички часто совершают ошибку, пытаясь избавиться от негативного пространства. Но вам не обязательно заполнять каждый сантиметр интерфейса текстом или изображениями!
Негативное пространство — это пространство вокруг элементов дизайна. При грамотном подходе оно делает дизайн сбалансированным и помогает привлечь внимание аудитории к важным элементам.
Совет: Постарайтесь убрать из макета все элементы, которые не помогают донести до пользователей послание бренда и не играют какой-либо существенной роли.
7. Отрегулируйте межстрочное расстояние
Интерлиньяж или межстрочный интервал — вертикальное расстояние между строками. Эта характеристика имеет решающее значение, когда речь идет о разборчивости и читабельности текста. Здесь важно найти баланс — межстрочное расстояние должно быть не слишком узким и не слишком свободным.
Межстрочный интервал зависит от таких факторов, как тип шрифта, его размер и длина строки. В длинных строках он, как правило, больше, чем в коротких, а в заголовках — меньше, чем в основном тексте.
Совет: Хорошая отправная точка — межстрочное расстояние, в 1,2-1,5 раза превышающее размер шрифта.
8. Обращайте внимание на кернинг
Кернинг — настройка расстояния между отдельными буквами для улучшения внешнего вида и читабельности текста. Он играет особенно важную роль при разработке логотипов и оформлении заголовков.
Хороший кернинг делает типографику сбалансированной и гармоничной, в то время как плохой кернинг может стать причиной “дыр” в тексте, которые отвлекают посетителей от чтения.
Совет: Если вы хотите попрактиковаться в настройке кернинга, обратите внимание на эту игру.
9. Используйте функции и глифы OpenType
Шрифты OpenType (OTF) — незаменимый помощник в работе с типографикой. Они предлагают множество функций, таких как лигатуры, альтернативные глифы и маленькие прописные буквы.
Например, лигатуры — это комбинации двух или более букв, которые органично соединяются друг с другом, создавая новые привлекательные формы.
Совет: Чтобы открыть панель функций и глифов OpenType в Illustrator, перейдите в раздел "Окно" и выберите "Текст > OpenType" или "Текст > Глифы" (Window — Type — OpenType / Glyphs).
10. Используйте правильную пунктуацию
Четкая и понятная пунктуация — важный аспект успешной типографики. Она помогает избежать путаницы и эффективно донести до людей ваше сообщение. Убедитесь, что вы используете знаки препинания — запятые, дефисы, тире и т.д. — правильно.
Вот краткий список знаков препинания, с которыми чаще всего возникают трудности:
- Используйте дефис (-) для соединения двух или более слов в одно и для переносов.
- Используйте короткое тире (–) для обозначения диапазонов чисел.
- Используйте длинное тире (—) для обозначения пауз, выделения дополнительной информации вместо скобок / запятых, указания маршрутов, а также между подлежащим и сказуемым.
- Используйте точки (·) в качестве маркеров для разделения элементов списка.
- Используйте правильные кавычки (« ») для выделения прямой речи, цитат, названий, а также слов или фраз, которые имеют непривычное значение.
- Используйте многоточие (...), чтобы указать на пропущенные слова или обозначить неоконченные мысли.
- Используйте правильные символы, например, ½ вместо 1/2.
Заключение
Типографика играет в дизайне важнейшую роль. Следуйте этим десяти советам, и вы сами увидите, как ваши проекты меняются в лучшую сторону 🖤.
