Typography Tokens

Typography tokens define the typographic styles used across our products, ensuring consistency and coherence in text presentation. These tokens cover various typographic properties such as font size, line height, font weight, letter spacing, and more.

We adhere to property names defined in React Native's Text Style Props specifications.

Responsive to Screen Sizes

Typography tokens are provided as responsive by default as adapting to different screen sizes ensures optimal readability and user experience across our products.

We use "mobile-first" approach, meaning that typography styles are defined for the smallest screen size first and then progressively enhanced for larger screens.

In case some property should remain the same across all screen sizes, we skip defining separate tokens or copy same values for larger screens. This approach keeps the door open for future adjustments without enforcing unnecessary differentiation up front.

Naming Convention

<propertyName>.<propertyValue>

Default Typography Tokens

warning

The following set of tokens represent the default combinations that should cover most use cases in our design system. No values are strictly enforced here, however, we recommend using these as a starting point for your products.

Preview

Font Family

Token name	Value
fontFamily.headline	Inter
fontFamily.display	Inter
fontFamily.body	Inter
fontFamily.label	Inter
fontFamily.monospace	monospace

Font Size

Token name	default	phone	tablet	desktop
fontSize.title	32px	40px	48px	56px
fontSize.hero	28px	32px	40px	44px
fontSize.headline	24px	28px	36px	40px
fontSize.subheadline	22px	24px	28px	32px
fontSize.lead	20px	20px	22px	24px
fontSize.perex	18px	18px	18px	18px
fontSize.body	16px	16px	16px	16px
fontSize.label	14px	14px	14px	14px
fontSize.caption	12px	12px	12px	12px
fontSize.footnote	10px	10px	10px	10px

Font Style

Token name	Value
fontStyle.italic	italic
fontStyle.normal	normal

Font Weight

Token name	Value
fontWeight.thin	100
fontWeight.extraLight	200
fontWeight.light	300
fontWeight.regular	400
fontWeight.medium	500
fontWeight.semiBold	600
fontWeight.bold	700
fontWeight.extraBold	800
fontWeight.black	900
fontWeight.extraBlack	950

Letter Spacing

Token name	default	phone	tablet	desktop
letterSpacing.title	0.8	0.8	0.8	0.8
letterSpacing.hero	0.6	0.6	0.6	0.6
letterSpacing.headline	0.4	0.4	0.4	0.4
letterSpacing.subheadline	0.3	0.3	0.3	0.3
letterSpacing.lead	0.3	0.3	0.3	0.3
letterSpacing.perex	0.2	0.2	0.2	0.2
letterSpacing.body	0.1	0.1	0.1	0.1
letterSpacing.label	0.1	0.1	0.1	0.1
letterSpacing.caption	0.1	0.1	0.1	0.1
letterSpacing.footnote	0.1	0.1	0.1	0.1

Line Height

Token name	default	phone	tablet	desktop
lineHeight.title	36px	40px	40px	56px
lineHeight.hero	32px	32px	32px	44px
lineHeight.headline	28px	32px	32px	44px
lineHeight.subheadline	24px	28px	28px	36px
lineHeight.lead	24px	26px	26px	32px
lineHeight.perex	24px	24px	24px	24px
lineHeight.body	20px	20px	20px	20px
lineHeight.label	16px	16px	16px	16px
lineHeight.caption	16px	16px	16px	16px
lineHeight.footnote	16px	16px	16px	16px

CSS Custom Properties

:root {
  --fontFamily--headline: Inter;
  --fontFamily--display: Inter;
  --fontFamily--body: Inter;
  --fontFamily--label: Inter;
  --fontFamily--monospace: monospace;
  --fontSize--title: 32px;
  --fontSize--hero: 28px;
  --fontSize--headline: 24px;
  --fontSize--subheadline: 22px;
  --fontSize--lead: 20px;
  --fontSize--perex: 18px;
  --fontSize--body: 16px;
  --fontSize--label: 14px;
  --fontSize--caption: 12px;
  --fontSize--footnote: 10px;
  --fontStyle--italic: italic;
  --fontStyle--normal: normal;
  --fontWeight--thin: 100;
  --fontWeight--extraLight: 200;
  --fontWeight--light: 300;
  --fontWeight--regular: 400;
  --fontWeight--medium: 500;
  --fontWeight--semiBold: 600;
  --fontWeight--bold: 700;
  --fontWeight--extraBold: 800;
  --fontWeight--black: 900;
  --fontWeight--extraBlack: 950;
  --letterSpacing--title: 0.8;
  --letterSpacing--hero: 0.6;
  --letterSpacing--headline: 0.4;
  --letterSpacing--subheadline: 0.3;
  --letterSpacing--lead: 0.3;
  --letterSpacing--perex: 0.2;
  --letterSpacing--body: 0.1;
  --letterSpacing--label: 0.1;
  --letterSpacing--caption: 0.1;
  --letterSpacing--footnote: 0.1;
  --lineHeight--title: 36px;
  --lineHeight--hero: 32px;
  --lineHeight--headline: 28px;
  --lineHeight--subheadline: 24px;
  --lineHeight--lead: 24px;
  --lineHeight--perex: 24px;
  --lineHeight--body: 20px;
  --lineHeight--label: 16px;
  --lineHeight--caption: 16px;
  --lineHeight--footnote: 16px;
}

