Как красиво выделить текст

Заголовок H1

Выделения с использованием элементов EM и STRONG — самые распространённые. Чаще используют EM , реже — STRONG .

Ниже приводятся элементы, которые можно использовать для специфических выделений.

Выделение терминов (DFN)

Для выделения терминов предусмотрен специальный строчный элемент DFN .

Браузер, как правило, показывает этот элемент на экране курсивом. Но стиль экранного образа всегда можно переопределить при помощи CSS.

Важно, чтобы в коде HTML-программы элементы использовались по их логическому и структурному назначению. Используя стилевые указания CSS, разработчик может задать собственное визуальное представление для любого элемента. Основы CSS излагаются на страницах темы 2.

Выделение компьютерного кода (CODE)

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

Основные рекомендации

Пользуйтесь выделениями в соответствии с заранее принятыми для вашего текста стилевыми соглашениями.

Старайтесь не делать в тексте слишком много выделений — текст будет лучше читаться.

Многочисленные выделения

• шрифт;
• размер шрифта;
• цвет (не рекомендуется);
• курсив;
• жирность.

Программа, которая позволяет смотреть гипертекстовые документы, называется БРАУЗЕРОМ .
Курсив, жирность, заглавные буквы.
Программа, которая позволяет смотреть гипертекстовые документы, называется браузером .
Шрифт, размер, цвет.
Программа, которая позволяет смотреть гипертекстовые документы, называется б р а у з е р о м .
Разрядка, подчёркивание и цвет (похожие на гиперссылку).

Как выделять правильно

Самое лучшее выделение — курсив. Оно мягкое, не утомляет глаза:

Программа, которая позволяет смотреть гипертекстовые документы, называется браузером .

Если курсивное начертание кажется слишком слабым, используют повышенную жирность:

Программа, которая позволяет смотреть гипертекстовые документы, называется браузером .

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

Элемент	Назначение	Вид (по умолчанию)
CITE	Цитата	Курсив
BLOCKQUOTE	Большая цитата	Блок с отступами
DFN	Термин	Курсив
CODE	Фрагмент кода	Моноширинный шрифт
EM	Выделение	Курсив
STRONG	Сильное выделение	Жирность

Изменение размера шрифта (BIG, SMALL, size)

Выделять фрагменты текста можно изменением размера шрифта. Например, текст объявления “Попал под лошадь” выводится на экран мелким шрифтом, имитирующим нонпарель.

Строчный элемент BIG увеличивает размер шрифта по отношению к текущему, а строчный элемент SMALL — уменьшает его. Элементы могут вкладываться друг в друга, что позволяет увеличивать (или уменьшать) размер в несколько раз.

Возникает вопрос: в каком диапазоне можно изменять размер шрифта? Согласно стандарту, браузер должен поддерживать семь размерных ступеней: –2, –1, 0, +1, +2, +3, +4. (0 обозначает “нормальный” размер, т. е. размер, используемый браузером по умолчанию.)

Размер шрифта можно менять и при помощи атрибута size в теге FONT . Возможные значения атрибута показаны ниже (строки содержат равнозначные варианты):

size=1	size=-2
size=2	size=-1
size=3	Размер по умолчанию (0 не используется)
size=4	size=+1
size=5	size=+2
size=6	size=+3
size=7	size=+4

Как уже говорилось ранее, визуальный элемент FONT , равно как и визуальный атрибут size , относятся к нерекомендаванным. Вместо визуальных элементов и визуальных атрибутов нужно использовать стилевые свойства.

Авторское форматирование (PRE)

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

Из этого правила, однако, есть исключение. Блочный элемент PRE заставляет браузер выводить текст так, как он записан в HTML-коде, — со всеми пробелами и концами строк. Это удобно использовать при отображении сложных страниц.

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

Хорошее применение для элемента PRE — вывод на экран программных кодов. Структурная лесенка при этом не будет поломана автоматическими переносами браузера и пропорциональным шрифтом.

Выравнивание

Теги и , записанные без атрибутов, выравнивают текст по левому краю страницы (режим умолчания для языков с написанием слева направо). Можно запрограммировать вывод текста с ровным правым краем, выровнять строчки по центру, или выровнять их по ширине.

Код	Комментарий	Пример
	Выравнивает по левому краю
	Выравнивает по левому краю
	Выравнивает по правому краю
	Выравнивает по центру
	Выравнивает по ширине

Задать выравнивание можно не только для отдельного абзаца или заголовка, но и для целой группу экранных элементов, если поместить их внутрь блочного элемента DIV . В открывающем теге элемента DIV можно использовать атрибут align с теми же значениями, что и для элемента P или элемента Hn .

Приведённые далее два разных кода приводят к одному и тому же результату.

