Леттеринг в фирменном стиле

Происхождение понятия леттеринг уходит своими корнями в латинское слово litera (буква), а значит и сам процесс их написания назвали леттеринг. Это искусство часто применяется в художественном оформлении чего-либо, когда хочется сделать что-то особенное, не похожее ни на что другое. Леттеринг берет свое начало от каллиграфии, с его помощью можно визуально изобразить самые красивые языки мира.

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

Шрифт

Леттеринг

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

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

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

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

ПРИМЕРЫ ПРИМЕНЕНИЯ ЛЕТТЕРИНГА В ВЕБ-ДИЗАЙНЕ

Леттеринг набирает популярность в дизайне как в графическом дизайне, так и в вебе. Рассмотрим несколько примеров использования леттеринга при создании дизайна сайтов.

: Логотипы и оформление продукта

У множества современных компаний логотипы и оформлены в стиле леттеринг. Например, всем известные компании Ford, Johnson & Johnson, Disney и другие.

Поэтому на сайтах встречаются логотипы, оформленные с помощью леттеринга. Яркий пример - сайт компании Coca-Cola, дизайн логотипа которой создан в рукописном стиле, также такая надпись располагается на упаковке напитка:

В этом случае леттеринг является частью фирменного стиля. 

Баннеры

Чтобы выделить акцию или другое специальное предложение, для привлечения внимания клиентов используются баннеры с надписями в стиле леттеринг. Такой прием увеличивает вероятность того, что пользователь обратит внимание на надпись и изображение. На сайте компании «Дисней» есть несколько баннеров с такими надписями:

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

Заголовки и надписи

Еще одно возможное применение леттеринга - использование в качестве шрифта для заголовков и надписей на сайте. На основе леттеринга создается уникальный веб-шрифт. Так сделала компания Olivio и использовала такой прием в качестве заголовков к разделам сайта:

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

Изображения и иллюстрации

Так как леттеринг - уникальная композиция, часто с помощью этой техники создают целые иллюстрации и дополняют изображения. Это может быть как стилизованная композиция, где надпись и ее смысл играет главную роль, так и дополнение к фотографии. Компания Reebook в своей недавней рекламе #BeMoreHuman использовала леттеринг для надписей, которые играют значительную роль и в тоже время являются дополнением к фотографиям знаменитостей:

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

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

Здесь дизайнеры воспринимают надпись как полноценное изображение и «встраивают» ее в общую концепцию сайта.

КОГДА ИСПОЛЬЗОВАТЬ ЛЕТТЕРИНГ

Леттеринг подходит далеко не ко всем веб-проектам. Так как цель данного направления - нести эмоциональный посыл, сделать акцент на фразе или изображении, не все бренды смогут использовать его в своих целях. Если главная задача сайта - четко преподнести информацию, подчеркнуть серьезность ресурса, леттеринг будет «не в тему». При использовании леттеринга в веб-дизайне, нужно учитывать некоторые нюансы.

1. Тематика и настроение ресурса

Так как леттеринг - уникальный элемент в определенной стилистике, необходимо употреблять его к месту. Стилей и направлений в леттеринге множество: от советского стиля до винтажных надписей. Поэтому важно правильно выбрать концепцию или отказаться от леттеринга совсем. Если вы хотите произвести впечатление делового бренда, лучше не использовать такие приемы и отдать предпочтение классическому стилю и прямой типографике. Леттеринг обычно используется для создания уютной атмосферы (например, в дизайне сайтов для кофеен), легкости и красоты.

2. Цветовая гамма

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

3. Смысл

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

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

НЮАНСЫ ИСПОЛЬЗОВАНИЯ ЛЕТТЕРИНГА В ВЕБ-ДИЗАЙНЕ

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

Первая из них - адаптивность. Для корректного отображения макета на других устройствах (мобильных телефонах, планшетах и прочее), нужно разрабатывать дизайн для различных разрешений экрана. В случае с леттерингом изменить его характеристики непросто: необходимо менять масштаб без потери качества и разборчивости надписи. Поэтому нужно учитывать эти нюансы при разработке нескольких макетов. Данный нюанс учли на сайте The Girl and the bull:

Следующая трудность - выбор варианта технической реализации. Есть несколько способов добавить леттеринг в дизайн сайта:

• как растровое изображение;
• как формат SVG;
• как веб-шрифт.

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