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

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

Шрифт

Основной шрифт в интерфейсах Контура — Segoe UI. Это стандартный шрифт ОС Windows и он уже есть у подавляющего большинства наших пользователей. Поэтому его не нужно загружать и устанавливать при первом входе — страницы грузятся быстрее и нет неприятного мигания текста.

Шрифт Segoe UI разработан компанией Monotype в 2000 году. С 2007 года является системным шрифтом в Windows 7. Также поставляется вместе с пакетом Microsoft Office.

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

Для использования на одном экране или странице выбирайте стили которые не стоят рядом в этом списке — заголовки различных уровней должны хорошо отличаться. Это помогает ориентироваться в тексте и вычленять главное. Например для Гайдов мы выбрали кегли 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 — вариант для узких колонок текста от 20 до 40 символов в строке, и 40 и больше для колонок текста больше 40 – 60 символов и больше. До 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 пикселя.

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