20 правил типографики

1. Правила расположения текста на баннерах

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

А тем, кто более глубоко хочет погрузиться в эту тему, советую изучить правило «внутреннего и внешнего» — все правила расположения являются частными случаями этого.

2. Выравнивание текста по левому краю

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

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

P.S. Кстати, для баннеров лучше использовать выравнивание по левому краю и по центру (в случае если заголовок и подзаголовок короткие). По правому краю — самое нежелательное выравнивание, особенно если текста много. Это неудобно читается.

3. Точка в конце заголовка

В конце заголовков, подзаголовков и слоганов точки не ставятся, а вот знак вопроса, восклицательный знак и многоточие ставятся.

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

4. Кнопки

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

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

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

5. Равномерность края абзаца

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

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

6. Не стоит использовать много шрифтов

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

Я рекомендую новичкам брать 2 шрифта — один основной (для крупных заголовков), второй — для наборного текста, например для подзаголовков и описаний.

Не ошибетесь, если возьмете шрифты из одного семейства, но разного начертания. Например Roboto Bold для крупных заголовков, а Roboto Regular — для подзаголовков и другого наборного текста.

Также хорошим приемом считается сочетание шрифта с засечками и без засечек. Их можно комбинировать по разному, например для заголовка Playfair Display (с засечками), а для подзаголовка Roboto (без засечек). Или наоборот.

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

7. Не стоит использовать подчеркивание в тексте

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

8. Вопросительный знак в конце заголовка

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

Тут правило простое: если мы в посте или на баннере что-то спрашиваем, интересуемся — знак вопроса ставится, если сами рассказываем — не ставится. Т.е. если вы у подписчиков спрашиваете «Как сделать обтравочную маску?», то вопрос ставить надо, а вот если вы написали статью «Как сделать обтравочную маску» и в ней подробно все объясняете, то вопрос не ставится. Вроде бы все очевидно, но ошибки встречаются очень часто.

9. Использование цвета в тексте

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

У многих, кто не в теме, это прям боль-боль.... Намерения благие — чтоб красиво было. Но это, во-первых, выглядит не красиво, а по-детски. А во-вторых, ухудшает восприятие самого текста — внимание рассеивается, непонятно что из этого текста важное, а что не очень, в глазах радуга и читать совсем не хочется.

10. Когда писать букву «ё»

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

Так вот. У нас есть правила русской орфографии и пунктуации, согласно которым употребление буквы «ё» может быть последовательным и выборочным.

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

В обычных печатных текстах буква «ё» употребляется выборочно (вот это наш случай). Рекомендуется употреблять её в следующих случаях:

1. Для предупреждения неправильного опознания слова, напр.: всё, нёбо, лётом, совершённый (в отличие соответственно от слов все, небо, летом, совершенный), в том числе для указания на место ударения в слове, напр.: вёдро, узнаём (в отличие от ведро́, узна́ем).

2. Для указания правильного произношения слова — либо редкого, недостаточно хорошо известного, либо имеющего распространённое неправильное произношение, напр.: гёзы, сёрфинг, флёр, твёрже, щёлочка, в том числе для указания правильного ударения, напр.: побасёнка, приведённый, унесённый, осуждённый, новорождённый, филёр.

3. В собственных именах — фамилиях, географических названиях, напр.: Конёнков, Неёлова, Катрин Денёв, Шрёдингер, Дежнёв, Кошелёв, Чебышёв, Вёшенская, Олёкма.

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

11. Не стоит использовать обводку у текста

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

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

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

12. Правильно оформляйте маркированные списки

Частая ошибка на баннерах – неправильно подобранные буллиты и выравнивание маркированных списков.

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

2. Выравнивание. Научитесь правильно делать абзацные отступы, чтобы список действительно выглядел как список, а не как сплошной текст.

13. Используйте визуальную иерархию заголовков

