Текст

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

Как выбрать

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

Логотип и кнопку не считаем — они не мешают ни одному типу.

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

Если мы делаем акцентную надпись, она должна быть одним из главных героев композиции:

Но не обязательно единственным главным героем:

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

Межстрочный интервал у заголовка всегда 100% — не меняем его ни в какую сторону.

Межбуквенное расстояние тоже не трогаем: гарнитуры нарисованы с нужной разрядкой, и менять её не надо.

Выравниваем текст по левому краю или по центру — смотрим по общей композиции. Но если строк больше трёх — только по левому краю.

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

Стараемся избегать конструкции «заголовок и подзаголовок», особенно в маленьких форматах вроде баннеров. Обычно в подзаголовке лежит второстепенная информация: её либо удаляем совсем, либо обыгрываем иначе — например, через стикеры.

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

И помним про правило внутреннего и внешнего: строки заголовка стоят плотнее всего, а подзаголовок отходит от них чуть дальше. Если наоборот — строки заголовка разъехались, а подзаголовок прилип, — глаз собирает их в неправильные группы.

Стараемся не делать слишком короткие или слишком длинные акцентные надписи. Целимся хотя бы в 2 строки и не больше 4.

Исключения — вытянутые вертикальные форматы, когда строк много, а текста — не очень:

Не разносим на разные строчки предлог и слово, к которому он относится. Наша редполитика этого не советует:

Да и в целом редполитику чтим и уважаем: тексты на баннерах тоже пишем по ней.

• Берём, когда в макете уже есть что-то яркое: фотография, иллюстрация или персонаж.
• И всегда берём, когда к заголовку идёт подзаголовок или список — тут он единственный вариант.
• Строк от двух до четырёх. Если больше трёх — выравниваем только по левому краю, иначе можно и по центру.
• Украшений нет вообще: ни стикеров, ни плашек, ни подчёркиваний.
• Рядом в макете может стоять что угодно.

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

Если в макете есть фото, а формат горизонтальный, — тоже выравниваем по левому краю.

Это единственный тип, у которого бывает подзаголовок. Но и тут стараемся без него.

Сам по себе он не акцент, поэтому если рядом ничего яркого нет — стараемся добавить что-то одно: стикеры, линию, глазья. Не получилось сделать это красиво — оставляем чисто, это не брак.

• Берём, когда в макете есть только заголовок.
• Строк две или три, выравниваем только по левому краю.
• На каждой строке ровно одно украшение: стикер, слово на бабле-сосиске, спичбабл, подчёркивание или стрелка.
• Подзаголовка у этого типа не бывает.
• Ничего другого в макет не ставим — ни фотографии, ни обтравки, ни персонажа.

Логотип и кнопка при этом не считаются — они этому типу не мешают.

Это самое яркое пятно из четырёх, поэтому на макете он живёт один: ни фотографии, ни иллюстрации, ни обтравки, ни персонажа, ни линии рядом с ним не ставим.

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

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

На каждой строке ровно одно украшение. Не «не больше одного», а именно одно: пустых строк не остаётся, двух украшений на одной строке тоже не бывает.

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

На двух строках подчёркивания и бабла-сосиски не бывает: они начинаются с трёх. Выделять там нечего — выделитель заберёт половину заголовка. Спичбабла это не касается: он показывает реплику, а не выделяет слово, и на двух строках смотрится норм.

Поэтому стикер с подчёркиванием совмещать можно, а подчёркивание с баблом — нет:

Держим конструкцию в равновесии: не ставим все элементы в одну сторону, иначе она начинает перевешивать. На соседних строках украшения стоят с разных концов: конец первой строки — начало второй:

Тут действуют все те же правила, что и для стикеров в целом.

Стикер делаем ростом со строку: его высота равна высоте строки. Больше нельзя — полезет на соседние строки. Меньше тоже не делаем, иначе он теряет акцентность и маскируется под глиф стапеля.

И перекрашиваем: стикер берёт 300-ю ступень своей цветовой группы, родной цвет не оставляем. Белую обводку не меняем.

Стикеры-иконки подбираем по смыслу к слову, рядом с которым они стоят.

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

Если стикер встаёт рядом со знаком препинания, он его «съедает».

Спичбабл — это который с пипкой, а сосиска — без нее:

В паке наклеек есть отдельные примеры для использования внутри текста. У них отступы меньше.

Кегль на плашке такой же, как у всего заголовка, — не уменьшаем его.

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

Наклон — 2,5° вверх, как у спичбабла и сосиски. Ровно плашка не стоит никогда.

