Создание дизайна сайта: немного о цвете и шрифте, а также основные рекомендации по их использованию

Цвета в web-дизайне

Что такое акцентный цвет

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

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

К акцентным цветам относятся: жёлтый, красный, оранжевый, синий, зелёный. Они наиболее подходят для выбора акцентного цвета.

Об использовании цвета

В идеале использовать 3 цвета: цвет темы (нейтральный), цвет текста (цвет основного текста) и акцентный цвет (для привлечения внимания).

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

Рекомендации по использованию цветов на веб-странице

  1. Не использовать более 3-х цветов на странице, в идеале 2 (цвет текста и акцентный цвет)
  2. применять акцентный цвет для тех элементов, которые важны на странице и должны быть замечены
  3. Цвет темы должен быть спокойным, не ярким, не утомлять глаза
  4. Не использовать чистые цвета, а их оттенки
  5. Тёмный цвет текста на светлом фоне, белый цвет текста на тёмном фоне
  6. Все картинки должны быть затемнены цветом темы

Использование шрифтов

Семейства шрифтов

  1. Serif - с засечками
  2. Sans-serif - без засечек
  3. Cursive - рукописные
  4. fantasy - декоративные
  5. Monospace - моноширинные (все знаки имеют одинаковую ширину)

Высота строки, интерлиньяж и расстояние между абзацами

Интерлиньяжем называется расстояние между базовыми линиями соседних строк в тексте. Для комфортного чтения должен составлять около 120% от высоты строки. Интерлиньяж также зависит от гарнитуры шрифта, расстояний между словами, ширины контента и других факторов. При всём этом важно соблюдать адекватное расстояние между абзацами.

Что такое интерлиньяж, высота строки и расстояние между абзацами

Расстояние между символами и словами

Трекинг - это расстояние между символами (letter-spacing), а кернинг - это пространство между символами в зависимости от их формы (font-kerning). Чтобы добиться красивого результата, нужно найти баланс в используемом шрифте.

Что такое трекинг и кернинг

Рекомендации по использованию шрифтов на сайте

  1. Не использовать размер шрифта меньше 12px
  2. Шрифт должен быть чётким, читабельным
  3. Использовать адекватную высоту строки, интерлиньяж и расстояние между абзацами
  4. Светлый текст на тёмном фоне, а тёмные буквы на светлом фоне
  5. Не использовать более трёх шрифтов на странице
  6. Все ссылки в тексте должны быть подчёркнуты (кроме навигации)
  7. Создание "хлебных крошек"
Изучаем английский
EnglishRussian
SerifЗасечка
Sans-serifБез засечек
CursiveРукописный шрифт
BreadcrumbsХлебные крошки