Typography

23 named variants from the Figma design system, surfaced as Typography.<Variant>. Display tier uses font-display; H1 → Tiny use font-text.

Display tier (font-display)

Typography.Maxfont-display font-normal text-size-23 leading-height-23 tracking-spacing-23

Max site title

Typography.Hugefont-display font-normal text-size-22 leading-height-22 tracking-spacing-22

Huge site title

Typography.Herofont-display font-normal text-size-21 leading-height-21 tracking-spacing-21

Hero site title

Typography.Majorfont-display font-normal text-size-20 leading-height-20 tracking-spacing-20

Major site title

Typography.Bigfont-display font-normal text-size-19 leading-height-19 tracking-spacing-19

Big site title

Typography.DisplayXLfont-display font-normal text-size-18 leading-height-18 tracking-spacing-18

Display XL

Typography.DisplayLGfont-display font-normal text-size-17 leading-height-17 tracking-spacing-17

Display LG

Typography.DisplayMDfont-display font-normal text-size-16 leading-height-16 tracking-spacing-16

Display MD

Typography.DisplaySMfont-display font-normal text-size-15 leading-height-15 tracking-spacing-14

Display SM

Text tier (font-text)

Typography.H1font-text font-normal text-size-14 leading-height-14 tracking-spacing-14

H1 header

Typography.H2font-text font-normal text-size-13 leading-height-13 tracking-spacing-13

H2 header

Typography.H3font-text font-normal text-size-12 leading-height-12 tracking-spacing-12

H3 header

Typography.H4font-text font-normal text-size-11 leading-height-11 tracking-spacing-11

H4 header

Typography.Largefont-text font-normal text-size-10 leading-height-10 tracking-spacing-10

Large text

Typography.Readingfont-text font-normal text-size-9 leading-height-9 tracking-spacing-9

Reading text

Typography.Pfont-text font-normal text-size-8 leading-height-8 tracking-spacing-8

P regular text

Typography.Smallfont-text font-normal text-size-7 leading-height-7 tracking-spacing-7

Small text

Typography.Compactfont-text font-normal text-size-6 leading-height-6 tracking-spacing-6

Compact text

Typography.Captionfont-text font-normal text-size-5 leading-height-5 tracking-spacing-5

Caption text

Typography.Minifont-text font-normal text-size-4 leading-height-4 tracking-spacing-4

Mini text

Typography.Microfont-text font-normal text-size-3 leading-height-3 tracking-spacing-3

Micro text

Typography.Finefont-text font-normal text-size-2 leading-height-2 tracking-spacing-2

Fine text

Typography.Tinyfont-text font-normal text-size-1 leading-height-1 tracking-spacing-1

Tiny text

Usage

import Typography from "~/designSystem/components/Typography";

<Typography.Max>Sell smarter</Typography.Max>
<Typography.P className="text-core-silver-11">Body text.</Typography.P>
<Typography.H1 as="h2">H1 styling, h2 in DOM</Typography.H1>