# Typography
> Typography can help create clear hierarchies, conveys the appropriate sentiment to assist our users through each stage of their journey.

## Typefaces

Wave is using **IBM Plex Sans** as its typeface for all text — headings, subheadings, and body text.

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  className="mTm"
  columnGap="spacingL"
>
  <GridItem>
    <Card
      href="https://fonts.google.com/specimen/IBM+Plex+Sans"
      subTitle="Google Fonts"
      title="IBM Plex Sans"
      actionIcon="externalLink"
    />
  </GridItem>
</Grid>

## Headings scale

<TypeScale data={typographyTokens.font.style.headlines} />

## Body text sizes

<TypeScale data={typographyTokens.font.style.body} prefixText="Body" />

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
>
  <GridItem>
    <Card
      href="https://github.com/Volue/wave/tree/next/design-primitives/design-typography"
      title="See typography tokens repo"
      actionIcon="externalLink"
    />
  </GridItem>
</Grid>

## Usage

Wave provides a variety of tokens controlling the text content styles like font size, line height, etc.
They are exposed through one of the following typography components:

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
>
  <GridItem>
    <Card
      href="/components/typography/text"
      title="Text component"
      actionIcon="arrowRight"
    />
  </GridItem>
  <GridItem>
    <Card
      href="/components/typography/heading"
      title="Heading component"
      actionIcon="arrowRight"
    />
  </GridItem>
</Grid>