/**
 * Responsive typographic scales:
 */
@media (min-width: 375px) {
  --fontSize--title: 40px;
  --fontSize--hero: 32px;
  --fontSize--headline: 28px;
  --fontSize--subheadline: 24px;
  --fontSize--lead: 20px;
  --fontSize--perex: 18px;
  --fontSize--body: 16px;
  --fontSize--label: 14px;
  --fontSize--caption: 12px;
  --fontSize--footnote: 10px;
  --letterSpacing--title: 0.8;
  --letterSpacing--hero: 0.6;
  --letterSpacing--headline: 0.4;
  --letterSpacing--subheadline: 0.3;
  --letterSpacing--lead: 0.3;
  --letterSpacing--perex: 0.2;
  --letterSpacing--body: 0.1;
  --letterSpacing--label: 0.1;
  --letterSpacing--caption: 0.1;
  --letterSpacing--footnote: 0.1;
  --lineHeight--title: 40px;
  --lineHeight--hero: 32px;
  --lineHeight--headline: 32px;
  --lineHeight--subheadline: 28px;
  --lineHeight--lead: 26px;
  --lineHeight--perex: 24px;
  --lineHeight--body: 20px;
  --lineHeight--label: 16px;
  --lineHeight--caption: 16px;
  --lineHeight--footnote: 16px;
}

@media (min-width: 768px) {
  --fontSize--title: 48px;
  --fontSize--hero: 40px;
  --fontSize--headline: 36px;
  --fontSize--subheadline: 28px;
  --fontSize--lead: 22px;
  --fontSize--perex: 18px;
  --fontSize--body: 16px;
  --fontSize--label: 14px;
  --fontSize--caption: 12px;
  --fontSize--footnote: 10px;
  --letterSpacing--title: 0.8;
  --letterSpacing--hero: 0.6;
  --letterSpacing--headline: 0.4;
  --letterSpacing--subheadline: 0.3;
  --letterSpacing--lead: 0.3;
  --letterSpacing--perex: 0.2;
  --letterSpacing--body: 0.1;
  --letterSpacing--label: 0.1;
  --letterSpacing--caption: 0.1;
  --letterSpacing--footnote: 0.1;
  --lineHeight--title: 40px;
  --lineHeight--hero: 32px;
  --lineHeight--headline: 32px;
  --lineHeight--subheadline: 28px;
  --lineHeight--lead: 26px;
  --lineHeight--perex: 24px;
  --lineHeight--body: 20px;
  --lineHeight--label: 16px;
  --lineHeight--caption: 16px;
  --lineHeight--footnote: 16px;
}

@media (min-width: 1280px) {
  --fontSize--title: 56px;
  --fontSize--hero: 44px;
  --fontSize--headline: 40px;
  --fontSize--subheadline: 32px;
  --fontSize--lead: 24px;
  --fontSize--perex: 18px;
  --fontSize--body: 16px;
  --fontSize--label: 14px;
  --fontSize--caption: 12px;
  --fontSize--footnote: 10px;
  --letterSpacing--title: 0.8;
  --letterSpacing--hero: 0.6;
  --letterSpacing--headline: 0.4;
  --letterSpacing--subheadline: 0.3;
  --letterSpacing--lead: 0.3;
  --letterSpacing--perex: 0.2;
  --letterSpacing--body: 0.1;
  --letterSpacing--label: 0.1;
  --letterSpacing--caption: 0.1;
  --letterSpacing--footnote: 0.1;
  --lineHeight--title: 56px;
  --lineHeight--hero: 44px;
  --lineHeight--headline: 44px;
  --lineHeight--subheadline: 36px;
  --lineHeight--lead: 32px;
  --lineHeight--perex: 24px;
  --lineHeight--body: 20px;
  --lineHeight--label: 16px;
  --lineHeight--caption: 16px;
  --lineHeight--footnote: 16px;
}

Figma JSON

