Доби › Курсы › Курс: фото и оформление товаров для маркетплейсов › Шрифты и цвет

Урок 6. Шрифты и цвет

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

Урок 6 из 10 · Курс: фото и оформление товаров для маркетплейсов

Пройти курс с Доби

Регистрация по почте, карта не нужна. Потом 1654 ₽ за 30 дней, без автосписаний.

Шрифты: меньше — лучше

• Один-два шрифта на всю серию. Например, один для заголовков, второй — для пояснений, или одно семейство в разных начертаниях: жирное и обычное.
• Без засечек для тезисов. Простые гротески лучше читаются на телефоне в мелком размере. Декоративные и рукописные шрифты оставьте для редких акцентов, если они подходят товару.
• Жирное начертание для главного. Тонкие и светлые шрифты в превью почти исчезают.
• Проверьте кириллицу. Многие красивые шрифты не поддерживают русские буквы или не имеют «ё» и знака рубля — замены выглядят неряшливо.
• Без растягивания и сжатия. Если текст не влезает — сокращайте текст, а не деформируйте буквы.

Где взять шрифт легально

Шрифт — это объект авторского права, и пользоваться им можно на условиях лицензии. То, что шрифт установлен у вас на компьютере или скачан с сайта-сборника, ещё не значит, что его можно использовать в коммерческих картинках, а карточка товара — это именно коммерческое использование. Удобный путь — шрифты с открытой лицензией, которая разрешает коммерческое использование: многие такие шрифты собраны, например, в библиотеке Google Fonts. Но и там проверяйте условия лицензии конкретного шрифта и сохраняйте ссылку на источник — пригодится, если заказчик спросит.

Тезис и пояснение

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

Как сократить текст: примеры

Контраст и плашки

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

Цвет: основной, акцентный и нейтральные

Для серии хватает трёх ролей. Основной цвет задаёт настроение и обычно идёт на фон или крупные плашки. Акцентный — один, яркий, для значков, цифр и важного слова. Нейтральные — белый, светло-серый, тёмно-серый или почти чёрный — для текста и спокойных фонов. Удобное правило распределения: примерно 60% нейтрального или основного, 30% второго цвета, 10% акцента. Цвета проще всего взять из самого товара — пипеткой с фото крышки, этикетки, ткани — или из фирменного стиля продавца, если он есть. Так серия выглядит связанной с товаром, а не случайной.

Пример: слайд преимуществ термокружки

Слайд с преимуществами термокружки. Вместо абзаца про вакуумную изоляцию — тезис «Горячий 6 часов» крупным жирным шрифтом и ниже мельче «холодный — 10». Рядом ещё два блока в той же схеме: «Не протекает» — «даже вверх дном», «Крышка разбирается» — «легко отмыть». Фон — светлый оттенок терракотового с главного фото, цифры — акцентным цветом. Доби может показать этот пример в уроке и сравнить его с вашим слайдом.

Практика и куда свернуть

• Сделайте слайд «главные преимущества». Три тезиса с пояснениями, один-два шрифта, палитра из товара.
• Пришлите Доби слайд целиком и уменьшенным. Он проверит читаемость, иерархию и контраст и предложит, как сократить текст.
• Можно свернуть в фирменный стиль продавца, подбор иконок в одном стиле или в то, как подобрать цвета к товару, если он сам по себе белый или прозрачный.

Как спросить Доби

← Урок 5 · Урок 7 →

Пройти курс с Доби

Регистрация по почте, карта не нужна. Потом 1654 ₽ за 30 дней, без автосписаний.

Доби — ИИ-помощник. Он не ставит диагнозов, не назначает лечения и не заменяет врача, психотерапевта или юриста, когда нужна очная помощь. Сервис для тех, кому исполнилось 18 лет. Автор проекта — Кирилл Кижаев, Санкт-Петербург.