Система типографики: основополагающие элементы
Демонстрация основных начертаний:
Open Sans выбран за исключительную читабельность, универсальность и профессиональный, но дружелюбный характер. Он идеально подходит для передачи сложной технической информации, обеспечивая ясность и узнаваемость бренда ПБС на любых носителях.
1. Primary Text (Основной текст и Заголовки).
Цвет: #16212D. Где применять: Все заголовки (H1-H4, Display), основной читаемый текст (Body/Regular), названия пунктов меню.
2. Secondary Text (Второстепенный текст).
Цвет: #546373. Где применять: Подписи к фото (Caption), хлебные крошки, мета-информация (даты, теги), неакцентный текст в карточках товаров, плейсхолдеры в формах (ввода текста).
3. Link & Accent Text (Ссылки и текстовые акценты).
Цвет: #0D64AD. Где применять: Все текстовые ссылки внутри абзацев (с подчеркиванием), интерактивные элементы, иконки, стоящие рядом с текстом.
4. Inverted Text (Светлый текст на темном фоне).
Цвет: #F0F4F8 или чистый белый #FFFFFF. Где применять: Текст внутри темных блоков (например, в футере цвета #16212D или на синих кнопках). Использование #F0F4F8 вместо белого сделает свечение текста на темном фоне более мягким для глаз.
Aa Bb Cc Dd Ee Ff Gg Hh li Jj Kk LI Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Аа Б6 Вв Гг Дд Ее Ёё Жж 33 Ии Йй Кк Лл Мм Нн О Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ Ъъ Ыы Ьь Ээ Эю Яя 0123456789 !@#$%|};:•”<>/?
- Light (300): Только для акцентного заголовка Display. Не использовать в основном тексте.
- Regular (400): Для всего основного текста, подписей и меток.
- SemiBold (600): Для акцентов в тексте (тег <strong>), заголовков среднего уровня (H4) и кнопок.
- Bold (700): Для самых важных заголовков (H1, H2, H3), требующих максимального внимания.