Текстовые стили

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

Рекомендации по набору текста читайте в гайде «Экранная типографика».

Шрифт

Основной шрифт в интерфейсах Контура — 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