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

## Overview

## Typefaces

Vera is using two typefaces: **FK Display** and **Source Sans Pro**.

The first is used for all headings until the size 21, and the second is used for subheadings and body text.

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  className="mTm"
  columnGap="spacingL"
>
  <GridItem>
    <Card
      href="https://fonts.floriankarsten.com/fk-display"
      subTitle="Florian Karsten Typefaces"
      title="FK Display"
      actionIcon="externalLink"
    />
  </GridItem>
  <GridItem>
    <Card
      href="https://fonts.google.com/specimen/Source+Sans+Pro"
      subTitle="Google fonts"
      title="Source Sans Pro"
      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/vera/tree/next/design-primitives/design-typography"
      title="See typography tokens repo"
      actionIcon="externalLink"
    />
  </GridItem>
</Grid>

## Usage

Vera 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>