Typography – Desktop

To use these OTKit typography rules in your project, we have a production-tested package that exports readily made font groupings for you: @ot-react-ui/typography-desktop. See its README for details.

It is generally not recommended to directly consume / reference the values in this token unless for explicit reasons, such as overriding.

xxlarge-bold | font-size: 48px | font-weight: bold | line-height: 56px
xlarge-bold | font-size: 32px | font-weight: bold | line-height: 36px
large-bold | font-size: 24px | font-weight: bold | line-height: 28px
large-medium | font-size: 24px | font-weight: 500 | line-height: 32px
medium-bold | font-size: 18px | font-weight: bold | line-height: 24px
small-bold | font-size: 16px | font-weight: bold | line-height: 24px
small-medium | font-size: 16px | font-weight: 500 | line-height: 24px
small-regular | font-size: 16px | font-weight: normal | line-height: 24px
xsmall-bold | font-size: 14px | font-weight: bold | line-height: 20px
xsmall-medium | font-size: 14px | font-weight: 500 | line-height: 20px
xsmall-regular | font-size: 14px | font-weight: normal | line-height: 20px