Как сочетается цвет и шрифт в дизайне
Искушенный читатель скорее всего подумает, что данная статья не относится к теме фотографии. И он будет прав, но касательно фотографии, как самодостаточного явления. Наш мир разнообразен и многогранен и это вполне обычное явление, когда одни сферы деятельности пересекаются с другими. А значит, нам приходится сталкиваться с ситуациями, когда клиенту хочется сделать более качественную продукцию: свадебные, семейные фотографы создают фотокниги — без использования шрифтов ну никак! Занимаетесь рекламной фотосъемкой — не редко может понадобиться клиенту сделать инфографику или нанести рекламный текст непосредственно на снятый кадр — опять необходимо умело подобрать шрифт. Выпускаете свою фотокнигу или работаете на арт рынке — красивая подача печатного материала вместе с вашими графическими работами — архиважная составляющая успеха. Именно по этой причине, я считаю, что уметь работать со шрифтами, «вкусно» сочетать цвета и форму очень важно, для получения конечного качественного продукта.
#1 Монохром — это не должно быть скучно
Черно-белая — самая старая комбинация цветов в полиграфии, но при использовании в правильном контексте она может быть далека от таковой. Монохром может быть мятежным или элегантным и стильным. В качестве примера обратите внимание на премиум бренды Vogue и Chanel, использующие монохромные сочетания для создания респектабельного эффекта.
По своей природе такое сочетание является минималистичным и суровым. По этой причине шрифты в такой цветовой гамме органично использовать без засечек, что сразу придает им модернистскую атмосферу. Для наглядности обратите внимание на простые шрифты Acre, Futura идеально подходящие для черно-белого использования.
#2 Добавьте акцентирующий цвет, что бы оживить черно-белый шрифт
В ряде случаев, несмотря на все ваши усилия монохромный шрифт может выглядеть неказисто. Если после продолжительных поисков нужного шрифта в вашей библиотеке ни один так и не заиграл как нужно, попробуйте приправить его акцентирующим цветом.
Насыщенные основные цвета, как красный, желтый имеют магическую способность оживлять монохромные шрифты.
Попробуйте цветом выделить заголовок, ключевое слово, точку или тире, что бы добавить немного драматичности. Эти хитрости позволят привлечь внимание читателя к выбранному участку текста, но главное — не переусердствуйте.
#3 Инвертируйте фон и шрифт для достижения большего эффекта
В полиграфии традиционный подход состоит в сочетании цветного или черного шрифта с белым или бледным фоном, но в некоторых случаях инвертирование может быть очень уместно. Размещение светлого текста на темно фоне фокусирует внимание читателя, в тоже время темный фон выступает в роли рамки, помогающей кадрировать текст. Такой подход очень часто используют в рекламных сообщениях.
Следите что бы текст был читаемым — рекомендуется установить более жирный тип шрифта из семейства или поставить крупнее кегль. Для текста на светлом фоне, наоборот размер шрифта можно немного уменьшить.
#4 Использование нескольких цветов? Только из одной цветовой группы
Мультицветовой подход к оформлению шрифтов может быть невероятно эффективным, но сопряжен со сложностями цветовой гармонизации.
Многоцветие может выглядеть раздражающим, устаревшим или просто непривлекательным. Очень важный совет в такой ситуации — придерживаться цветовой палитры из одной группы, что бы получать гармоничный результат. Вы можете попробовать палитру пастелей, неоновых цветов, основных цветов, что бы получить приятный результат. В конце концов, выкопайте из глубин памяти цветовой круг, о котором вы могли узнать на курсе фотографии и воспользуйтесь его онлайн версией на сайте Adobe, для подбора гармоничных сочетаний. Всё еще сомневаетесь — попробуйте привязать многоцветный дизайн к нейтральному серому или черному, что бы сместить акцент.
#5 Неон на черном — всегда работает
Несколько последних лет стали свидетелями долгожданного возрождения печатной неоновой продукции. Цветовая палитра 80-х выглядит свежо и современно, когда она расположена на глубоком черном фоне. Неоновый шрифт на черном всегда работает и вызывает ассоциации с ночными клубами и вывесками для мотелей. Помимо прочего, это прекрасная возможность создать обрамление для вашего макета и вдохнуть в него требуемую атмосферу.
Попробуйте использовать сочный розовый (C=0 M=88 Y=0 K=0) или лаймовый желтый (C=7 M=0 Y=87 K=0) для шрифта, который невозможно не заметить!
#6 Смягчите фон для придания винтажности
Стремитесь добиться полного погружения в винтажность? Помимо выбора классического шрифта (напр.: Akzidenz Grotesk), попробуйте разбавить ваши цвета, для придания им эффекта выцветания и налета времени. Вы можете существенно усилить эффект винтажности, используя не белый фон, а цвет овсянки или легкий бежевый (C=8 M=4 Y=17 K=0). Такой фокус имитирует оттенок изношенной бумаги, придающий вашему дизайну эффект старины.
#7 Радуга может смотреться… легендарно!
Цвета радуги занимают центральное место в мире моды и попкультуры. Помимо природной красоты и гармонии цветов радуги, немалый толчок к их популяризации приложили ЛГБТ сообщества. На сегодня всё большее распространение в дизайне набирают такие цветовые решения и очень красивым примером может служить полноцветный шрифт Gilbert.
Радужная палитра, в которой собран весь спектр хроматических цветов беззаботна, весела и оптимистична. Это отличное решение для макетов — установите отдельные цвета для букв как в считалочке — каждый охотник желает знать где сидит фазан.. 🙂
Для сохранения стильности палитры и во избежание «оребячивания» ограничьтесь применением такого подхода к избранным словам или фразам, а остальной текст оставьте чёрно-белым.
Надеюсь, вам были полезны приведенные выше 7 советов о цветовом сочетании шрифта.
Выбор цвета и шрифта для рекламы
Выбор цвета и шрифта для рекламного обращения – параметр не менее важный, чем структура самого обращения.
В данном аспекте важно во-первых, привлечь внимание, во-вторых, создать максимально комфортные условия для зрительного восприятия обращения – тогда больше шансов, что его прочитают до конца.
Цвет
Прежде всего, определимся, делать рекламу цветной или черно-белой.
Психологами доказано, что цветные объявления привлекают внимание намного больше, чем черно-белые.
Поэтому если есть возможность использовать палитру из хотя бы двух цветов, этим желательно воспользоваться.
Согласно исследованиям, воспринимаются наиболее положительно и больше притягивают взгляд следующие цветовые сочетания:
- Черные буквы на желтом фоне.
- Зеленые буквы на белом фоне.
- Красные буквы на белом фоне.
Также следует обратить внимание на то, как воспринимаются различные цвета:
Красный – очень интенсивный, «активный» цвет, он сразу обращает на себя внимание. Это цвет страсти, который просто не может оставить наблюдателя равнодушным. Однако с ним надо быть осторожнее, потому что переизбыток будет оказывать нежелательное воздействие: утомит и вызовет раздражение.
Желтый – цвет радости, позитива. Используя его, вы получите и другое преимущество: желтый зрительно увеличивает площадь, на которой используется, придает ощущение объема. Однако не стоит использовать слишком много интенсивно-желтых элементов: этот цвет способен легко утомить.
Голубой, синий – цвета холодной части спектра. Светлые оттенки также придают ощущение объема. Они дают чувство спокойствия (темные оттенки – стабильности и шика), подталкивая вдумчиво и рассудительно вчитываться в информацию.
Оранжевый и черный – буквально притягивают внимание человека. Однако это сочетание вызывает чувство тревоги (обратите внимание, многие сигналы или, скажем, знаки, которые вызваны предупреждать, имеют именно такую окраску).
Зеленый – цвет спокойствия, уверенности и надежности. Светлые оттенки более игривы. Как правило, зеленый воспринимается достаточно положительно, главное – подобрать хорошее «обрамление» для этого цвета.
Белый – цвет чистоты, придает дополнительный объем, как бы «расширяет» пространство рекламного обращения. Белый – универсальный фон для какого-либо текста, он традиционно используется наиболее широко.
Выбирая палитру для рекламного обращения, следует избегать следующих решений:
- Ни в коем случае нельзя давать большие объемы текста «вывороткой» (светлые буквы на более темном фоне).
Это очень быстро утомляет и в конечном итоге приводит к тому, что рекламное обращение игнорируют. Однако допустимо использовать этот прием для небольших частей рекламного обращения, дабы особенно выделить их, подчеркнуть значимость подаваемой таким образом информации. - Использование несочетаемых цветов. Зеленые буквы на красном фоне, вне всякого сомнения, очень оригинальное решение. Вот только привлечет оно разве что маленьких детей, которым интересны все яркие предметы. Более взрослая аудитория будет воспринимать такую рекламу как безвкусную, уже не говоря о том, что снижение читаемости информации приводит к ее игнорированию.
- Использование бледных оттенков для текста при белом или светлом же фоне. Для того, чтобы «зацепить» аудиторию, пастельные тона не всегда годятся.
Это очень быстро утомляет и в конечном итоге приводит к тому, что рекламное обращение игнорируют. Однако допустимо использовать этот прием для небольших частей рекламного обращения, дабы особенно выделить их, подчеркнуть значимость подаваемой таким образом информации.Помните: не люди должны читать вашу рекламу просто благодаря тому факту, что она есть, а вы должны создавать такие условия, чтобы ее прочли. Всегда найдется определенный процент целевой аудитории, который не имеет активной заинтересованности в вашем предложении.
Шрифт
Современные технологии предлагают колоссальную свободу в выборе шрифта для рекламы.
Однако вы помните, что руководствоваться исключительно своими предпочтениями нежелательно, выше мы уже уточняли, почему.
Поговорим теперь о том, как должны выглядеть сами буквы, чтобы они вызывали интерес.
- Для рекламы рекомендуется использовать шрифт с засечками. Мы привели для вас пример букв такого шрифта. Посмотрев на рисунок, вы сразу сможете понять, что означает этот термин: вертикальные элементы каждой буквы сделаны с горизонтальными «палочками» (могут быть выполнены как в виде прямоугольников, так и иметь скругления). Эти «палочки» — ориентиры для наших глаз: взрослый человек, обладающий достаточными навыками в чтении, читает «по вершинам» — то есть, взгляд направлен на верхнюю часть букв, по их очертаниям и распознаются знакомые символы.
- В целом же шрифт должен быть легкочитаемым (то есть, давать большие объемы информации рукописным шрифтом или буквами с оригинальными очертаниями бессмысленно – изящная вязь может вызвать интерес, но будет препятствовать быстрому прочтению и восприятию информации).
- Кегль шрифта следует выбирать исходя из конкретной ситуации. Большие буквы привлекают внимание, выделяют информацию. Однако не стоит давать большие объемы текста только заглавными буквами – это утомляет.
- С выделениями текста полужирным начертанием тоже следует быть осторожными: это может утомлять и снижать читаемость.
В целом, универсальный совет, который можно дать тому, что выбирает цветовую палитру и шрифт для рекламы, будет звучать так: во всем хороша умеренность. Используя простые приемы, которые проверены многолетней практикой и воздерживаясь от крайностей, можно создать такую рекламу, которая только своим внешним видом будет привлекать людей и располагать к себе.
Цветовой контраст для лучшей читаемости
Когда вы создаете цветовые палитры для своих проектов веб-дизайна, проверяете ли вы цветовые комбинации на контрастность? Если нет, возможно, вы не учитываете возможную читабельность дизайна и, таким образом, теряете потенциальную аудиторию.
Я работал над процессом, который поможет мне обеспечить хороший цветовой контраст и удобочитаемость в моих проектах. Благодаря некоторым полезным инструментам доступности цветового контраста, я думаю, что у меня есть кое-что, что работает, и я хотел бы поделиться с другими, если вы тоже сочтете это полезным.
Должен отметить, что я далеко не эксперт по доступности. Моя цель – просто показать, что небольшое усилие может иметь большое значение, когда дело доходит до выбора цветов с учетом оптимальной читабельности. Проверьте W3C для более подробного объяснения. Кроме того, ознакомьтесь с Contrast Rebellion, чтобы узнать о проблеме контраста.
1. Создайте цветовую палитру (с оттенками, тонами и оттенками)
Хотя вы можете использовать инструменты цветового контраста, чтобы помочь вам установить цветовую палитру, вы также можете использовать инструменты, чтобы помочь найти хорошие варианты в существующей палитре. В этом случае я использую уже существующую цветовую палитру и показываю, как я использую оттенки, тона и оттенки, чтобы помочь создать больше вариантов цветового контраста.
Моя рабочая цветовая палитра. Из предыдущей статьи Добавление цветов в палитру с помощью смешивания цветов.
Определение оттенков, тонов и теней. Из предыдущей статьи «От тьмы к свету: универсальность цвета с использованием оттенков, тонов и оттенков».
2. Найдите хороший анализатор цветового контраста
В Интернете доступно множество хороших инструментов для тестирования цветового контраста. Найдите тот, который вам подходит, и используйте его для проверки комбинаций цветов фона и переднего плана. Вот несколько вариантов:
- Colorable (Demo) Brent Jackson (*новый фаворит* h/t @JimJones)
- Luminosity Color Contrast Ratio Analyser от Juicy Studio
- Color Contrast Check от Jonathan Snook
- Color Contrast Checker от WebAIM 9 0026
- Проверить мой Colors by Giovanni Scala
- Color Safe от Donielle Berg & Adrian Rapp
Colorable Brent Jackson (Demo)
значения.
Обычно я начинаю с нейтральной цветовой палитры и стремлюсь к самому светло-серому с рейтингом WCAG AAA (соответствие разделу 508). Рейтинг AAA обеспечивает оптимальную читаемость, а некоторая яркость обеспечивает мягкость текста. Обратите внимание, что названия цветов — это пользовательские имена, которые я присвоил цветам (из предыдущей статьи Придание цветам более красочных имен). Тестирование нейтральной цветовой палитры в виде текста на белом фоне (из предыдущей статьи: «Оттенки серого — да, правда»).
4. Оцените яркость кнопок и ссылок
Следующим шагом будет поиск подходящего цвета для кнопок и ссылок (действий). Здесь я использую немного другой подход. Вместо AAA я ищу AA (разумный стандарт, к которому нужно стремиться), чтобы получить более яркий цвет, контрастирующий со статическим текстом, и привлечь внимание к важным ссылкам. Для этих целей я тестирую белый цвет (#FFFFFF) в сочетании с различными цветами.
У синего и красного цветов шанс успеха выше, а у желтого и зеленого меньше.
Я использую «Darkest Alice» (#107896) из-за хорошего сочетания контраста и яркости. «Рубин» (#C02F1D) тоже неплохой вариант.
5. Установите различные цветовые комбинации
Хорошо определить некоторые дополнительные цветовые комбинации для привлечения внимания и других возможных потребностей.
Мой базовый пример с темно-серым текстом «Ворон» и ярко-синим цветом «Самая темная Алиса» для ссылок и кнопок.
Пример с темными цветами на светлом фоне.
Пример с подсветкой на темном фоне.
6. Документ в вашем руководстве по стилю
Последний шаг — держать под рукой справочное руководство с результатами теста, добавляя примечания к вашему руководству по стилю. Ваши клиенты и аудитория будут впечатлены тем, что ваши цвета выбраны по обдуманным причинам — оптимальной читабельности, — и вы пройдете тестирование качества с дополнительными параметрами, если они вам понадобятся.
Образец документации для руководства по стилю.
Резюме
Это все, что нужно, но вы можете разбить это на три еще более простых фрагмента, если хотите:
- Текст для чтения: копии вашего тела (тяжелая работа).
- Ссылки действий: Для ссылок используйте яркие и контрастные цвета, чтобы было понятно, где находятся действия. (Если вы все сделали правильно, будет некоторый контраст между текстом для чтения и ссылками действия.)
- Экстра, Экстра!: Создавайте и документируйте различные цветовые комбинации для выносок, призванных привлечь дополнительное внимание.
См. также:
Примечание. Эта статья является частью серии статей о цвете, связанном с веб-дизайном. Чтобы узнать больше об этой серии, ознакомьтесь со следующими статьями:
- Использование словесных ассоциаций для выбора фирменных цветов
- Добавление цветов в палитру с помощью смешивания цветов
- Оттенки серого — да, правда
- Присвоение цветам более красочных названий
- От тьмы к свету: универсальность цвета с использованием оттенков, тонов и теней
- Сигнал и шум: цвет как инструмент навигации
- Использование визуальной громкости для лучшего поиска пути
- Design Systems at Viget 900 37
Основные цветовые сочетания между цветом текста и фона • Silo Creativo
$89
Все наши премиальные темы в комплекте тем
ТемыКогда мы разрабатываем плакат, журнал, веб-сайт или блог…., любой графический элемент, в который включены шрифты и фон, очень важно учитывать комбинаций фона и текста , так же, как мы делали это со шрифтами.
Мы уже знаем психологию многих цветов, используемых в дизайне, поэтому можем определить их использование. Ну, а когда речь идет о текстах, которые печатаются на фонах, то над всеми должна преобладать читабельность из них. Мы не можем заставить читателя быстро устать. Итак,
Если мы работаем с фоновыми изображениями, как показано в этих примерах, лучшим решением будет написать сообщение белым цветом. При чтении текста, независимо от его размера, прежде всего надо искать контраст между цветом фона и текста , поэтому на фоне преобладают яркие цвета, белый цвет всегда будет хорошим выбором. Если нет контраста, читаемость невозможна.
Итак, сегодня я покажу вам
Черное и белое
Это самое известное и неизменное сочетание. Текст, который вы сейчас читаете, черно-белый, и 95% печатных текстов, таких как журналы, газеты… развиваются таким образом. Для длинных текстов, которые нужно читать, идеальное сочетание. Это лучшая комбинация для внимательного чтения. Это самый большой контракт из всех, светлых и темных, поэтому сообщение передается более четко и прямо.
Однако при выполнении негатива этой композиции, т.е. белого на черном, читабельность ухудшается, из-за чего тексты теряют значимость.
Желтый и черный
Это хорда предупреждающих знаков . Это лучшая комбинация для чтения.