Типографика

Интерфейсы на 80% состоят из текста, и наша задача — сделать их понятными и удобочитаемыми для клиентов.

При работе с текстом предпочтения отдаются крупному кеглю и уверенным начертаниям. Для заголовков используются начертания Bold, реже Black. Для активных элементов интерфейса — Medium и Regular. Основной текст набирается начертанием Regular.

Гарнитуры

Для каждой платформы используется системный шрифт. Для продукции Apple — это SF Pro, для Android — в основном Roboto, для MS Windows — Segoe UI.

Это решение ускоряет работу веб-приложений, минимизирует разницу в шрифтах при использовании web-view внутри нативного приложения, а также предоставляет широкие возможности при работе с текстом. Например, в iOS реализована динамическая работа с гарнитурой SF: в зависимости от кегля и устройства, меняется подсемейство с адаптированным под размер начертанием, увеличивается межбуквенное расстояние и за счёт этого улучшается читаемость.

Стандартный набор шрифтовых гарнитур для всех компонентов:

font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'Roboto Rouble', sans-serif;

Размеры

Базовые размеры для мобильных устройств

iOS — 17pt / 22pt
Android — 16dp / 21dp

Через «/» указывается размер наборного шрифта и интерлиньяж (межстрочное расстояние). Читать запись вида 17pt / 22pt следует как «наборный шрифт равен 17 пунктам, межстрочное расстояние при этом равно 22 пунктам».

Для определения интерлиньяжа используются следующие правила:

  • Для заголовков берётся 1,2 от размера шрифта. Например, если заголовок 48pt, то базовый интерлиньяж для него составит 48 * 1,2 = 57,6. Округляем до целого значения по математическим правилам.
  • Для обычного текста берётся 1,3 или 1,4 от размера шрифта, в зависимости от контекста: учитывайте размер строки, размер текста, масштабы устройства и т.д.

Это справедливо как для нативных приложений, так и для веба.

Размеры и отступы для веба

Список используемых переменных и размеров

Цвета

НазваниеЦветHEXRGBAНазвание в коде
Text Primary
#172A3F11 31 53 95dark_indigo_95
Text Paragraph
#54627111 31 53 70dark_indigo_70
Text Secondary
#6D798611 31 53 60dark_indigo_60
Text Tetriary
#B5BBC211 31 53 30dark_indigo_30
Заголовок 2
margin-top: 36px;margin-bottom: 18px;font-size: 32px;line-height: 1.2;fontWeight: 700;
Заголовок 3
margin-top: 36px;margin-bottom: 18px;font-size: 24px;line-height: 1.3;font-weight: 700;