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

Текстовые стили подобраны с учетом гайда по сетке и модулю, используйте эти стили в интерфейсах Контура. Рекомендации по набору текста смотрите в гайде по типографике.

Шрифт

Основной шрифт в интерфейсах Контура — «Lab Grotesque K». Это специальная версия «Lab Grotesque» с небольшими доработками, сделанными для Контура ребятами из Швеции.

Файлы шрифтов для дизайна можно взять в общей папке на Google Drive (чтобы получить ссылку авторизуйтесь, ссылка доступна только сотрудникам Контура).

Для фронтенда — подключайте CSS со стилями с сервера статики:
<link rel="stylesheet" href="https://s.kontur.ru/common-v2/fonts/LabGrotesque/LabGrotesque.css" />

Для того чтобы загрузить шрифты первыми, до того как распарсится CSS, добавьте код:
<link rel="preload" href="https://s.kontur.ru/common-v2/fonts/LabGrotesque/LabGrotesque-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="https://s.kontur.ru/common-v2/fonts/LabGrotesque/LabGrotesque-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="https://s.kontur.ru/common-v2/fonts/LabGrotesque/LabGrotesque-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

Стили для заголовков

Для использования на одном экране или странице выбирайте стили которые не стоят рядом в этом списке — заголовки различных уровней должны хорошо отличаться. Это помогает ориентироваться в тексте и вычленять главное. Например для Гайдов мы выбрали кегли 40, 32 и 20 для заголовков H1, H2, H3 и 16 для наборного текста. Выбирайте размеры и насыщенность, которые больше подойдут аудитории вашего продукта.

font-size / line-height / paragraph (px)

56 / 64 / 32

Header sample

48 / 56 / 28

Header sample

40 / 48 / 24

Header sample

36 / 44 / 22

Header sample

32 / 40 / 20

Header sample

28 / 36 / 18

Header sample

Для заголовков, лидов и обычного текста

Для размеров меньше 24px есть две высоты строки. Выбирайте высоту строки в зависимости от ширины колонки: «до 40» — вариант для узких колонок текста до 40 символов в строке и для использования в контролах, «40 и больше» для колонок текста больше 40 символов. Вместе с высотой строки меняется и абзацный отступ.

font-size / line-height / paragraph (px)

24 / 32 / 16

Продуктовая линейка компании включает сервисы для электронного документооборота

22 / 30 / 14

Продуктовая линейка компании включает сервисы для электронного документооборота

20 / 28 / 14

Продуктовая линейка компании включает сервисы для электронного документооборота

18 / 24 / 12

Продуктовая линейка компании включает сервисы для электронного документооборота

16 / 22 / 12

Продуктовая линейка компании включает сервисы для электронного документооборота

14 / 20 / 10

Продуктовая линейка компании включает сервисы для электронного документооборота

12 / 16 / 8

Продуктовая линейка компании включает сервисы для электронного документооборота

font-size / line-height / paragraph (px)

24 / 36 / 18

Продуктовая линейка компании включает сервисы для электронного документооборота

22 / 34 / 16

Продуктовая линейка компании включает сервисы для электронного документооборота

20 / 32 / 16

Продуктовая линейка компании включает сервисы для электронного документооборота

18 / 28 / 14

Продуктовая линейка компании включает сервисы для электронного документооборота

16 / 24 / 12

Продуктовая линейка компании включает сервисы для электронного документооборота

14 / 22 / 12

Продуктовая линейка компании включает сервисы для электронного документооборота

12 / 18 / 10

Продуктовая линейка компании включает сервисы для электронного документооборота

Больше примеров с учетом длины строки в файле в Фигме (чтобы получить ссылку авторизуйтесь, ссылка доступна только сотрудникам Контура). Можно подключить стили как библиотеку из этого же файла.

Сетка и высота строк

Высота строки и кегль подобраны так, чтоб соответствовать гайду по сетке. Для заголовков высота строки составляет 120% от размера шрифта, для узких колонок обычного текста — 140%, для широких — 160% и округлена до модуля в 8, 4 и иногда 2 пикселя.

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