Основы
Типографика
Figma
Storybook
Определение
В качестве основного шрифта дизайн-системы PLEX используется универсальный закрытый гротеск – Golos Text.
Он хорошо подходит для чтения длинных текстов с экрана и рекомендуется для сайтов государственных и социальных сервисов. Текстовая линейка включает пять начертаний разной жирности от Regular до Black.
Стили текста
Начертание
Токен
Размер
Интерлиньяж
Пример
Demibold
font-heading-9xl
72px
62
H1
Demibold
font-heading-8xl
64px
64
H2
Demibold
font-heading-7xl
56px
60
H3
Demibold
font-heading-6xl
48px
56
H4
Demibold
font-heading-5xl
40px
48
H5
Demibold
font-heading-4xl
36px
40
H6
Demibold
font-heading-3xl
32px
36
H7
Demibold
font-heading-2xl
28px
32
H8
Demibold
font-heading-xl
24px
32
H9
Demibold
font-heading-l
20px
28
H10
Demibold
font-heading-m
18px
28
H11
Demibold
font-heading-s
16px
24
H12
Demibold
font-heading-xs
14px
20
H13
Regular
font-body-3xl
24px
32
Body 3XL
Regular
font-body-2xl
20px
28
Body 2XL
Regular
font-body-xl
18px
28
Body XL
Regular
font-body-l
16px
24
Body L
Regular
font-body-m
14px
20
Body M
Regular
font-body-s
13px
20
Body S
Regular
font-body-xs
12px
16
Body XS
Demibold
font-overline-xl
14px
20
OVERLINE XL
Demibold
font-overline-l
12px
16
OVERLINE L
Demibold
font-overline-m
11px
16
OVERLINE M
Demibold
font-overline-s
10px
16
OVERLINE S
Medium
font-label-l
14px
16
Label L
Medium
font-label-m
13px
16
Label M
Medium
font-label-s
12px
16
Label S
Medium
font-button-xl
16px
20
Button XL
Medium
font-button-l
14px
16
Button L
Medium
font-button-m
13px
16
Button M
Medium
font-button-s
12px
16
Button S
Regular
font-link-3xl
24px
32
Link 3XL
Regular
font-link-2xl
20px
28
Link 2XL
Regular
font-link-xl
18px
28
Link XL
Regular
font-link-l
16px
24
Link L
Regular
font-link-m
14px
20
Link M
Regular
font-link-s
13px
20
Link S
Regular
font-link-xs
12px
16
Link XS
