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

Что такое леттеринг

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

Шрифтом называют набор символов, которые могут использоваться в любом порядке. Если дизайнер создает рукописный шрифт, буквы в словах будут выглядеть одинаково. Например, шрифт Segoe Script имитирует написание букв рукой, однако, на самом деле это набор символов:

Если использовать такой шрифт, буквы в словах будут написаны одинаково, что невозможно, если бы надпись на самом деле была написана от руки:

В этом примере видно, что повторяющиеся в словах буквы «д» и «а» одинаковые.

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

Каллиграфия — искусство красивого написания слов. Обычно это написание от руки, все буквы должны быть в одном стиле. Пример каллиграфии:

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

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

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

Немного истории

Сначала были наскальные рисунки, в Древнем Египте были различные символы, потом появились буквы и цифры — человечество научилось писать. Ручное письмо было повсюду: личные письма, книги, приказы и законы. Все писалось с помощью перьев: так зародилась каллиграфия. С появлением печатных машин и, вслед за ними, компьютеров начали появляться шрифты. Это очень способствовало повышению уровня образования. Книги стали более доступны, даже простые крестьяне и рабочие, со временем, научились читать и писать. Тем временем, леттеринг с появлением письменности развивался постоянно. Нужно было как-то оформлять вывески, афиши, этикетки, обложки.

Вконтакте есть пабик «Советский леттеринг». Там много примеров чудесных работ былой эпохи.

Примеры применения леттеринга в веб-дизайне

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

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

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

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

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

Баннеры

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

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

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

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

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

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

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

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

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

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

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

Вы когда-нибудь слышали слова «кёрнинг», «трекинг», «интерлиньяж»? Вам что-то говорят термины «наплыв», «капля», «хвост»? Давайте разбираться, что это такое.

Кёрнинг — это расстояние между буквами. Чтобы в словах не было «дыр», это расстояние нужно правильно распределить.

Трекинг — это совокупность межбуквенных просветов во фразе или предложении.

Интерлиньяж — расстояние между строками.

Изображение ниже наглядно показывает из чего состоят буквы.

Иллюстрация из книги «Буква к букве»

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

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

Буквы, как птицы на ветке, сидят на базовой линии. Части, выходящие за нее, называются верхними и нижними выносными элементами. Дырки от полуовалов и овалов — внутрибуквенный просвет.

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

Межбуквенные расстояния

Из-за того, что все буквы разной формы, нельзя делать расстояния между ними одинаковыми.

Самое большое расстояние нужно делать между соседними вертикальными штрихами. Немного меньшее расстояние будет, если вертикальный штрих одной буквы граничит c округлым штрихом другой буквы. Еще меньшее расстояние будет между двумя округлыми элементами. И еще меньшее, если прямые и округлые штрихи встречаются с диагональными соседями (А, У, Ж, а также Г, Т, если мысленно соединить их крайние точки).

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

Иллюстрация из книги «Буква к букве»

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

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

Иллюстрация из книги «Буква к букве»

Когда использовать леттеринг

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

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

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

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

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

Смысл

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

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

Какие необходимы инструменты

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

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

Работа автора

Минимальный набор, который нужен, чтобы начать рисовать для себя:

