Основы и тренды типографики: что должен знать каждый дизайнер?

Весь текст, который мы видим на сайте играет определенную роль. Какой-то призван привлечь внимание, какой-то проинформировать нас о важном. Но то, как будет восприниматься текст, и будет ли он выполнять свои задачи во многом зависит от веб-дизайнера. Ведь именно он делает так, чтобы буквы перестали быть просто символами. Чтобы их не только читали, но и смотрели. Это и есть живая типографика.

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

Основные правила типографики

• Удобство чтения

Если говорить о длинных текстах, которые предназначены для сплошного чтения, нужно прежде всего думать будет ли удобно его читать. Текст не должен быть слишком мелким или, наоборот, слишком крупным. Пусть он будет максимально привычным для человека. При этом ещё следите за разрядкой букв, не скучковывайте их, но и не оставляйте между буквами расстояние как от Новосибирска до Копенгагена.

С заголовками ситуация обстоит несколько иначе. Здесь фантазия дизайнеров в борьбе за внимание читателей и зрителей не знает границ. Но про удобочитаемость всё же забывать не стоит.

• Выравнивание текста

Интересно, такому дизайнерскому ходу как выравнивание ВСЕГО текста по центру учат на специальных курсах типографики? Убедительно просим вас не делать этого. Все объекты страницы, в том числе надписи, должны иметь своё место. А отцентрованный текст будет создавать впечатление, будто по бокам осталось место и вы не знали, чем его занять.

• Количество имеет значение

Много не всегда значит хорошо. И в деле типографики шрифт и количество разнообразных его типов особенно значимы для проекта. Не стоит использовать слишком много разных шрифтов в одном проекте. Два-три будет вполне достаточно.

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

Для заголовков выберите один шрифт и придерживайтесь его. При необходимости можно подзаголовки сделать отдельным шрифтом.

• Заглавные буквы

Текст, который написан одними только заглавными буквами очень сложно читать. Даже если речь идёт о заголовке.

Можно выделять отдельные слова и короткие фразы, чтобы сделать на них акцент. Но не нужно печатать текст, предназначенный для длительного чтения, с постоянно включённым Caps Lock.

• Цвет текста и фона

Черно-белая классика неизменна. Это самое идеальное сочетание цвета фона и текста на нём. Но если по тем или иным причинам этот вариант вам не подходит, то будьте внимательны при выборе оттенков. Грамотное сочетание цветов – это основы стиля в типографике.

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

• Длина строк

В веб-типографике очень важна длина строк. Чтобы текст смотрелся отдельным полноценным блоком, а не размазанным по всей странице, соблюдайте в каждом абзаце оптимальную длину строк. Длина строки также влияет на удобство чтения.

Для десктопов оптимальная длина строки составляет 60 знаков, для мобильных устройств – 30-40 знаков.

Современная типографика

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

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

Так чем же готова удивлять и запоминаться новая типографика 2019?

Рукописный шрифт

Начнём с того, что популярно всегда.

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

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

Акварельный шрифт

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

Кстати, этот шрифт часто используется в сочетании с рукописным. Они смотрятся весьма гармонично.

Шрифт с засечками

Это возвращение из прошлого. Был период, когда шрифты с засечками считались трудночитаемыми.

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

Анимированный текст

Тренд, к которому типографика и вёрстка относятся по-разному. Дизайнеры любят его, потому что это смотрится эффектно и запоминается. Верстальщики относятся с некоторым сомнением, потому что анимация текста-процесс достаточно трудоемкий.

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

Комбинация больших и маленьких шрифтов

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

Но при грамотном подходе такая комбинация смотрится гармонично, позволяет расставить акценты и привлечь внимание.

Цветные шрифты

Классика, конечно, есть классика, но черно-белая типографика в этом году уступает место цветным буквам.

Смело экспериментируйте с этим стилем типографики, но помните о грамотном сочетании оттенков. Чтобы работа получилась яркой и вызывающей. Но при этом не отталкивала.

Текст с эффектом наложения

Дизайнеры знают ещё один способ выделиться с помощью нестандартной типографики. Они используют эффект наложения.

С помощью этого эффекта текст приобретает многослойность, объемность и, конечно, не может остаться без внимания. 

Чтобы зрительный эффект был максимальным, лучше использовать этот тренд при работе с большими буквами и широкоформатными изображениями.

Металлические шрифты

Приём для самых смелых, кому классика совсем уж не по душе. Шрифты с золотыми и металлическими отливами в этом году популярны и переворачивают всё представление о типографике в графическом дизайне.

Такой шрифт придаёт тексту и, соответственно, всему проекту дороговизны и эксклюзивности.

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

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

Так что выбор за вами. Показывайте, на что способна ваша фантазия и смелость.