В коде, приведённом ниже, элементы на странице выравниваются по правому краю:

Выравнивание — один из китов качественного дизайна!

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

Выравнивание текста по левому краю является стандартным. Несмотря на рваный правый край, читать комфортнее, по сравнению с чтением текста выровненным справа и даже по ширине (в нешироких окнах).

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

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

К сожалению, приятное значение justify (выравнивание по ширине) тоже имеет недостатки на текстах с длинными словами (русский, немецкий язык). Браузер “не умеет” пока переносить слова по слогам, поэтому на экране при выравнивании по ширине часто образуются большие “дыры”:

И опять отметим, что атрибуты выравнивания, рассмотренные выше, являются визуальными средствами HTML, значит, мы будем от них отказываться после знакомства с основами CSS.

Специальные символы

Поскольку символы “” (угловые скобки) воспринимаются браузером как начало и конец тега, возникает вопрос: а как показать эти символы на экране? Ещё вопрос: можно ли вставить в текст абзаца принудительную группу пробелов (ведь браузер игнорирует лишние пропуски)?

Кодирование символов

Для этих символов, а также для некоторых других предусмотрено специальное кодирование. Код строится из символа “&” (амперсанд), фиксированного (мнемонического) имени и завершающего символа “;” (точка с запятой):

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

Коды некоторых символов приведены в таблице:

Название символа	Изображение	Мнемоника	Код
Меньше		<	<
Больше	>	>	>
Амперсанд	&	&	&
Неразрывный пробел
Копирайт	©	©	©
Тире	—	—	—
Левая ёлочка	«	«	«
Правая ёлочка	»	»	»
Нижняя лапка	„	„
Левая лапка	“	“
Правая лапка	”	”
Многоточие	…	…	…
Параграф	§	§	§
Номер	№	№

Все буквы, составляющие имя специального символа, должны быть строчными (т. е. маленькими). Использование таких обозначений, как &NBSP и &AMP, не допускается!

Тире и кавычки

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

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

Дефис гораздо короче: посмотри-ка!

Ниже показана разница между кавычками и знаком дюйма:

Дискета 3.5″

“Текст в кавычках”

«И этот текст в кавычках»

Слева от тире в середине предложения ставится неразрывный пробел, а справа — обычный.

Код предыдущего абзаца записывается так:

Слева от тире в середине предложения ставится неразрывный пробел, а справа — обычный.

Неразрывный пробел

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

Вот характерные случаи использования этого символа (рекомендации Дмитрия Кирсанова):

Между инициалом и фамилией:

Вид	Код
И. Сидоров	И. Сидоров
А. А. Дуванов	А. А. Дуванов

В многословных сокращениях:

Вид	Код
т. д.	т. д.
т. п.	т. п.

Между знаком номера или параграфа и числом, относящимся к нему:

Вид	Код
№ 13	№ 13
§ 1	§ 1

Между маркером пункта и текстом, следующим за ним:

Вид	Код
a) Первый пункт	a) Первый пункт
1. Первый пункт	1. Первый пункт

Между числом и единицей измерения, относящейся к нему:

Вид	Код
220 В	220 В
1024 байт	1024 байт
XXI век	XXI век
2009 г.	2009 г.

Перед тире в середине предложения (после тире идет обычный пробел):

Вид	Код
Пиксел — это точка на экране.	Пиксел — это точка на экране.

Между классами многозначных чисел, начиная с пятизначных:

Вид	Код
32 541	32 541
4 937 543 246	4 937 543 246

Перед номерами версий программных продуктов и частями их названий:

Вид	Код
Windows XP	Windows XP
Photoshop 9	Photoshop 9

Как красиво и правильно оформить текст на сайте

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

Азы грамотного оформления текстов

• Создавайте структурированные публикации
  Разбивайте монолитный текст на информационные блоки.
• Избыточную(уточняющую) информацию удалите или вынесите на отдельную страницу
  Признайтесь, тяжело читать емкую публикацию. Позвольте читателю бегло пробежать по ней глазами, выхватить интересную и полезную информацию.
• Отделяйте информационные блоки
  Фоном, иллюстрациями(фотографиями), свободным пространством.
• Свободное пространство
  Это воздух для содержания страницы.

Веб-шрифты: как их правильно использовать на сайте?

Веб-шрифты создают эстетику при оформлении сайта и правильно подобранное начертание сделает сайт привлекательность и читабельность. Откройте для себя разнообразие профессиональных веб-шрифтов. Много бесплатных шрифтов, в том числе кириллических найдете и скачаете на сайте — http://www.fonts-online.ru.

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

При оформлении содержания (контента) шрифты разделяются на.

• заголовочные;
• текстовые;
• выделительные.

Какой шрифт использовать для сайта? Как узнать какой шрифт используется на другом сайте? Пройдем по пунктам по порядку, рассмотрим советы и применим полученные знания на практике.

