Типографика

Шрифт библиотеки — Golos Text, подключается self-hosted. Компоненты используют готовые роли (--font-h1…h5, --font-body*, --font-caption, --font-btn-*) — это полные значения шорткода font, собранные из кеглей, насыщенностей и интерлиньяжа ниже.

Роли текста

Готовые значения шортката font — их и используют компоненты

--font-h13remРоли (font shorthand)
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-h22.25rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-h31.875rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-h41.5rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-h51.25rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-body1rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-body-sm0.875rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-body-lg1.125rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-caption0.75rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-btn-xs0.75rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-btn-sm0.875rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-btn-md1rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-btn-lg1.125rem
Съешь же ещё этих мягких булочек. The quick brown fox.
--font-btn-xl1.25rem
Съешь же ещё этих мягких булочек. The quick brown fox.

Семейство

Variable	Value	Preview	Description
`--family-sans`	`"Golos Text", ui-sans-serif, system-ui, -apple-system, sans-serif`		Семейство шрифта

Кегли

Variable	Value	Description
`--text-size-xs`	`0.75rem`	Размеры текста
`--text-size-sm`	`0.875rem`	-
`--text-size-base`	`1rem`	-
`--text-size-md`	`1.125rem`	-
`--text-size-lg`	`1.25rem`	-
`--text-size-xl`	`1.5rem`	-
`--text-size-2xl`	`1.875rem`	-
`--text-size-3xl`	`2.25rem`	-
`--text-size-4xl`	`3rem`	-

Насыщенности

Variable	Value	Description
`--weight-regular`	`400`	Насыщенность (вес)
`--weight-medium`	`500`	-
`--weight-semibold`	`600`	-
`--weight-bold`	`700`	-

Интерлиньяж

Variable	Value	Description
`--line-height-tight`	`1.15`	Межстрочный интервал
`--line-height-normal`	`1.4`	-
`--line-height-relaxed`	`1.6`	-