Ну вот признайтесь честно, ведь всегда на баннере хочется выделить сразу все, чтобы наш читатель сразу заметил все важные мысли, которые мы хотим до него донести:)) Они же действительно ВСЕ важные, не так ли?

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

И самый простой способ выделить главное – это размер. Если что-то больше, чем остальные элементы, оно выглядит главным, самым важным. Пользуйтесь этим правилом, когда располагаете на баннере несколько разных заголовков. Задавайте направление взгляда ваших читателей. Обозначьте «точку входа» крупным размером и дальше «ведите» читателя за ручку по остальным важным местам.

14. Цветовой контраст между текстом и фоном

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

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

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

15. Правильно оформляйте ссылки на баннерах

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

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

Уберите лишний мусор – протокол безопасности «https://». Эта часть не обязательна для ввода адреса в строке браузера и только ухудшает восприятие нужной информации. Также постарайтесь, чтобы «id» ваших сообществ и страниц был запоминающимся и коротким, а не «/id32754081». Буквенный id даже можно выделить более жирным начертанием, т.к. именно эту часть можно запомнить, а остальные символы – это стандартная часть всех ссылок ВК.

16. Правильно пишите цены на баннерах

✅ Используйте знак рубля вместо неуклюжих «руб.» и «р.». Знак рубля всегда должен стоять с отбивкой от числа. В первом комментарии к этому посту прикреплен шрифт rouble.otf, содержащий знаки рубля для самых распространенных шрифтов и пояснение как им пользоваться.

✅ Отбивайте пробелами разрядность чисел, у которых 5 и более цифр. То есть у четырехзначных цен пробел не ставится – 1200 рублей, 5000 рублей, но 25 000 рублей.

✅ При указании старой и новой цены выделяйте новую цену, именно на ней стоит акцентировать внимание, а не пугать пользователя старой ценой. Используйте зачёркивание старой цены вместо слов «старая» и «новая» цена. Это выглядит аккуратнее и компактнее.

17. Правильно оформляйте время мероприятий на баннерах

✅ Сочетания типа «16:30», «19:00», «22:04» пишутся через двоеточие. Часы и минуты пишутся не через запятую, точку или дефис, а только через двоеточие;

✅ Сочетание «16:30» при обозначении времени самодостаточно и не требует при себе слов «минут» или «часов». Но все же запись «16 часов 30 минут» тоже корректна, хотя она более громоздка, а на баннерах желательно писать более компактно. Промежуточные варианты «16:30 минут» или «16 часов 30» неправильны;

✅ Когда речь идет о полуночи, выбор между вариантами «00:00» или «24:00» зависит от того, говорите ли вы о конце дня (24:00) или о начале (00:00). То есть «Наш ресторан работает с 07:00 до 24:00» или «Наш ресторан работает с 00:00 до 22:00». Написание «24:02» уже нельзя признать нормативным — только «00:02», в связи с чем вариант «00:00» побеждает «24:00», даже когда речь идет о конце дня.

18. Учитывайте оптический вес знаков препинания

Не стоит полностью полагаться на точные инструменты выравнивания Фотошопа, так как программа не может учесть человеческое восприятие формы и размера.

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

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

А человек видит, что знак препинания, попавший на край строки, зрительно сдвигает её от центра, нарушая симметрию. Больше всего портят симметрию многоточие и тире.

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

19. Учитывайте визуальный вес объектов при выравнивании текста с плашками

Выравнивание делать относительно текста или плашки – таким вопросом наверняка озадачивался каждый новичок, когда в заголовке или подзаголовке нужно разместить 1-2 слова на плашке.

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

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

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

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

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

20. Как лучше делать наклон у заголовков на баннерах

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

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

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

Так вот в первом случае, когда мы делаем наклон, вертикальные оси текста остаются на месте и они имеют визуальную связь с вертикальными сторонами баннера. А при повороте текста полностью разрушаются все связи – как горизонтальные, так и вертикальные. Текст выглядит отстраненно от макета.

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