Выбираем правильное начертание

• Используйте на сайте до 3-х шрифтов — гармонично и облегчает восприятие информации.
• Заведите и используйте фирменный шрифт для заголовков и подзаголовков.
• Используйте шрифты одной группы — только с засечками или только рубленые, пример — группа Time News Roman или Arial. Для публикаций в интернете предпочтение отдается рубленым шрифтам (без засечек).

Размер шрифта

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

Размер шрифта для строчного текста — минимум 14px. Для заголовков и подзаголовков —
от 25px (в здравых пределах).

Цвет шрифта на сайте

Светлый шрифт на темном фоне читается хуже, чем темный шрифт на светлом фоне. Однако, шрифт с засечками читается очень хорошо.

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

Эстетический баланс

Хороший шрифт должен выдерживать принципы эстетического баланса:

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

Как узнать, какие цвета и шрифт используется на другом сайте?

Это просто. Сейчас расскажу, как узнать какой шрифт используется на другом сайте и как этот шрифт заимствовать себе. Придется немного попрактиковаться, поработать ручками.

Смотрим скрины и повторяем за мной. В качестве примера возьмем первый попавшийся сайт c ажурными шрифтами — http://beautiful.dtbaker.net.

— Из всех браузеров наиболее привычно стало семейство Chrome. Пример рассматривается в браузере Vivaldi.

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

Наводим на шрифт и нажимаем правую кнопку мыши. Включилось контекстное меню. Выбираем пункт «Просмотреть код».

Смотрим слева направо. В верхнем боковом экране HTML-код сайта. Правее карта таблицы стилей CSS. Название шрифта прописывается в CSS. На примере мы определяем оформление для заголовка страницы. В блоке который отмечен видна таблица стилей этого загоовка. Обратите внимание на выделенную строку font-family — это и есть название шрифта. Грамотные разработчики оставляют исходное название шрифтов и потому всегда можно узнать их наименование.

Indie Flower — искомое название шрифта. Понравился? Как теперь его скачать? Перед тем, как перейти к методике по скачиванию шрифта учитывайте, что не все шрифты представлены кириллицей.

Пройдем еще ряд шагов и шрифт будет скачан:

1. Оставляем открытым окно просмотра кода;
2. Код сайта просматривали во вкладке «Elements», переходим к «Resources» — к ресурсам страницы;
3. Раскрываем вкладки в левой части окна просмотра кода;
4. Ищем вкладку «Fonts» — это и есть список заветных шрифтов;
5. Находим шрифт «Indie Flower» сверяясь с начертанием в правом окне. Название в этих вкладках могут быть и такими, — бессмысленными;
6. Делаем двойной клик мышью по шрифту и вуа-ля, браузер скачивает шрифт на компьютер;
7. Вставляете шрифт на свой сайт.

Текст: как красиво и грамотно оформить?

Это рекомендация. Не всегда получается соблюдать правило длины строки, потому следует найти разумный предел.

В русском языке кавычки используются в виде «ёлочки», а в иностранном — “лапки”.

• Одна строка должна быть заполнена текстом минимум на треть;
• Используйте отступы между абзацами и сделайте их одинаковыми по всему сайту;
• Переносите значения, например «XX век», на другую строку полностью, безотрывно.

Выделяем слова и словосочетания грамотно

Выделения в тексте помогают читателю выхватить ключевые мысли. Грамотно расставленные выделения сосредотачивают внимание читателя и увеличивают вероятность прочтения текста до конца или его фрагмента.

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

Цель этого раздела — научиться грамотному использованию выделений.

Выделение №1 — курсив

Выделение курсивом в тексте малозаметно и ненавязчиво. Применяется для выделения комментариев, пояснений, названий, расхожих выражений, а также конкретных слов.

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

Выделение №3 — подчеркивание

Подчеркивание желательно использовать исключительно для ссылок.

Выделение №4 — зачеркнутый текст

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

Выделение №5 — заливка

Выделение №7 — другой цвет

Выделение №8 — более крупный размер шрифта

Выделение №9 — другой шрифт — шрифтовое выделение

Выделение №10 — прописные (заглавные) буквы

Выделение №11 — рамка

Выделение №12 — разрядка

Разрядка — увеличение промежутков между буквами выделяемого слова.

Применяйте выделение разрядкой для коротких отрезков текста. Выделения длинных участки текста только затруднит чтение. Обратите внимание, на пример в изображении на широкие отступы между выделяемым словом (словосочетания) и текстом. Это сделано, чтобы выделяемое слово и рядом стоящие слова не слиплись.

Выделение №13 — боковой отступ (втяжка)

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

Выделение №14 — боковая линейка

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

