Чем хороший дизайн отличается от плохого? Конечно, можно сказать, что дизайн — это дело вкуса, и можно бесконечно спорить на эту тему. Но все-таки есть универсальные способы, как сделать любой дизайн интереснее, с помощью работы с типографикой. В этой статье речь пойдет не о том, как написать заголовки, а именно об их оформлении и дизайне.
На картинках наглядно показано, что я предлагаю вам сегодня сделать. Согласитесь, что второй вариант выглядит вкуснее, при том, что ничего кроме настроек заголовка я не трогала.
Заголовок
Почему именно заголовок? Весь текст делится на 2 вида: наборный и заголовочный, у каждого вида есть своя функция. У наборного текста только одна функция — быть читаемым, поэтому для него мы выбираем самые скучные шрифты без своего настроения и характера (Inter или Roboto), настраиваем межстрочное расстояние и межбукву, всё для того, чтобы текст можно было максимально легко прочитать. Разберём эту тему в следующих статьях [подпишись, пожалуйста]. Пока перейдем к более творческой части настройки типографики. Заголовки, в свою очередь, созданы, чтобы привлекать внимание. Как правило, заголовки короткие и крупные, поэтому переживать за их читаемость особо не приходится. Именно они становятся акцентными пятнами в дизайне, которые не перегружают его и не могут отвлечь пользователя от главного.
Как выбрать шрифт, подходящий к теме проекта, я рассказывала в статье ниже [прочитайте, пожалуйста]. Сегодня рассмотрим остальные настройки, превращающие обычный текст в часть дизайна.
Как сделать из заголовка «изюминку»?
Крупный кегль
Ничто не может так хорошо донести вашу мысль, как текст. Не бойтесь использовать крупную акцентную типографику. Сегодня заголовок для нас не просто текст, воспринимайте его как графический элемент.
Межбуквенное расстояние
Посмотрите еще раз на примеры главных экранов выше, обратите внимание, что буквы немного слиплись между собой. Как бы вы ни старались и ни искали нужный шрифт, где буквы стоят также близко друг к другу, вы ничего не найдете. Что делать? Выбирайте любой шрифт в зависимости от настроения вашего проекта и уменьшайте межбуквенное расстояние.
Заголовки любят уменьшенную межбуковку.
Если вы работаете в Фигме или Тильде, то вам может показаться, что для поля трекинга самое маленькое число — это 0. Не отчаивайтесь, введите число вручную со знаком минус, и всё получится.
Рваный край
В веб-дизайне мы не используем красную строку для основного текста, но заголовки могут быть оформлены более разнообразно. Даже такой простой прием, как неровный край, способен придать вашему дизайну уникальный стиль.
Сочетания
Сочетайте в вашем заголовке разные гарнитуры, жирности, наклоны, засечки, выделяйте целые слова или буквы и слоги. Используйте шрифтовые пары очень аккуратно, потому что не все они хорошо сочетаются между собой. Разберем тему, «Какие сочетания точно хорошо работают», в следующей статье, потому что тема достаточно обширная и интересная.
Сегодня я могу вам точно сказать следующее:
- Не сочетайте тонкие начертания с тонкими начертаниями в курсиве
- Не используйте разные кегли или размеры
- Не используйте больше 2 разновидностей настроек, создавайте только пары, не тройки, не четверки, именно пары
- Очень тонкие начертания хорошо выглядят с очень жирными
- Шрифты с засечками сочетаются со шрифтами без засечек
Если очень коротко:
- Уменьшайте межбуквенное расстояние
- Используйте красную строку
- Сочетайте и создавайте пары
Не забывайте, что крутой дизайн — это не просто про вкус, а ещё и про умение находить баланс, пробовать что-то новое и не бояться ошибок. Так что беритесь за дело прямо сейчас, и увидите, как ваши проекты заиграют новыми красками!