{
  "Typography": {
    "typography/fontFamily/headline": {
      "$type": "text",
      "$value": {
        "default": "Inter",
        "phone": "Inter",
        "tablet": "Inter",
        "desktop": "Inter"
      }
    },
    "typography/fontFamily/display": {
      "$type": "text",
      "$value": {
        "default": "Inter",
        "phone": "Inter",
        "tablet": "Inter",
        "desktop": "Inter"
      }
    },
    "typography/fontFamily/body": {
      "$type": "text",
      "$value": {
        "default": "Inter",
        "phone": "Inter",
        "tablet": "Inter",
        "desktop": "Inter"
      }
    },
    "typography/fontFamily/label": {
      "$type": "text",
      "$value": {
        "default": "Inter",
        "phone": "Inter",
        "tablet": "Inter",
        "desktop": "Inter"
      }
    },
    "typography/fontFamily/monospace": {
      "$type": "text",
      "$value": {
        "default": "monospace",
        "phone": "monospace",
        "tablet": "monospace",
        "desktop": "monospace"
      }
    },
    "typography/fontSize/title": {
      "$type": "dimension",
      "$value": {
        "default": 32,
        "phone": 40,
        "tablet": 48,
        "desktop": 56
      }
    },
    "typography/fontSize/hero": {
      "$type": "dimension",
      "$value": {
        "default": 28,
        "phone": 32,
        "tablet": 40,
        "desktop": 44
      }
    },
    "typography/fontSize/headline": {
      "$type": "dimension",
      "$value": {
        "default": 24,
        "phone": 28,
        "tablet": 36,
        "desktop": 40
      }
    },
    "typography/fontSize/subheadline": {
      "$type": "dimension",
      "$value": {
        "default": 22,
        "phone": 24,
        "tablet": 28,
        "desktop": 32
      }
    },
    "typography/fontSize/lead": {
      "$type": "dimension",
      "$value": {
        "default": 20,
        "phone": 20,
        "tablet": 22,
        "desktop": 24
      }
    },
    "typography/fontSize/perex": {
      "$type": "dimension",
      "$value": {
        "default": 18,
        "phone": 18,
        "tablet": 18,
        "desktop": 18
      }
    },
    "typography/fontSize/body": {
      "$type": "dimension",
      "$value": {
        "default": 16,
        "phone": 16,
        "tablet": 16,
        "desktop": 16
      }
    },
    "typography/fontSize/label": {
      "$type": "dimension",
      "$value": {
        "default": 14,
        "phone": 14,
        "tablet": 14,
        "desktop": 14
      }
    },
    "typography/fontSize/caption": {
      "$type": "dimension",
      "$value": {
        "default": 12,
        "phone": 12,
        "tablet": 12,
        "desktop": 12
      }
    },
    "typography/fontSize/footnote": {
      "$type": "dimension",
      "$value": {
        "default": 10,
        "phone": 10,
        "tablet": 10,
        "desktop": 10
      }
    },
    "typography/fontStyle/italic": {
      "$type": "text",
      "$value": {
        "default": "italic",
        "phone": "italic",
        "tablet": "italic",
        "desktop": "italic"
      }
    },
    "typography/fontStyle/normal": {
      "$type": "text",
      "$value": {
        "default": "normal",
        "phone": "normal",
        "tablet": "normal",
        "desktop": "normal"
      }
    },
    "typography/fontWeight/thin": {
      "$type": "dimension",
      "$value": {
        "default": 100,
        "phone": 100,
        "tablet": 100,
        "desktop": 100
      }
    },
    "typography/fontWeight/extraLight": {
      "$type": "dimension",
      "$value": {
        "default": 200,
        "phone": 200,
        "tablet": 200,
        "desktop": 200
      }
    },
    "typography/fontWeight/light": {
      "$type": "dimension",
      "$value": {
        "default": 300,
        "phone": 300,
        "tablet": 300,
        "desktop": 300
      }
    },
    "typography/fontWeight/regular": {
      "$type": "dimension",
      "$value": {
        "default": 400,
        "phone": 400,
        "tablet": 400,
        "desktop": 400
      }
    },
    "typography/fontWeight/medium": {
      "$type": "dimension",
      "$value": {
        "default": 500,
        "phone": 500,
        "tablet": 500,
        "desktop": 500
      }
    },
    "typography/fontWeight/semiBold": {
      "$type": "dimension",
      "$value": {
        "default": 600,
        "phone": 600,
        "tablet": 600,
        "desktop": 600
      }
    },
    "typography/fontWeight/bold": {
      "$type": "dimension",
      "$value": {
        "default": 700,
        "phone": 700,
        "tablet": 700,
        "desktop": 700
      }
    },
    "typography/fontWeight/extraBold": {
      "$type": "dimension",
      "$value": {
        "default": 800,
        "phone": 800,
        "tablet": 800,
        "desktop": 800
      }
    },
    "typography/fontWeight/black": {
      "$type": "dimension",
      "$value": {
        "default": 900,
        "phone": 900,
        "tablet": 900,
        "desktop": 900
      }
    },
    "typography/fontWeight/extraBlack": {
      "$type": "dimension",
      "$value": {
        "default": 950,
        "phone": 950,
        "tablet": 950,
        "desktop": 950
      }
    },
    "typography/letterSpacing/title": {
      "$type": "dimension",
      "$value": {
        "default": 0.8,
        "phone": 0.8,
        "tablet": 0.8,
        "desktop": 0.8
      }
    },
    "typography/letterSpacing/hero": {
      "$type": "dimension",
      "$value": {
        "default": 0.6,
        "phone": 0.6,
        "tablet": 0.6,
        "desktop": 0.6
      }
    },
    "typography/letterSpacing/headline": {
      "$type": "dimension",
      "$value": {
        "default": 0.4,
        "phone": 0.4,
        "tablet": 0.4,
        "desktop": 0.4
      }
    },
    "typography/letterSpacing/subheadline": {
      "$type": "dimension",
      "$value": {
        "default": 0.3,
        "phone": 0.3,
        "tablet": 0.3,
        "desktop": 0.3
      }
    },
    "typography/letterSpacing/lead": {
      "$type": "dimension",
      "$value": {
        "default": 0.3,
        "phone": 0.3,
        "tablet": 0.3,
        "desktop": 0.3
      }
    },
    "typography/letterSpacing/perex": {
      "$type": "dimension",
      "$value": {
        "default": 0.2,
        "phone": 0.2,
        "tablet": 0.2,
        "desktop": 0.2
      }
    },
    "typography/letterSpacing/body": {
      "$type": "dimension",
      "$value": {
        "default": 0.1,
        "phone": 0.1,
        "tablet": 0.1,
        "desktop": 0.1
      }
    },
    "typography/letterSpacing/label": {
      "$type": "dimension",
      "$value": {
        "default": 0.1,
        "phone": 0.1,
        "tablet": 0.1,
        "desktop": 0.1
      }
    },
    "typography/letterSpacing/caption": {
      "$type": "dimension",
      "$value": {
        "default": 0.1,
        "phone": 0.1,
        "tablet": 0.1,
        "desktop": 0.1
      }
    },
    "typography/letterSpacing/footnote": {
      "$type": "dimension",
      "$value": {
        "default": 0.1,
        "phone": 0.1,
        "tablet": 0.1,
        "desktop": 0.1
      }
    },
    "typography/lineHeight/title": {
      "$type": "dimension",
      "$value": {
        "default": 36,
        "phone": 40,
        "tablet": 40,
        "desktop": 56
      }
    },
    "typography/lineHeight/hero": {
      "$type": "dimension",
      "$value": {
        "default": 32,
        "phone": 32,
        "tablet": 32,
        "desktop": 44
      }
    },
    "typography/lineHeight/headline": {
      "$type": "dimension",
      "$value": {
        "default": 28,
        "phone": 32,
        "tablet": 32,
        "desktop": 44
      }
    },
    "typography/lineHeight/subheadline": {
      "$type": "dimension",
      "$value": {
        "default": 24,
        "phone": 28,
        "tablet": 28,
        "desktop": 36
      }
    },
    "typography/lineHeight/lead": {
      "$type": "dimension",
      "$value": {
        "default": 24,
        "phone": 26,
        "tablet": 26,
        "desktop": 32
      }
    },
    "typography/lineHeight/perex": {
      "$type": "dimension",
      "$value": {
        "default": 24,
        "phone": 24,
        "tablet": 24,
        "desktop": 24
      }
    },
    "typography/lineHeight/body": {
      "$type": "dimension",
      "$value": {
        "default": 20,
        "phone": 20,
        "tablet": 20,
        "desktop": 20
      }
    },
    "typography/lineHeight/label": {
      "$type": "dimension",
      "$value": {
        "default": 16,
        "phone": 16,
        "tablet": 16,
        "desktop": 16
      }
    },
    "typography/lineHeight/caption": {
      "$type": "dimension",
      "$value": {
        "default": 16,
        "phone": 16,
        "tablet": 16,
        "desktop": 16
      }
    },
    "typography/lineHeight/footnote": {
      "$type": "dimension",
      "$value": {
        "default": 16,
        "phone": 16,
        "tablet": 16,
        "desktop": 16
      }
    }
  }
}

React Native

TBD

Up Next

---

Spacing Tokens

Spacing tokens define consistent spacing values used for margins, paddings, and gaps in our components.

Spacing Tokens ->