По высоте сажаем так, чтобы середина плашки совпала с серединой маленьких букв строки — тот же уровень, на котором стоят стикеры.

Строку под плашкой отодвигаем вниз, чтобы плашка её не задевала: между низом плашки и самыми высокими буквами строки остаётся небольшой зазор. Ничего под плашку не заезжает — ни хвостики над «й», ни точки над «ё», ни заглавные.

Предлог уходит на плашку вместе со своим словом, даже если по смыслу он относится к соседнему.

Красим так же, как стикеры: подложка — 300-я ступень цветовой группы, текст на ней — 800-я того же цвета.

Спичбабл показывает диалог. В текстовой конструкции — что кто-то что-то выкрикнул или дополнил. Проверить себя просто: убираем бабл вместе с содержимым — заголовок остался грамматически правильным и не потерял смысл? Если да, это может быть спичбабл:

Если бабл нужен для выделения, берём его без пипки:

Предлог выносим в бабл вместе со словом, к которому он относится:

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

Баблы лучше наклонять вверх — так бодрее:

Подчёркиваем одно слово на весь макет — не больше.

Все размеры тут считаем от высоты строки. Межстрочный у заголовка всегда 100%, поэтому строка ровно в размер шрифта — от него и пляшем.

Толщина линии — 14% высоты строки. За слово она выступает на 5% с каждого торца, и считаем по самим буквам, а не по их рамке.

Вниз линия отступает на 12% высоты строки от самой нижней точки слова: у «д» и «р» это кончик ножек, у остальных букв — их низ. Наклона у линии нет, а цвет всегда такой же, как у самого слова.

Подчеркиваем и слово, и его предлог, если он есть.

Подчёркивание рисуем сами — простая прямая линия с полностью скруглёнными краями. Форму не придумываем: ни волны, ни дуги, ни кисти.

• Берём, когда фон — фотография или, кроме заголовка, в макете ничего нет.
• Строк две или три, каждая на своей плашке, выравниваем по центру.
• Плашки касаются боками, наклон 3°, −3°, а третья строка всегда 1°.
• Стикеров максимум два, и только если в макете нет никакой фотографии.
• Без стикеров рядом можно поставить фотографию, обтравку или персонажа.

Каждая строка стоит на своей бабл-сосиске. Если строка одна или их четыре — это уже не баблы, а плашка.

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

В таких случаях, если баблов несколько, общую композицию тоже направляем вверх. Для этого наклоняем вверх:

• либо первый;
• либо самый большой;
• либо, если баблов больше двух, большинство, как на предыдущем примере.

Текст на баблах можно дополнять стикерами.

Наклоны у строк заданы: первая 3°, вторая −3°, третья всегда 1°. Первая и третья смотрят вверх, вторая — вниз. Поэтому композиция читается направленной вверх, а батареи не получается. Если баблов два, вверх смотрит первый.

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

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

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

Плашки строк стоят вплотную: капсулы касаются телами, но друг на друга не наезжают.

Смотрим при этом на сами капсулы, а не на их рамки. У капсулы срезаны углы, поэтому если поставить рамка к рамке — между телами останется заметный зазор, и строки развалятся.

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

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

Цвета тоже заданы: первая строка белая с тёмным текстом, вторая оранжевая — с белым, третья — снова белая с тёмным.

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

Бабл-строки сами по себе вещь лёгкая, поэтому их можно ставить в макет, где уже есть фотография, обтравка или персонаж. Как только добавляем стикеры — заголовок становится главным героем макета, и тогда фотографии в нём быть не должно.

Стикеров максимум два и по одному на строку. Ростом они чуть меньше плашки — примерно в четыре пятых её высоты.

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

Крутим в пределах 20° в любую сторону.

• Берём, когда фон — фотография, или, кроме заголовка, в макете ничего нет.
• Строк от одной до четырёх; если строка одна или их четыре — это единственный подходящий тип.
• Весь текст стоит на одной готовой подложке, выравниваем по центру, наклон всегда 3°.
• Подложка одного цвета: белая, оранжевая или синяя. Того же цвета, что фон, не берём.
• Стикеров максимум два, и только если в макете нет никакой фотографии.

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

Наклон всегда 3°. Другого не бывает: если в каком-то старом макете плашка стоит под другим углом — это не образец.

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

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

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

Стикеров максимум два, и тут они крупные — почти вдвое выше строки. Ставим по диагонали: один у торца первой строки, другой — у торца последней.

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

Крутим в пределах 20° в любую сторону.

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