Может ли что-то простое, такое как, например, шрифт изменить смысл не только слов, но всего макета сайта? Отлично может! Это аналогично тому, когда вы читаете одну и ту же книгу разного издания (бумажную, разумеется). Обычно шрифты тоже используются разные. Несмотря на то, что сюжет вам известен и вы уже знаете, какие эмоции вас ожидают, воспринимается целостность произведения совсем по-другому. Мы недавно в нашем блоге рассказывали о том, как цвет способен преобразить веб-дизайн, как фотографии влияют на его восприятие пользователями, даже о том, какой дизайн считать «женским», а какой – «мужским». Но в материалах о типографике затрагивали темы чисто общего плана.
В реалии шрифт способен помочь вам установить связь с посетителями, подчеркнуть бренд, задать общий настрой проекта. Неправильный шрифт, наоборот, сделает веб-сайт безличным, несвязанным и даже может в корне перевернуть осознание бренда. Но что, если зная это, начать воплощать в жизнь сказанное? Давайте попросту рассмотрим все это подробненько на примерах.
Настроение
Это может казаться сумасшествием, даааа…, но у шрифта есть свое настроение. И точно так же, как и с вашим личным настроением, шрифт передает его негромко, отлично от окружения, может даже иногда с некой долей стеснения. Но это настроение позволяет наладить контакт с проектом, поскольку оно определяет, смогут ли пользователи понять контент, смогут ли его почувствовать. Создается своего рода многосторонняя связь между тем, что вы делаете, для кого и кем сами являетесь. И здесь важно понимать самому, чего именно вы (или заказчик) хочет, чтобы передал проект, какие стили использовались и как они могли бы связываться.
Проект ginoangelinifoods наглядный пример не только по теме того, как сочетать разные типы шрифтов. Но посмотрите на другой момент. Перец, обычно, очень жгуч и остр, его не все люди могут употреблять в пищу, а кто-то попросту не любит. Но и шрифт для надписи BENVENUTI (добро пожаловать) тоже имеет достаточно острый шрифт (с заческами), утонченный, в меру строгий. И не от того, что владелец проекта недоброжелательный, а просто перец – один из главный ингредиентов блюд. Но затем присмотритесь к помидоркам и вспомните их вкус, такой мягкий, нежный, сочный. Курсивный шрифт передает это настроение. Что же в целом? В целом один только текстовой блок смог передать настроение классической итальянской томатной пасты. Дальше – сочетание кислого с остринкой лимона со сливочным маслом и сыром.
Аналогично выглядит и сайт goodfour, призывающий всех 4 апреля на благотворительный, а-ля, субботник. Для них это «счастливые часы», а счастье всегда ассоциируется с нежными пастельными розовыми тонами, насыщенными желтыми цветами. Соответственно, шрифт подобран нечетким, без художественных излишеств. Он выглядит воздушно, словно дуновение мимолетного порыва счастья.
Все познается в сравнении
Давайте сравним два варианта написания слова «День». Обычный день. Но как по-разному воспринимаются это надписи…
Типографика
Не существует точной науки по сопоставлению шрифтов. Мы раньше говорили, что да, многие веб-дизайнеры посвящают свою жизнь изучению только типографики, но заметьте, именно изучению, поскольку меняется она постоянно, как меняется мода на веб-цвета, картинки, стили блоков, тени и прочее. На самом деле, почти вся типографика создается интуитивно понятной и вам достаточно только бегло взглянуть на текст или отдельные слова, чтобы увидеть, о чем они говорят. Если не совсем понятно о чем идет речь, то пример выше с «днем» наглядный пример.
.jpg)
Так или иначе, но есть некоторые советы по настройке шрифтов для разного настроения
- Serif – вневременное, формальное
- Modern serif – высокая мода, гламур, стиль
- Slab serif – внимание и особое значение содержанию
- Без засечек – легкий и нейтральный
- Ультратонкий или жирный – авторитетность
- Курсив (с засечками или без) – динамика, отличность от стандарта
- Черный или полужирный (с засечками или без) – остановка, внимание, особое значение
- Script – личное и элегантное
- Novelty – беззаботность и повседневность
- Геометрический – для детей и для ретро направлений
- Моноширинный – технический
- Округлый или что-то пузырчато-подобное – веселье и дружелюбие
- Винтажный – мода, стиль
- Гранж (мазки кистью) – таинственность
А теперь попросту внимательнее рассмотрите каждый пример сайта, что мы для вас подобрали и сравните шрифт, и какую смысловую нагрузку он несет, что передает собой и как оформляет собою текстовой контент. Это chateau-des-avenieres, playdoh, ouigo, bucketlistly, mcafee, gbksoft, advery, ai_brief. В примерах можно найти и шрифты винтажные, геометрические, пузырчатые, строгие или тонкие, с засечками и без.
Только не клише
Самая же непростая задача веб-дизайнера при работе со шрифтом – не попасть в ловушку в использовании шрифта и применения клише, как может посчитать это большинство посетителей. Например, можно в интернете найти тонны информации о том, для какого конкретного проекта какой именно шрифт использовать, но, как только вы начнете применять эти советы на практике, дельного получится мало. Ибо все эти советы не учитывают одного – тонкостей и нюансов каждого отдельного сайта и тематики его, а потому люди-то уже будут смотреть на дизайн, как на «клон» чего-то там, клише и так далее.
Каждый дизайнер хочет подобрать такой шрифт к дизайну, чтобы визуально всё цепляло и ошеломляло. И это классно, но когда вы позже взгляните на то, что сделали «по советам», окажется, что это всё уже не цепляет. Именно поэтому и считается, что работа с типографикой – тоже, своего рода, искусство.
Возможно, у вас появится идея сочетать стиль с засечками и тревожный контент или может придать с помощью script более строгий вид. Так или иначе, попробуйте для любого контента всего проекта выбрать один шрифт для больших букв, крупных заголовков и другой шрифт для всего прочего. То есть опять возвращаемся к шрифтовой паре. Это может быть шрифт с засечками и без одного семейства, комбинации винтажного и современного.
Вот, например, проект о культуре и путешествии в Южную Корею использует и обычный линейный тонкий шрифт и жирный с засечками, а сайт электропродукции из латуни meljac вообще удачно использовали один шрифт и несколько разных.
Фон шрифта
Важная часть размышлений о том, какой же шрифт выбрать и как передать им смысл проекта, настроение – это то, что его окружает, какие именно элементы. Это могут быть фоновые изображения, текстовые блоки, цветовые решения или другой шрифт. И при одном написании фразы при разном фоне будет создаваться совершенно разная смысловая нагрузка и передаваться настроение. Сравните два варианта ниже. От какого в душе каждого из нас «день» действительно чувствуется, создается понимание того, о чем идет речь, отчего улучшается наше с вами настроение. От первого вам хочется проникнуться и осознать, что пришел новый день, возможно, подумать об отдыхе. Но второе изображение настраивает на работу, будоражит воспоминания о тревогах и заботах, что появляются каждый новый день.
Разные комбинации оставляют у пользователей разные ощущения. Возможно, во втором случае лучше бы подошел более простой шрифт, четкий и строгий. Такие шрифты довольно нейтральные и обретают смысл только в зависимости от своего окружения.
Подумаем об аудитории
Несмотря на то, что создается впечатление, будто дизайнер, создавая макет сайта, полностью просчитывает все нюансы и создает 100% готовый продукт, это не совсем так. Когда дело доходит до типографики и настроения ни один веб-дизайнер не может проконтролировать, как в итоге воспримут шрифты конечные пользователи. Могут только предположить, но с вероятностью в 100% сказать и сделать – нет.
Для примера возьмем сайты campcody, communitysectorbanking, chobani, comicneue и обратим внимание на похожесть шрифтов на Comic Sans. А также посмотрим на сборку логотипов с использованием данного шрифта и его аналогов. Многие веб-дизайнеры стараются держаться в стороне от этого шрифта, они смеются и высказывают негатив, если кто-то, даже из их друзей, создает проект с использованием этого шрифта или очень похожего, но с другим названием (чтобы скрыть истину).
С другой стороны, Comic Sans весьма популярный шрифт и его можно увидеть в разных проектах: брошюры, вывески, логотипы, отдельные заголовки. В тот момент, когда вам кажется, что возникает проблема с дизайном, есть люди, которые такой проблемы не видят и им нравится то, что делаете вы. И это вполне может случиться со шрифтами. Кому-то нравятся строгие жирные, а кто-то просто «без ума» от рукописных, а кому-то нужны на сайтах только моноширинные.
Все люди разные и смотрят на дизайн конкретного сайта с разной точки зрения и каждый прав по-своему. Именно поэтому веб-дизайнеры не просто создают и рисуют макет в Photoshop, они также изучают аудиторию, «засыпают» заказчика вопросами: для кого сайт и какова его цель. Все это для того, чтобы попробовать немного предугадать то впечатление, которое произведет дизайн на пользователей, какая типографика подошла бы. Иногда пользователи сами начинают высказываться о том, что шрифт их не устраивает.
И хотя вы не сможете найти идеального решения для каждого проекта, всегда лучше учитывать особенности целевой аудитории, то, что она может чувствовать, и какие чувства вы хотите передать. Это более практично.
Пятерка неординарных шрифтов
«Выбирать или не выбирать» какой-либо шрифт, в любом случае он должен быть интересным и забавным. У всех бывает момент, когда дизайн безупречен, но шрифт глупо все рушит, он попросту не сочетается. Поэтому мы расскажем о пяти самых неординарных шрифтах, которые используются дизайнерами, но не часто. Для кого-то они крайне неудовлетворительны, но кому-то они попросту нравятся.
Papyrus - его трудно читать и подходит не для каждого дизайна.
Jokerman – любая версия шрифта имеет небольшие засечки и пузырьки, шипы, а в сочетании с расцветкой так вообще выглядит смешно. Хотя и ему можно найти применение в зависимости от тематики.
Times New Roman – обычный шрифт для школьной литературы, для каких-либо статей, информационного характера. Но зачастую его воспринимают как нечто то, что сравнимо с «ленью дизайнера подобрать шрифт». Хотя он способен придать своеобразный шарм дизайну.
Impact – отличный шрифт для призыва к действию. Если вам нужно привлечь внимание пользователей к акции или распродаже, он вам подойдет. Хотя мемы сильно подпортили ему репутацию.
Comic Sans – о нем мы поговорили выше.
И вот еще некоторые примеры сайтов, отлично сочетающие в себе шрифты и окружение, которые, с одной стороны, строгие, но с другой – весьма незаурядные, способные пробудить разные чувства у зрителей. Это monokitchen, sudtipos, cityhero, twenty-twenty, simone-simon, minthisresort, landing., voodoomaniacs.
Выводы
Ваше настроение, настроение ваших посетителей, настроение типографики – в совокупности создают общее чувство для проекта. Шрифт становится чем-то большим, чем просто шрифт, он важен не просто своим наличием, но и своим видом, начертанием.
Стоит не забывать все сказанное выше при работе над любым проектом и создания настроения для аудитории. Представьте, если бы спортивный проект имел рукописный шрифт. Это просто не сочетается, это – обескураживает. Но более строгий, тяжелый передает напряжение и силу, что дает спорт, свободу и тяжелое стремление к результату.
Иногда подобрать подходящий шрифт бывает сложно, но отчаиваться не стоит, поскольку есть моменты, когда сочетания разных семейств вполне может подойти или попросту воспользуйтесь стандартами. Так или иначе, но шрифт способен передать настроение, изменить его у посетителя, придать обилие эмоций проекту. Невероятно, но загадочно и реально.
