Одна маленькая деталь может сильно поменять сайт и то, как его воспринимает пользователь. Шрифт может передавать настроение, идею и даже смысл слов. Как это работает – читайте в новом материале.
Почему компании и дизайнеры платят за оригинальные шрифты деньги, если есть много бесплатных? Очевидно, что не только ради того, чтобы отличаться от других, хотя и не без этого. Дело в том, что формы и линии воздействуют на наш мозг напрямую, вызывая определенные неосознанные ассоциации. Так некоторые буквы нам кажутся “добрыми”, а некоторые “смешными”. Вы видите слово, читаете его, но оттенок его настроения передает форма символов.
Возьмем текст детской сказки тех же Братьев Гримм. Напишем ее приятным округлым шрифтом – крупным, детским. Все нормально. Но если применить острые углы и мрачную эстетику, то милое произведение сразу станет жутким. А если вчитаться в изначальный смысл, то можно снимать хоррор без правок в сценарии.
Шрифт кажется незначительным только тем, кто вовсе не связан с типографикой. Кроме банальной читабельности и простоты восприятия нужно учитывать много моментов. Это способ задать общий настрой проекта, наладить связь с посетителями сайта, подчеркнуть особенности бренда. Вот представьте, если бы материалы на детском развлекательном портале были выполнены в готических надписях. Или серьезный портал элитных автомобилей – в Comic Sans.
Настроение
Звучит на первый взгляд дико, но буквы передают настроение. Сначала это можно заметить просто по субъективным ощущениям. Некоторые решения кажутся уместными, а некоторые не соответствуют вовсе. С опытом веб-дизайнер уже понимает, почему именно такие черты нужны в данном проекте, какое семейство шрифтов подойдет.
При подборе важно почувствовать и настрой проекта, и черты целевой аудитории. И под тем же соусом подавать текст, выразив его шрифтом. Это многосторонняя связь.
Вот пример с сайта ginoangelinifoods.com.
Разные шрифты помогают легко описать вкус – мы видим приветственную надпись с нотками острого перца. Он жгучий и его нужно мало. А потом помидоры – мягкие, сочные, такие же как курсив в описании. В целом сочетание позволяет без прочтения текста окунуться во вкус отличной итальянской томатной пасты.
Очень простая логика для новичков – если вы еще не видите полутонов и разительных отличий, то подбирайте шрифт исходя из характеристик товара. На сайте для кружева должны быть шрифты легкие, полупрозрачные, тонкие, изящные. На сайте с бас-гитарами шрифты будут толстыми как струны.
Типографика
Есть специалисты, которые всю свою карьеру посвящают изучению шрифтов, их истории, формированию и деталям, сочетанию с другими шрифтами. И некоторые из таких людей создают свои шрифты, но далеко не всем это дано. Вопрос сложный, и объемный, а самое интересное – он не статичен. Типографика развивается, меняется мода и правила, рамки расширяются. Изменения происходят так же быстро, как и в целом в веб-дизайне – то, что было актуально 10 лет назад, сегодня уже просто неприемлемо. Конечно, есть незыблемая классика. Но и ее нужно разбавлять, иначе получим только скуку вместо элегантности.
Вот некоторые примеры шрифтов с их “настроением”:
- Без засечек – стандарт, обычный текст, для пояснений;
- Черный – обратите на меня внимание;
- Ультратонкий или жирный – я здесь главный и знаю об этом;
- Курсив (с засечками или без) – выход за рамки, нежность, особая ремарка;
- Округлый – дружелюбие, комичность;
- Геометрический – ретро, детский;
- Script – элегантность и изысканность;
- Modern serif – стиль, гламур, мода;
- Serif – формальность, классика;
- Novelty – простота, повседневность без претензий.
Никаких стандартов
Очень важно при выборе шрифта не стать заложником клише. Дело в том, что есть уже масса информации о применении шрифтов и их сочетаниях – целые гайды для разных типов проектов. И вроде бы они действительно правы, ведь сочетания и схемы подобраны верно. Но брать такие готовые решения нельзя.
Во-первых, они не учитывают особенности проекта. Это шаблон. А если бы клиенту нужен был бы шаблонный продукт, он сделал бы очередной безликий сайт на конструкторе, который уже предлагает готовые решения под его тип деятельности. Важно изучить специфику компании и позиционирование, на каком языке она говорит с клиентом и какой ее главный посыл. Только так получится создать идеальную типографику.
Во-вторых, это по сути плагиат. Вы возьмете три главных шрифта для сайта по пошиву кукол и… обнаружите еще сотню конкурентов с такими же. Оно нам надо? Это снизит конверсию, потому что посетитель не сможет навскидку отличить ваш сайт от подобных. И испортит репутацию веб-дизайнеру.
Сайт должен цеплять. Выделяться. И готовые подборки совершенно точно не помогут к этому прийти, даже если выглядят гармонично на первый взгляд. Потом в готовом проекте вы увидите, насколько получилось пресно и без “изюминки”. Так что мы рекомендуем в каждом возможном случае подбирать шрифты лично. Вскоре выработается вкус и чутье, появятся любимые сочетания, а при виде нового заказа уже будут возникать идеи.
Сколько нужно?
Есть свои рамки для количества шрифтов в проекте. Одного всегда мало. И двух, может быть, тоже, если это не визитка или баннер. Если речь не о лендингах, а о полноценных сайтах, то оптимально выбрать три шрифта:
- для крупных заголовков и кнопок;
- для подзаголовков и разделов;
- для остального текста.
Не забывайте, что один шрифт может выглядеть совершенно по-разному в зависимости от его жирности и цвета. Если взять один, но сделать заголовок жирным черным в 60 пикселей, а подзаголовок регулярным серым в 42 пикселя – они будут разными, будет иерархия, но при этом останется единый стиль и идеальное соответствие.
В идеале нужно подобрать шрифтовую пару – это удачные комбинации разных стилей. Например, современные и винтажные. Или одно семейство, но с засечками и без.
Фон шрифта
Само собой, нужно учитывать общий стиль проекта, чтобы грамотно подобрать шрифт. Что будет под надписью, что будет рядом с ней. Необходимо учитывать и фоновые элементы, и цветовую палитру.
Комбинация фона с цветом и стилем шрифта может давать неожиданные результаты. Одна и та же надпись на разных подложках даст разный эффект. Еще есть простой вопрос видимости и комфорта для глаз. Слишком контрастных сочетаний лучше избегать, от них устают глаза и пользователь напрягается, находясь на сайте. А если контраста мало, то он напрягается еще больше, чтобы разобрать написанное.
Сложность с фонами, которые меняются или скользят. Особенно если это фото – надо ведь учесть каждый участок, на который попадает текст. Иногда лучше сделать сразу подложку для текста, которая будет полупрозрачной и нейтральной, иначе есть риск потерять половину фразы, когда она попадет на изображение такого же цвета.
Настроение аудитории
Есть такая сложность у профессионалов – они знают, как нужно сделать, но сами не могут встать на место пользователя, чтобы понять его впечатление. Потому что вы живете в мире творчества и оригинальных проектов, отличаете на глаз Roboto и Roboto Mono. Вы сделали сотни сайтов и видели тысячи. А обычный человек вовсе нет. Он может не оценить мастерство и искусство (скорее всего, не оценит), но ему важно общее настроение.
Мы не можем на 100% получить уверенность в том, как сработает шрифт. Даже если все кажется круто – это не означает, что аудитория тоже так решит. Разве что аудиторией являются веб-дизайнеры того же уровня.
Если есть возможность тестировать – сделайте это. Если нет, то требуется изначально проработать целевую аудиторию очень плотно, вжиться в шкуру среднего представителя. И даже здесь результат не будет абсолютным – нельзя понравится всем. Но важно все-таки заполучить симпатии подавляющего большинства.
Есть и мнение клиента. Тут нужно проявить стойкость. Если он просит поставить “забавные” Papyrus, Jokerman или Comic Sans, то придется расщедриться на лекцию и открыть человеку мир других вариантов. А если хочет “серьезный” Times New Roman или Impact, то в целом может и лекция не понадобится – вполне возможно, что заказчик просто не знает других и не отличит их в готовом проекте.
Основные семейства
Есть семейства шрифтов, которые можно отнести к основным и смело применять везде. При долгих переборах и любых желаниях новизны вы все равно наткнетесь на один из них в итоге. Это проверенная годами классика. Разберем немного, в чем их секрет успеха.
Serif и Sans
Шрифты семейства Serif знакомы нам по печатной продукции. Они чаще всего применяются в заголовках, названиях, слоганах, реже для текстовых блоков, но тоже активно.
Это хорошее решение для любых коротких фраз. Но для полноценного оформления сайта в качестве основного шрифта Serif не очень подойдет. В основном популярностью пользуются шрифты с засечками, именно поэтому они и не станут хорошим решением для больших блоков – лучше сделать таким заголовок, а в пару подобрать шрифт без засечек. Отличной парой будут: Playfair Display, Merriweather, например. Исключение – если вы делаете намеренно безвкусный дизайн.
Шрифты Sans Serif не имеют засечек. Простые и лаконичные буквы как раз подойдут для пары к шрифту с засечками. Востребованность Sans Serif в производстве сайтов объясняется его универсальностью. Для большинства дизайнов и направлений он будет уместен.
Не рекомендуется использовать тонкие варианты написания этого семейства. Они сложно читаются. Но могут быть уместны на очень нежных дизайнах – тут важно подобрать соответствующую пару.
Script
Шрифты семейства Script (самые известные – Lobster и Pacifico) тоже чаще можно увидеть в заголовках и названиях, чем в текстах. На первый взгляд шрифты не самые популярные. Но если присмотреться, то они встречаются в каждом втором проекте, но не в основных блоках, а в кнопках, пунктах меню, ссылках, логотипах. Шрифт этот будет встречаться всего несколько раз в дизайне, поэтому он не бросается в глаза.
Имитация рукописного текста – характерная черта. Это стильно, но утомляет, если его много. И если он мелкий. Если говорить о стереотипности восприятия, то такие шрифты чаще встречаются на сайтах женской тематики.
Применяйте Script там, где есть не более нескольких слов и они не написаны мелко. Заголовки, слоганы, меню. Используйте для сочетания шрифты без засечек, иначе текст превратится в нечитаемую кашу.
Slab
Брусковый или плиточный Slab – применяется часто, выглядит при этом вполне свежо. Если взять большие и жирные буквы, то получится отличный броский заголовок. Где еще мы видим такие шрифты? В рекламе, листовках, акционных предложениях. А еще Slab часто применяют для текстовых логотипов.
Чем удобен Slab – крупные буквы отлично подходят для создания визуальных эффектов: свечение, текстуры, градиенты. Если не окружать такую надпись другими текстовками, то она остается читаемой даже со всякими примочками.
При малом размере такой шрифт становится трудным для восприятия. Крупный хорошо сочетается и со шрифтами с засечками, и без. Не стоит только брать в пару рукописный шрифт, будет выглядеть нелепо. Самые популярные представители семейства: Kelly Slab, Rammetto One, Roboto Slab, Graduate.
Общие советы
Отметим главные ошибки в вопросах применения шрифтов, которых лучше избежать:
- Использовать более 2-3 основных шрифтов на сайте.
- Брать в пару похожие друг на друга шрифты.
- Использовать одинаковый набор везде, пусть он и является удачным сочетанием.
Для веб-дизайнера показателем его мастерства будет его портфолио. И если у вас в арсенале есть только два варианта любимых шрифтов, то сайты будут выглядеть однотипно. А каждый клиент хочет индивидуального подхода и уникального продукта.
Иногда подбор шрифта бывает сложным. Но опыт и знания помогут решить эту проблему. Подробнее об этом на онлайн-коучинге по графическому дизайну.
Материал подготовлен командой образовательной платформы WAYUP