Текстовые стили
Текстовые стили задают типографическую систему интерфейса: размер шрифта, высоту строки и отступы между абзацами. В этом гайде описаны стили для интерфейсов Контура, подобранные в соответствии с гайдом «Модуль».
Рекомендации по набору текста читайте в гайде «Экранная типографика».
Шрифт
Основной шрифт в интерфейсах Контура — Lab Grotesque K. Это специальная версия «Lab Grotesque» с небольшими доработками, сделанными для Контура шрифтовиками из Швеции.
Файлы шрифтов — в брендбуке.
Заголовки
На одном экране используйте заголовки разных уровней, которые хорошо различаются между собой. Это помогает пользователю ориентироваться на странице и быстро находить нужное.
Рекомендуемые размеры заголовков в продуктах Контура:
H1 — 32 px / 40 px,
H2 — 24 px / 32 px,
H3 — 20 px / 28 px.
Все заголовки набираются начертанием Bold.
Все стили заголовков
Font Size
56 px
Line Height
64 px
Контур
Font Size
48 px
Line Height
56 px
Контур
Font Size
40 px
Line Height
48 px
Контур
Font Size
36 px
Line Height
44 px
Контур
Font Size
32 px
Line Height
40 px
Контур
Font Size
28 px
Line Height
36 px
Контур
Font Size
24 px
Line Height
32 px
Контур
Font Size
20 px
Line Height
28 px
Контур
Наборный текст
Используйте стили наборного текста для абзацев, подписей, подсказок и текста в контролах. Есть два варианта высоты строки.
Стандартная высота строки используется в большинстве интерфейсных текстов.
Увеличенная высота строки используется в больших массивах текста с длинными строками, например, в инструкциях или статьях. Она позволяет читателю легче находить следующую строку и быстрее сканировать объёмный текст.
Табулярные цифры
В стилях со стандартной высотой строки включены табулярные цифры: они одинаковой ширины и стоят ровно друг под другом. Так удобнее сравнивать числа в таблицах и списках.
Обычные цифры
Табулярные цифры
В стилях с увеличенной высотой строки табулярные цифры выключены. В сплошном тексте они не нужны.
Все стили наборного текста
|
Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 24 px Line Height 32 px Paragraph Spacing 16 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 22 px Line Height 30 px Paragraph Spacing 14 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 20 px Line Height 28 px Paragraph Spacing 14 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 18 px Line Height 24 px Paragraph Spacing 12 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 16 px Line Height 22 px Paragraph Spacing 12 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 14 px Line Height 20 px Paragraph Spacing 10 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 12 px Line Height 16 px Paragraph Spacing 8 px |
Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 24 px Line Height 36 px Paragraph Spacing 18 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 22 px Line Height 34 px Paragraph Spacing 16 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 20 px Line Height 32 px Paragraph Spacing 16 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 18 px Line Height 28 px Paragraph Spacing 14 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 16 px Line Height 24 px Paragraph Spacing 12 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 14 px Line Height 22 px Paragraph Spacing 12 px Интерфейсы во многом состоят из текста, и от того, как набран этот текст, зависит общее восприятие дизайна и удобство работы с системой. Font Size 12 px Line Height 18 px Paragraph Spacing 10 px |
Сетка и высота строк
Высота строки для крупных заголовков составляет 120 % от размера шрифта, у небольших заголовков и стандартного наборного текста — 140 %, а увеличенная — 160 %, и округлена до модуля в 8, 4 или иногда 2 пикселя.
Модуль имеет прикладное значение. Он помогает выбирать размеры и отступы, но самостоятельной ценности не имеет, поэтому параметры текста не нужно фанатично вписывать в 8-пиксельную сетку. Достаточно использовать предложенные в этом гайде параметры типографики и отступы, рекомендованные в гайде «Модуль».
Библиотека
Дизайнерам — Libraries / Kontur Typography
Инженерам — tech.skbkontur.ru/kontur-ui