Текстовые стили
Текстовые стили подобраны с учетом гайда по сетке и модулю, используйте эти стили в интерфейсах Контура. Рекомендации по набору текста смотрите в гайде по типографике.
Шрифт
Основной шрифт в интерфейсах Контура — «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)
Для заголовков, лидов и обычного текста
Для размеров меньше 24px есть две высоты строки. Выбирайте высоту строки в зависимости от ширины колонки: «до 40» — вариант для узких колонок текста до 40 символов в строке и для использования в контролах, «40 и больше» для колонок текста больше 40 символов. Вместе с высотой строки меняется и абзацный отступ.
|
font-size / line-height / paragraph (px) |
font-size / line-height / paragraph (px) |
Больше примеров с учетом длины строки в файле в Фигме.
Сетка и высота строк
Высота строки и кегль подобраны так, чтоб соответствовать гайду по сетке. Для заголовков высота строки составляет 120% от размера шрифта, для узких колонок обычного текста — 140%, для широких — 160% и округлена до модуля в 8, 4 и иногда 2 пикселя.
Модуль и сетка имеют прикладное значение — помогают выбирать размеры и отступы, но самостоятельной ценности у них нет, поэтому текстовые блоки, а тем более их базовые линии, не нужно фанатично вписывать в восьмипиксельную сетку. Достаточно использовать предложенные в этом гайде параметры типографики, и отступы рекомендованные в гайде по отступам.