Правила оформления нужны для того, чтобы создавать эффективные баннеры, которые легко будут доносить информацию до аудитории. Также они создают положительное первое впечатление. Хороший баннер должен быть читабельным и понятным. Правильное расположение текста, читабельные шрифты, хорошо подобранные цвета помогут передать посыл без затруднений.
В этой статье поговорим о типографике баннеров.
Типографика — это всё, что касается оформления текста в дизайне: шрифты, размер, цвет и начертание букв.
Рассмотрим основные правила типографики:
Сочетания шрифтов
Самые известные шрифты: Montserrat, Open Sans, Roboto, Arial, Helvetica, Futura, Times New Roman и другие.
Все шрифты делятся на два вида:
- Шрифты с засечками (антиквы) применяют, когда хотят придать тексту более серьезный и официальный тон: в книгах, новостях или объявлениях в общественных местах.
- Шрифты без засечек (гротески) часто используют на веб-сайтах, в онлайн-сервисах и приложениях: они облегчают восприятие текста, помогают передать современность и практичность.
Чтобы понять разницу, посмотрите на примеры шрифтов:
Следует использовать не больше 2−3 шрифтов на одном баннере!
Хорошо сочетаются либо очень контрастные шрифты либо либо шрифты из одной группы, но с разной жирностью (т.е. разные начертания одного шрифта). Первый вариант сочетания шрифтов довольно рисованный и хорошо получается только у опытных дизайнеров с насмотренностью.
Новичкам и тем, кто не хочет погружаться в дизайн, проще прибегать ко второму варианту сочетания шрифтов. Этот вариант более выигрышный и надёжный.
Обычно на баннере достаточно использовать базовые начертания одного шрифта Bold, Regular, Thin.
Список всех базовых начертаний:
- Thin — тонкий;
- Regular — обычный;
- SemiBold — полужирный;
- Bold — жирный;
- ExtraBold — экстражирный.
Также, если шрифт хороший, он поддерживает все эти начертания, но с наклонном,
Для заголовков лучше подходят Bold, SemiBold, ExtraBold, для подзаголовков — Italic, для основного текста — Regular и Thin.
Размер шрифта (кегль)
Размер заголовка должен быть больше, чем размер текста. Есть специальная формула расчета — размер текста * 1,6 = размер заголовка. Допустим, вы выбрали размер текста 16, умножьте его на 1,6, и вы получите идеальный размер заголовка.
Крупный шрифт используем для наиболее важной информации, средний — для подробного описания, а мелкий — для заметок и комментариев.
Межстрочное расстояние (интерлиньяж)
Межстрочное расстояние (или интерлиньяж) — это расстояние между строками в тексте. Зачастую оно составляет 120−125% от используемого размера шрифта (1,2 — 1,25 в Canva). Допустим, размер шрифта 16. Рассчитать значение можно по формуле: (16*120) / 100=19,2. Рекомендуемое межстрочное расстояние — 19.
Правило близости
Дизайн должен быть таким, чтобы пользователь с легкостью его «читал». Ему должно быть понятно, к какой части текста относится конкретный заголовок.
- Расстояние между буквами меньше, чем между словами.
- Расстояние между словами меньше, чем между строками.
- Расстояние между строками меньше, чем между абзацами.
Межбуквенный интервал (кернинг)
Кернинг — это расстояние между буквами.
Правильный кернинг может значительно повысить читабельность текста. Он помогает избежать слияния букв и делает слова более разборчивыми. В большинстве классических шрифтов он уже оптимальный, поэтому его лучше не менять, чтобы не потерять читабельность.
Обычно у шрифтов стандартно настроен оптимальный кернинг. Будьте осторожны, если захотите «поиграть» с ним. Но бывают случаи, когда изменить кернинг необходимо. Например, когда слово написано полностью капсом.
Как подбирать цвет текста?
Цвет шрифта может сильно влиять на восприятие информации и привлечение внимания. Выбирать нужно такой, чтобы текст легко воспринимался. Если фон светлый, то текст лучше набирать темным цветом, и наоборот. Контраст помогает тексту выделяться и делает его более читабельным.
По статистике лучшей читабельностью отличается черный шрифт на белом или не ярком желтом фоне.
Пользуйтесь онлайн-инструментами и приложениями, которые позволяют подбирать цветовые комбинации и проверять их контрастность. Например, Conratsr checker от coolors.co.
Выравнивание текста
Лучше выравнивать основной текст по левому краю. Выравнивание по левому краю обычно выглядит более аккуратно и организованно. Такой текст запоминается лучше, чем выровненный по ширине, и читается быстрее. Также это выглядит привычно: большинство текстовой информации вокруг нас выровнено по левому краю.
Иногда может неплохо смотрится выравнивание по центру, но только если текста немного, и строка не длинная.
Знание и соблюдение основных правил типографики помогут сделать хорошие баннеры, которые способны правильно донести информацию до аудитории. Надеемся, что информация была для вас полезной и поможет вам в будущем. А ещё мы будем рады помочь вам в вопросах SEO-продвижения, рекламы в интернете, разработки сайтов и запуска продаж на маркетплейсах. Оставляйте заявку ниже:
