Как увеличить читабельность текста на картинке за 15 минут

Повышаем читабельность текста на картинке с помощью шрифтов и цвета

Ежедневно мы скролим километры лент в соцсетях и видим тысячи публикаций. При такой информационной насыщенности у мозга есть всего доля секунды, чтобы оценить степень важности или интересности каждого нового поста.

Если текст на анонсе будет подан хаотично и неаккуратно, на него не кликнут — и важную ссылку пропустят. Графика с текстом требует максимальной простоты, легкости и чистоты — только так она сработает вам на руку.

Чтобы текст на иллюстрации был читабельным, следуйте этим 10 рекомендациям, которыми поделились в serpstat.com.

Примеры графики сделаны на графическом онлайн-редактор Crello.

Как фон влияет на читабельность текста на картинке

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

Если цвет шрифта менять не хочется, поработайте с контрастностью фона:

• Затемните или осветлите многоцветную картинку.

• Используйте цветной или градиентный фильтр.

• Размойте фон, чтобы сделать его менее интенсивным.

Читатель не должен всматриваться и расшифровывать надпись на анонсе, у него нет времени играть в угадалки. Информацию нужно донести с первого взгляда. Если ради этого нужно пожертвовать «красотой» и убрать фон, жертвуйте.

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

Значимость плашек для увеличение читабельности текста

Если правильного фона нет, а менять фотографию не хочется, добавьте контрастную плашку и поставьте текст на нее.

Плашка может быть строгой геометрической формы или «пятном», ее можно сделать общей на весь блок, под каждую строку или даже под каждое слово.

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

Как интеграция текста в дизайн воздействует на внимание читателя

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

Если текст плохо смотрится на фоне в том объеме, в котором вы думали изначально, разбейте его на фрагменты и распределите по контрастным фонам внутри картинки. Так вы убьете двух зайцев — сделаете слова частью визуальной истории и решите вопрос с контрастным фоном.

Отдельные буквы и слова можно использовать в роли полноправных элементов, но важно, чтобы это было естественно.

Цветовые сочетания увеличивают вовлеченность

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

Чтобы глазу было приятнее, берите не черный, а темно-серый, и не белый, а алебастровый. Ориентируйтесь на собственные эстетические ощущения — если цветовое сочетание режет глаз, хладнокровно отбросьте вариант. Понять, какие оттенки хорошо смотрятся вместе, помогут сервисы вроде Coolors, Paletton и Adobe Color CC. Там легко собрать свою палитру или взять уже готовые.

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

Повторные элементы привлекают читателей

Любое ненавязчивое повторение — оттенков, элементов, стилей шрифта — помогает графике смотреться собранно и целостно. Так в иллюстрации появляется ритм, как в стихотворении.

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

Шрифт как способ самовыражения для читателя

Как и цвет, шрифт создает атмосферу — игривую или сдержанную, простую или вычурную, деловую или интимную.

Подбирайте шрифт с учетом того, какую тональность несет ваше сообщение: тонкий строгий для деловых сообщений, крупный геометрический для активных фраз и витиеватый для нежно-эмоциональных.

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

Внимательный подбор расстояния текста увеличивает читабельность

В зависимости от шрифта, расстояние между буквами и строками может быть разным. Обычно шрифты по умолчанию собраны с хорошими интервалами, но иногда расстояния нужно настраивать. Например, когда текст не помещается на фон, «висит» строка или при увеличении букв расстояние получается слишком большим.

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

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

Принципы  иерархии в заголовках и текстах

Ключевой заголовок, объясняющий подзаголовок и детализирующий основной текст — эта иерархия работает как в крупных формах, так и в тексте маленького объема на иллюстрации.

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

Как контраст привлекает и отталкивает читателя

Цвет или подложка — далеко не единственный способ выделить слово. Можно использовать несколько шрифтов в одной надписи, создавая контраст и приятное напряжение. Хорошо объединяются шрифты с засечками и без. Но не увлекайтесь — баланс и сочетаемость должны быть на первом месте.

Не всегда то, что выделено крупными буквами и болдом, доминирует — внимание всегда привлекает «инородный» элемент. В окружении тяжелых букв крупного размера несколько тонких слов будут перетягивать взгляд на себя. Это тоже контраст.

Не допускайте конфликта. У контрастных элементов должно быть что-то общее — то, что их гармонизирует.

Читать подробно: маркетинговая стратегия для юридического бизнеса на 2022

Сгруппированные тексты иллюстрации воспринимаются лучше 

Не размещайте на иллюстрации много мелкого текста вместе с изображениями. Исключения составляют важные сообщения и цитаты, но в таком случае текст должен занимать 80-90% пространства.

Соберите текст в целостный блок и разместите его на иллюстрации по композиционному «правилу третей». Даже если каждая из строк занимает свою плашку или у вас несколько смысловых акцентов — все они должны соединиться в одно компактное целое.

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

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

1. Текст должен легко читаться, для этого делайте достаточно контрастный и размытый фон.

2. Если не хочется затемнять фон, добавьте под текст плашку

3. Вписывайте текст в шаблон. Используйте детали дизайна, чтобы сделать акцент на отдельных словах

4. Аккуратно подбирайте цветовые сочетания с помощью Coolors, Paletton

5. Повторение элементов делает дизайн целостным и эстетически привлекательным

6. Подбирайте шрифт под тему и настроение сообщения

7. Настройте баланс расстояния между буквами и словами

8. Соблюдайте иерархию в размерах: чем крупнее кегль, тем больше значимость этого текста

9. Добавляйте контраста с помощью разных шрифтов и элементов дизайна

10. Сгруппируйте текст на картинке: либо по центру, либо следуя правилу третей

Читайте подробно о том, как развить личгный бред через соцсети