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

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. Используйте визуальную иерархию заголовков

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

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

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

Все эти посты размещены в группе по хэштегу
#Типографика@ilovebanners
Раздел будет пополняться, следите за новостями, подписывайтесь на группу и уведомления в ней :)