Typography

Importing the font assets

Add the following to your main css file to load the font assets;

@import '@tpg/grammar-web/styles/common/fonts.css';

Setting Font Outside Components

By default, typography is handled by the design system components, which automatically apply the correct font styles. However, if you’re rendering text outside of these components, you must manually apply the font family.

Example

Output

This custom text uses the primary font!

Code

<style>
.text {
  font: var(--typographyHeadingLg);
}
</style>
<p>
This custom text uses the primary font!
</p>

Font Tokens

Here is a list of tokens you can use to set the font. Take a look at the example above to see how it is used.

--typographyHeadingLg
--typographyHeadingMd
--typographyHeadingSm
--typographyLabelXxlNormal
--typographyLabelXxlNormalHigh
--typographyLabelXxlNormalXHigh
--typographyLabelXxlStrong
--typographyLabelXlNormal
--typographyLabelXlNormalHigh
--typographyLabelXlNormalXHigh
--typographyLabelXlStrong
--typographyLabelXlStrongCompact
--typographyLabelLgNormal
--typographyLabelLgNormalCompact
--typographyLabelLgNormalHigh
--typographyLabelLgNormalHighCompact
--typographyLabelLgNormalXHigh
--typographyLabelLgNormalXHighCompact
--typographyLabelLgStrong
--typographyLabelMdNormal
--typographyLabelMdNormalHigh
--typographyLabelMdNormalXHigh
--typographyLabelMdNormalCompact
--typographyLabelMdStrong
--typographyLabelSmNormal
--typographyLabelSmNormalHigh
--typographyLabelSmNormalXHigh
--typographyLabelSmStrong
--typographyLabelXsNormal
--typographyLabelXsNormalHigh
--typographyLabelXsNormalXHigh
--typographyLabelXsStrong
--typographyBodyNormal
--typographyBodyNormalHigh
--typographyBodyStrong
--typographyBodyEdited
}