• Мягкий простой карандаш. Лучше всего брать 2В, но если вы любите надавливать при рисовании, можно ограничиться НВ или В (жирные линии сложнее стереть, они оставляют след на бумаге.
• Ластик. Желательно мягкий, чтобы он хорошо убирал карандаш и не размазывал его.
• Бумага — можно взять обычную офисную, для черчения или купить альбом для рисования.
• Цветные маркеры, карандаши или ручки. Нужны, чтобы обводить контуры и закрашивать.

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

• Мягкий карандаш. Опять же, тем, кто не любит сильно давить, подойдёт 2В, а если вы рисуете с нажимом, то лучше брать более твёрдый.
• Ластик. Важно, чтобы он был очень мягким и не оставлял следов. Многие иллюстраторы используют ластик-клячку, который не царапает бумагу, и работа в результате выглядит аккуратно и презентабельно.
• Линеры. Нужны, чтобы обводить контуры. Для любителей толстых линий подойдут 0,8, 1,0 и 1,2, более тонкие линеры имеют маркировку 0,2, 0,3, 0,5. Универсальных рекомендаций относительно линеров нет: выбирайте те, с которыми вам комфортно работать.
• Брашпен с двумя наконечниками. Это инструмент, на одном конце которого находится маркер, а на другом — кисть. Маркером можно делать контур или закрашивать буквы, а второй наконечник прекрасно подойдёт для тех, кто осваивает браш-леттеринг, то есть рисование букв кистью.
• Брашпен с одним наконечником-кистью. Этот инструмент сложнее в освоении, чем предыдущий, с ним труднее контролировать написание, он требует более высокого мастерства и поэтому не подходит для начинающих. Однако именно он нужен, если вы хотите создавать модные сегодня буквы, в которых есть очень толстые и тонкие линии.
• Бумага. Её плотность должна быть не меньше 80 г/м², то есть подойдут обычные офисные листы для принтера.

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

Нюансы использования леттеринга в веб-дизайне

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

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

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

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

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

С чего начать

Большинство считает, что нет смысла браться за рисование букв, если нет возможности посвящать этому занятию хотя бы несколько часов в день. На самом деле это не так. Главное — заниматься регулярно, пусть даже и по 5 минут в день. Такие занятия принесут больше пользы, чем час один раз в неделю.

Отличительная особенность леттеринга в том, что для него не нужно иметь базовое художественное образование. Будет вполне достаточно начальных навыков рисования и 5–30 минут времени ежедневно.

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

Леттеринг — идеальное занятие для новичков, и вот почему:

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

По этим причинам можно преуспеть в леттеринге и без наличия творческого образования. Есть несколько леттереров, чьи имена известны во всём мире, например Стефан Кунц (Stefan Kunz) и Лорен Хом (Lauren Hom). Свои навыки они приобретали самостоятельно, и их пример — лучшая мотивация для тех, кто сомневается в себе и своих способностях.

Еще 5 примеров использования леттеринга на практике

Мы нашли несколько примеров сайтов, где используется леттеринг как главный или дополняющий элемент дизайна.

Кафе Saan food

Дизайнеры используют леттеринг в создании логотипа, зеркально располагая надписи. Логотип используется как полноценная иллюстрация и создает контраст с темным фоном и яркими фотографиями пищи. Также леттеринг используется как заголовок одного из разделов.

Магазин s.Oliwer

Логотип у магазина также выполнен в стиле леттеринг. Дизайнеры решили не рушить гармонию и добавляют рукописные шрифты в слайдер на главном экране. Это придает сайту законченность, создает единую стилистику. Черная надпись контрастирует с изображением, в то же время не отвлекает от элемента призыва к действию — кнопки discover now.

Компания по разработке digital-продуктов

В этом примере используется надпись в стиле леттеринг как элемент привлечения внимания пользователя к призыву к действию. Белая надпись контрастирует с видеобэкграундом и выделяет красную кнопку. Несмотря на то, что компания занимается разработкой технических решений, надпись «от руки» придает сайту человечности.

Сайт об истории футбола

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

Студия дизайна DRAFT

Еще один интересный пример — надпись во весь экран, выходя за рамки слайдера. Создается такое ощущение, что текст словно нарисован на дисплее монитора. Намеренные недостатки рисунка — смазанная буква N, недорисованная Y — наоборот создают ощущение, что надпись была написана рукой человека.

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

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

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

Практическое задание

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

Иллюстрация из книги «Леттеринг для начинающих»

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

Затем можно попытаться вписать слово в простую фигуру, овал или многогранник.

Иллюстрация из книги «Леттеринг для начинающих»

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

На рисунке ниже показано, как от очертания буквы перейти к конкретному шрифту, то есть нарастить «мясцо» на «скелет».

Иллюстрация из книги «Леттеринг для начинающих»

Теперь написанным словам можно добавить какую-нибудь форму.

Иллюстрация из книги «Леттеринг для начинающих»

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

На этом урок подошел к концу, в следующий раз мы разберем основы композиции в леттеринге.

Были использованы материалы книг: «Буква к букве». Автор Татьяна Чулюскина «Леттеринг для начинающих». Автор Анна Суворова «Основы каллиграфии и леттеринга». Автор Анна Рольская