Выделение №15 — маркер + курсив

Отличный вариант выделения для уточняющих фраз. Любому взрослому известен символ * (звездочка), который приводит к уточнению расположенному в конце текста. Предлагаю пойти дальше и расширить набор маркеров. В качестве авторской «фишки» можно воспользоваться другими символами — @ (собака), # (решетка), — (тире).

Пример использования выделения «маркер + курсив»:

Выделение №15 — комбинированное

Прописные (заглавные) и строчные истины буквы

НЕ ПИШИТЕ МНОГО ПРОПИСНЫМИ (ЗАГЛАВНЫМИ) БУКВАМИ. И уже тем более НИКОГДА «прыгающим стилем» — ЭтО ПрИмЕр ПрыгАющЕГо ТексТа.

Как об авторе сайта такое написание текста скажет прежде всего о пренебрежении к читателю.

Выравнивание

• Выравнивайте текст по левому краю и не переусердствуйте с центрированием объемных абзацев;
• Никогда не используйте выравнивание по ширине — CSS: text-align: justify;

Межбуквенные и межстрочные интервалы

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

Буквица

Бу́квица — крупная, отличная от прочих, первая буква главы или раздела.

Пять способов выделить текст на фоновом изображении

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

1. Наложение цвета

На нашем изображении видно что надпись теряется на фоне. Надпись очень сложно прочесть, так как фоновое изображение изобилует деталями и само по себе отвлекает. Текстура “Buffalo Wings” полностью теряется из-за перегруженности фотографии. Давайте исправим это.

Для начала создайте новый слой и назовите его “color-overlay”. Возьмите пипетку (нажав на клавишу «I»). Выберите цвет с рубашки стоящего слева мужчины. Залейте новый слой этим цветом (Shift + F5).

Укажите слою opacity/непрозрачность в 50% и перетащите его под слой с текстом.

Как вы можете заметить, появился контраст между надписью и фоном. Текст легко читается и текстура “Buffalo Wings” хорошо видна.

2. Тень

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

Для начала нам нужно выбрать подходящий цвета для текста.

Конкретно в этом случае подойдет светлый оттенок, желательно вообще белый цвет.

Теперь укажите слою new layer style/новый стиль слоя и выберите вариант drop shadow/тень. Укажите opacity/непрозрачность в 52%. Настройте Spread/Размах на 16% и Size/Размер на 10px. Угол должен быть примерно в -144 градусов.

В результате простого наложения тени, у нас получилась отличная выделяющаяся на фоне надпись.

3. Линии

Это самый простой способ сделать надпись заметнее. Просто добавьте тексту две линии — одну ниже, вторую выше надписи — это выделит вашу типографику на фоне фотографии.

Всего две линии создают такой ощутимый контраст между фоном и текстом.

4. Подкладка

Еще один способ выделения надписи на фоне изображения — создание полупрозрачной подкладки под текстом. Смотрите как это делается.

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

Чтобы исправить это, возьмите инструмент Custom Shapes/Заказные фигуры (U) и создайте фигуру. Не столь принципиально какой формы будет ваша подкладка. Вы можете сделать ее просто кругом или прямоугольником, или же создать фигуру в стиле ретро как в нашем примере.

Укажите фигуре черный цвет заливки и белую обводку толщиной в 3pt.

Перетащите подкладку под слой с текстом и укажите ей Opacity/Непрозрачность в 57%.

Результат выглядит профессионально и стильно. А главное — надпись отлично читается и выделяется на фоне изображения.

5. Размытие фона

Пятый и последний способ привлечь внимание к надписи — незначительное размытие фона.

Вновь возьмем пример, в котором текст теряется из-за детализированного изображения на фоне.

Для начала нам нужно конвертировать фон в смарт-объект. Для этого просто кликните правой кнопкой по слою и выберите Convert to Smart Object/Преобразовать в смарт-объект.

Затем в меню выберите Filters>Blur>Gaussian Blur/Фильтры>Размытие>Размытие по Гауссу.

Укажите радиус размытия в 3.8 px.

Мы добились желаемого контраста между фоном и текстом.

Автор урока Maria Wendt

• Психология восприятия шрифта и ее практическое применение
• Правила использования крупной типографики в веб-дизайне
• Текст против изображений: что выбрать?

Как красиво выделить текст

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

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

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

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

Настройте фон

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

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

• Затемните или осветлите многоцветную картинку.
• Используйте цветной или градиентный фильтр.
• Размойте фон, чтобы сделать его менее интенсивным.

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

Делайте плашки

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

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

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

Интегрируйте текст в дизайн

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

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

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

Уважайте цветовые сочетания

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

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

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

Повторяйте элементы

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

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

Настраивайте шрифты

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

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

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

Внимательно подбирайте расстояние

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

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

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