Типографика

Шкала кита в пикселях — от витринных заголовков до кода и сносок.

Варианты и состояния

Гарнитуры

--g-font-family-sans — интерфейс и текст
--g-font-family-monospace — код и токены

Шкала

Шкала кита задана в пикселях и ступенями с собственными именами, а не множителями базового кегля. Rem-база Tailwind ею не трогается: утилиты text-* живут своей лестницей, и набирать ими компоненты кита незачем — свой кегль они берут сами.

Витринные заголовки

Здоровье репозитория 87 из 100
--g-text-display-128px / 36px · насыщенность 600
Здоровье репозитория 87 из 100
--g-text-display-232px / 40px · насыщенность 600
Здоровье репозитория 87 из 100
--g-text-display-340px / 48px · насыщенность 600
Здоровье репозитория 87 из 100
--g-text-display-448px / 52px · насыщенность 600

Заголовки страницы и раздела

Здоровье репозитория 87 из 100
--g-text-header-120px / 24px · насыщенность 600
Здоровье репозитория 87 из 100
--g-text-header-224px / 28px · насыщенность 600

Подзаголовки и подписи групп

Здоровье репозитория 87 из 100
--g-text-subheader-113px / 18px · насыщенность 600
Здоровье репозитория 87 из 100
--g-text-subheader-215px / 20px · насыщенность 600
Здоровье репозитория 87 из 100
--g-text-subheader-317px / 24px · насыщенность 600

Основной текст

Здоровье репозитория 87 из 100
--g-text-body-113px / 18px · насыщенность 400
Здоровье репозитория 87 из 100
--g-text-body-215px / 20px · насыщенность 400
Здоровье репозитория 87 из 100
--g-text-body-317px / 24px · насыщенность 400
Здоровье репозитория 87 из 100
--g-text-body-short13px / 16px · насыщенность 400

Сноски и мелкие подписи

Здоровье репозитория 87 из 100
--g-text-caption-19px / 12px · насыщенность 400
Здоровье репозитория 87 из 100
--g-text-caption-211px / 16px · насыщенность 400

Код и имена токенов

Здоровье репозитория 87 из 100
--g-text-code-112px / 18px · насыщенность 400
Здоровье репозитория 87 из 100
--g-text-code-214px / 20px · насыщенность 400
Здоровье репозитория 87 из 100
--g-text-code-316px / 24px · насыщенность 400

Токены

--g-text-display-*
--g-text-header-*
--g-text-body-*
--g-font-family-*

образец набирается сокращением, а не тремя свойствами по отдельности: именно им набирают себя компоненты кита

Пример

<p style={{ font: "var(--g-text-body-2-font)" }}>Текст</p>