Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

Сообщить об ошибке

Отменить
16161
How-to Читать 9 минут

Как выбрать шрифты и цвета для сайта

Подбор цветовой гаммы и шрифтов для сайта
ЧЕК-ЛИСТ: ЮЗАБИЛИТИ
Для создания стильного дизайна сайта нужны базовые знания теории цвета и типографики — искусства оформления печатного текста. Подбирая цвета и шрифты, следует обращать внимание на те ассоциации, которые они традиционно вызывают у пользователей.

Как подобрать шрифты в зависимости от тематики сайта

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

Для корпоративного сайта подойдут традиционные шрифты без засечек, например, Verdana или Aria, ассоциирующиеся со строгим деловым стилем:
Шрифты без засечек
Для детских и развлекательных порталов стоит использовать более интересные, легкие и фантазийные шрифты, которые понравятся юной аудитории:
Шрифты для развлекательных порталов
Для научной информации более подходят шрифты с засечками — Serif. Эксперимент, проведенный в 2015 году, показал, что читатели более благоприятно воспринимают научные тексты, написанные именно такими шрифтами:
Шрифты с засечками
На восприятие читателем текста, помимо шрифта и его размера, влияют цвет, начертание, пробелы между символами и межстрочный интервал, размещение информации по колонкам. Главное, чтобы текст был разборчивым, легко читался как на компьютере, так и с портативных устройств.

Как подобрать шрифт

При выборе шрифта для сайта стоит следовать следующим рекомендациям:

  • использовать не более четырех шрифтов на одной странице;

  • пользоваться шрифтами без засечек (Sans-serif) для основного текста, так как на экране засечки затрудняют чтение;

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

  • для примеров программных кодов, инструкций или имитации машинописного текста использовать шрифты семейства Monospace;

  • с помощью нестандартных шрифтов, например, Script и Fantasy, оформлять заголовки и делать акценты для привлечения внимания;

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

Примеры шрифтов в графическом дизайне

1
Шрифты Craft

Шрифт на сайте — это часть вашего бренда, подумайте сначала о своем бренде выделите основные его качества и свойства.

  • На примере — упаковка мороженого, где владельцы хотят подчеркнуть натуральность мороженого. Подходят отлично шрифты с имитацией тиснений букв, каллиграфия, что-то ручное, домашнее, теплое по атмосфере:
Шрифты Craft на упаковке мороженого
Шрифт Craft
2
Handwritten

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

Как альтернатива такие шрифты хорошо задают неформальное настроение.

Шрифт Adlery Pro
Шрифт Amatic SC
Другие бесплатные шрифты для сайта можно изучить на специальном портале от Google или аналогах.
3
Serif

Шрифты с засечками отлично подойдут, если вы хотите отобразить приверженность к традициям и стабильности компании. С сочетанием яркой графики или цветов, такие шрифты здорово оживляют бренд:
Шрифты Serif
  • из платных хорош Barrels:
Шрифт Barrels
Шрифт Merriweather
4
Sans Serif

Открытость, прозрачность, гибкость — все это можно отразить выразительным шрифтом без засечек. Шрифт с жирным начертанием и в сочетании с эмоциональными живыми фотографиями дает ощущение открытости бренда:
Шрифты Sans Serif
  • из платных есть современный Gilroy:
Шрифт Gilroy
  • из бесплатных есть Open Sans со множеством начертаний:
Шрифт Open Sans

Где лучше искать профессиональные шрифты

1
Бесплатные: fonts.google.com;
3
На myfonts.com можно найти как платные, так и бесплатные шрифты. Стоит учесть что там могут быть бесплатными только отдельные начертания. При подборе шрифта онлайн обязательно ознакомьтесь с условиями использования и проверьте, доступны ли нужные вам элементы и языки.

Как с помощью типографики расставить акценты на важной информации

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

  • изменение начертания — выделение жирным либо курсивным шрифтом;

  • цветовое выделение отдельных блоков информации или конверсионных элементов:
Графическое выделение конверсионных элементов страницы
  • изменение цвета или размера шрифта.

Как правильно использовать пробелы в тексте

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

В мобильной версии необходимо использовать только одну колонку текста.

Как выбрать цвета для сайта

Онлайн-сервисы для подбора цветовой гаммы сайта

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

Для подбора цветовых схем можно использовать онлайн-сервисы:

  • colorscheme.ru — генерирует цветовые сочетния с использованием правил колористики и создавая гармоничные сочетания из одного-четырех цветов:
Создать цветовую схему на colorscheme.ru
Можно сразу посмотреть пример сайта с выбранной цветовой гаммой:
Превью сайта с выбранной цветовой гаммой
  • color.adobe.com/ru — в данном сервисе также используется цветовой круг, на основе которого генерируются различные сочетания оттенков:
Создание цветовой схемы на color.adobe.com
Также в сервисе можно просмотреть уже созданные популярные цветовые схемы:
Популярные цветовые схемы на color.adobe.com
palettegenerator.com — на этом сервисе другой принцип подбора цветовых сочетаний: необходимо загрузить картинку с понравившимся оттенками:
Генератор цветовых схем palettegenerator.com
После добавления изображения, можно откорректировать количество цветов в итоговой схеме, оставив от двух до десяти цветов:
Выбор цветовой схемы на palettegenerator.com

Психология восприятия цвета сайта

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

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

Рассмотрим основные оттенки и их признаки с точки зрения психологии, которые помогают определить, какие цвета выбрать для сайта:

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

Регламент использования цветов и шрифтов на сайте

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

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

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

Заключение

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

  • подобрать шрифты и их сочетания, которые будут органично смотреться вместе и соответствовать тематике сайта;

  • следить за удобочитаемостью и разборчивостью текста;

  • устанавливать межсимвольные и межстрочные интервалы, способствующие легкому чтению;

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

Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat" title = "Как подобрать цвета и шрифты для сайта 16261788225854" />
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

4.27 из 5 на основе 10 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.