«Этот блог читают обычно маркетологи и медиаменеджеры. Чтобы рассказать им про типографику просто и понятно, я пошел на хитрость: усадил перед собой кота и начал свой рассказ. Постарался коротко, пока он не убежал».
Кажется, в баннерах для социальных сетей нет никакого “чуда дизайна”: они бывают горизонтальные, квадратные, вертикальные. Внутри — картинка, текст и логотип. Логотип, конечно, нужно покрупнее 🙂 Как сказал когда-то графический дизайнер Владимир Кричевский в журнале «КАК», картинка без букв, без шрифта никогда не станет дизайнерским решением — она, картинка, слаба и немощна. Только типографика ей придаёт особую значимость. Наклей на фотографию своей любимой собачки вырезанную из журнала текстовую строку, чтобы в этом убедиться.
Так вот, типографика — это набор правил оформления печатного текста. Следуя этим правилам, вы заботитесь о пользователях, которые увидят ваш баннер в соцсетях, ведь благодаря типографике, он становится приятным и легким для восприятия. Именно об этом я и расскажу в статье.
В 2006 году Оливер Райхенштайн посчитал, что более 95% информации в веб-дизайне представляет собой печатный текст. С тех пор многое изменилось, но текст до сих пор играет важную роль.
Но не будем углубляться в историю, а выделим некоторые “фишечки”, с помощью которых твой макет «заиграет». Эти простые истины будут полезны тебе, мой маленький кот, и маркетологам — тем, кто выступает заказчиком, а вот для дизайнера не станут откровением.
Дано:
Дизайнер всю ночь работал над картинкой, и вот ты получаешь результат, но в нем что-то не то… Чтобы дать подрядчику качественные, понятные правки, нужно понимать, что придает типографике выразительности.
1. Контраст в шрифте. Самое важное в баннерах для соцсетей — быстро и понятно донести сообщение. У твоей картинки будет доля секунды, чтобы заинтересовать пользователя, потом ее проскроллят. Поэтому не усложняй. Чем короче и контрастнее будет твой призыв к действию (call to action), тем лучше. Контрастнее он может быть не только по отношению к фону, но и другим элементам. Контраст — это не только про цвет, но и размер и форму.
Ещё можно пользоваться размером как громкостью или важностью. Текст может кричать, а может шептать.
Текстовые элементы примерно одинакового размера выглядят очень скучно, а ещё непонятно, как их сравнивать по ценности в однородной массе.
2. Количество шрифтов. Количество шрифтов прямо влияет на читаемость и легкость восприятия текста. Чем больше разных шрифтов и кеглей в макете, тем пользователю сложнее его понять. Поэтому пары вполне достаточно.
3. Длина строки и интерлиньяж. Тут все просто: чем длиннее строка, тем крупнее нужен шрифт и, соответственно, больше интерлиньяж (межстрочное расстояние). Правильное использование пробелов между параграфами помогает пользователю понять текст. Но есть нюанс. Дизайн — не точная наука, поэтому можно экспериментировать
4. Межбуквенный интервал и выравнивание текста. Выровнять текст можно по левому или правому краю, посередине и формату. Так вот, про выравнивание по формату сразу забываем и не используем. Сложно придумать что-то хуже для баннера, ведь в тексте все время будут «дыры». А ещё, большой материал будет медленнее читаться.
Универсальный вариант — выравнивание по левому краю, потому что большинство из нас читает слева направо. При выравнивании текста по центру лучше и все остальные элементы расположить по центральной оси.
5. CAPS LOCK — НЕ ВСЕГДА ХОРОШО. Короткий текст можно набрать заглавными буквами. Но там, где необходимо сосредоточиться, такой прием лучше не использовать. Эксперты отмечают, что материал, написанный строчными буквами, читается гораздо быстрее.
6. Тире или дефис. Дефис и тире — это два разных знака, которые не могут взаимозаменять друг друга. Ознакомьтесь с правилами русского языка, чтобы не делать ошибок.
7. «Висяки». Если предлог или союз стоит в конце строки, он называется «висячий». Визуально будет казаться, что он небрежно «торчит» из строки, поэтому лучше перенести его на следующую, а тире, наоборот, переносить не нужно.
8. Ёлочки или лапки. Кавычки-ёлочки — это основной формат кавычек. Запоминаем: лапки живут внутри ёлочек.
9. Ошибки. Проверь текст дважды перед тем, как согласовать макет. Это поможет избежать ошибок и обидных страйков от коллег.
Еще полезные мелочи:
В заключение хочется процитировать известного дизайнера Сергея Кужавского: «Хорошая типографика незаметна, но делает чтение приятным и удобным». А от себя добавлю, что большинство стараний с текстом незаметно глазу, мой шерстяной кот и маркетологи, но это не значит, что нужно опустить лапки.