Фирменные шрифты и цвета сайта: как выбрать, проверить и закрепить

Что такое фирменные шрифты и цвета сайта?

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

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

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

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

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

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

Начните с характера проекта: что человек должен почувствовать, оказавшись на странице. Для серьёзных бизнес-проектов Adlook советует строгие шрифты вроде Playfair Display или Inter, для творческих что-то более игривое, например Manrope или рукописный Vasek, а для блогов и новостей нейтральные Open Sans, Roboto или PT Serif.

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

Дальше помогает простое ограничение: не больше двух-трёх шрифтов в проекте. Обычно один берут для текста, другой для заголовков, а можно обойтись начертаниями одной гарнитуры, например Montserrat Bold в заголовках и Montserrat Regular в тексте. Пару удобно подобрать до вёрстки в сервисах вроде Fontjoy, который генерирует сочетания и позволяет задать контраст между шрифтами.

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

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

Цена неверного выбора видна в кейсе Мегагрупп. Бухгалтерская компания взяла ультратонкий дизайнерский шрифт, чтобы выглядеть современно, но её клиентам, руководителям малого бизнеса от 45 до 60 лет, читать его было тяжело. После перехода на классическую антикву среднего веса время визита выросло вдвое, а заявок стало больше на 30%. Это рассказ самого агентства, поэтому цифры стоит считать ориентиром.

Интернет-магазин электроники из другого кейса Мегагрупп терял покупателей на выборе товара: в карточках было четыре шрифта, а характеристики набирали мелко, 12 пикселями. Оставили два шрифта и построили иерархию: название 24 пикселя, цена 20 жирным, характеристики 16. За два месяца конверсия выросла на 15%.

Онлайн-школа языков, о которой пишет Мегагрупп, получала жалобы, что уроки быстро утомляют. Основной шрифт заменили на PT Sans, увеличили межстрочный интервал и контраст, и время просмотра страниц с уроками выросло почти вдвое.

Как подобрать цвета: правило 60-30-10 и психология

Основа палитры - правило 60-30-10. По описанию Хабра, 60% площади занимает основной цвет для фона и крупных блоков, 30% дополнительный для акцентов и разделов, а 10% яркий акцент для кнопок и важных элементов. Акцент работает, пока он редкий: если залить им половину экрана, кнопка перестанет выделяться.

Пример распределения даёт Хабр: светло-серый фон на 60% площади, чёрные карточки товаров на 30% и зелёная кнопка «Купить» на оставшихся 10%. Глаз сразу находит действие, потому что именно кнопка единственный яркий элемент на экране.

Значения цветов условны, но аудитория их считывает. Яндекс Практикум связывает синий с доверием и надёжностью и приводит в пример ВТБ, Visa, Nivea и «Детский мир». При этом автор Хабра напоминает, что красный в Китае символ удачи, поэтому для международного проекта значение цвета проверяют на своей аудитории.

Цвет нередко запоминается лучше логотипа. Когда «Тинькофф» упростил знак и сменил название на Т-Банк, как разбирает Relabel, сохранились буква «Т», жёлтый цвет и форма щита, поэтому речь шла об упрощении прежней идентичности.

Подобрать оттенки помогают генераторы. В Adobe Color, по описанию Практикума, сначала выбирают основной цвет, а затем правило гармонии, например комплементарные цвета. Colormind выдаёт пять согласованных оттенков, и зафиксировать нужный можно замком: остальные подстроятся.

Крайний случай проверки цвета данными - история Google. Команда не могла выбрать между двумя синими и тестировала 41 оттенок между ними. Дизайнер Дуглас Боуман, уходя из компании, написал, что его попросили доказать данными ширину рамки в 3, 4 или 5 пикселей.

Я устал спорить о таких ничтожных дизайнерских решениях

Дуглас Боуман, дизайнер, покинувший Google

Вывод для небольшого проекта простой: A/B-тест нужен для спорных решений вроде цвета кнопки, а не для каждого пикселя. Базовые цвета бренда лучше принять один раз и записать.

Как проверить, что текст читается?

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

Для проверки есть формальный порог. По требованиям WCAG, контраст обычного текста с фоном должен быть не ниже 4,5 к 1, а у крупного не ниже 3 к 1. Крупным считают текст от 18 пунктов или 14 пунктов жирным. Сервис Color Safe учитывает WCAG и показывает контраст каждого цвета.

Размер шрифта тоже часть читаемости. Мегагрупп советует для основного текста 14-16 пикселей и не меньше на мобильных, межстрочный интервал держать в пределах 1,4-1,6 от размера шрифта.

Перед релизом пройдите короткую проверку:

1. откройте страницу на телефоне и прочтите абзац без увеличения;
2. проверьте контраст пар «текст-фон» и цвета кнопок калькулятором;
3. выведите длинный текст в несколько абзацев нужным шрифтом;
4. найдите «ё» и «й» в заголовках и убедитесь, что точки и дуга на месте.

Какие сервисы помогут подобрать шрифты и палитру?

Подбирать вслепую не нужно: большую часть работы берут на себя бесплатные сервисы. Для шрифтов Adlook перечисляет Fontjoy, Google Type, Mixfont, Fontpair и Typ.io, где показаны сочетания, в том числе на реальных сайтах. Для цветов Практикум называет Adobe Color, Colormind, Coolors, Color Safe и Material Design Color System.

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

Сервис даёт варианты, а не решение: ориентируйтесь на задачу проекта и вкус аудитории. Не лишним будет показать два-три варианта коллегам и спросить, что читается лучше и что выглядит уместнее.

Не замедлят ли шрифты страницу?

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

Помогает настройка font-display. Режим optional ограничивает задержку текста 100 миллисекундами и исключает сдвиги макета, а swap показывает текст запасным шрифтом сразу. Файл уменьшает и подмножество символов: удаление неиспользуемых глифов, как отмечают авторы, заметно сокращает размер.

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

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

Есть и юридический нюанс для европейской аудитории. Суд Мюнхена, как сообщает eprivacy, присудил посетителю 100 евро с владельца сайта, который подключал Google Fonts напрямую: IP-адрес уходил в Google в США. Юристы советуют разместить шрифты на своём сервере, и тогда данные никуда не передаются. Если у проекта есть европейский трафик, согласуйте схему подключения с юристом.

Как закрепить решения, чтобы их не сломали?

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

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

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

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

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

Частые вопросы