# Typography

Font families, sizes, weights, leading and tracking, then the composed text styles.

| Name | CSS var | Tailwind | Light | Dark | Modes | Description |
| --- | --- | --- | --- | --- | --- | --- |
| --font-display | `--font-display` | `font-display` | `Sora` | `Sora` |  | Raw value. Use a semantic token instead. |
| --font-mono | `--font-mono` | `font-mono` | `Geist Mono` | `Geist Mono` |  | Raw value. Use a semantic token instead. |
| --font-sans | `--font-sans` | `font-sans` | `Geist` | `Geist` |  | Raw value. Use a semantic token instead. |
| --font-size-11 | `--font-size-11` |  | `11px` | `11px` |  | 11px type size. Primitive: bind a text style to it rather than using it directly. |
| --font-size-13 | `--font-size-13` |  | `13px` | `13px` |  | 13px type size. Primitive: bind a text style to it rather than using it directly. |
| --font-size-28 | `--font-size-28` |  | `28px` | `28px` |  | 28px type size. Primitive: bind a text style to it rather than using it directly. |
| --font-weight-bold | `--font-weight-bold` | `font-bold` | `700` | `700` |  | Font weight 700. Primitive: bind a text style to it. |
| --font-weight-extrabold | `--font-weight-extrabold` | `font-extrabold` | `800` | `800` |  | Font weight 800. Primitive: bind a text style to it. |
| --font-weight-medium | `--font-weight-medium` | `font-medium` | `500` | `500` |  | Raw value. Use a semantic token instead. |
| --font-weight-normal | `--font-weight-normal` | `font-normal` | `400` | `400` |  | Raw value. Use a semantic token instead. |
| --font-weight-semibold | `--font-weight-semibold` | `font-semibold` | `600` | `600` |  | Raw value. Use a semantic token instead. |
| --leading-10 | `--leading-10` |  | `40px` | `40px` |  | Raw value. Use a semantic token instead. |
| --leading-13 | `--leading-13` |  | `52px` | `52px` |  | Raw value. Use a semantic token instead. |
| --leading-16 | `--leading-16` |  | `64px` | `64px` |  | Raw value. Use a semantic token instead. |
| --leading-4 | `--leading-4` |  | `16px` | `16px` |  | Raw value. Use a semantic token instead. |
| --leading-5 | `--leading-5` |  | `20px` | `20px` |  | Raw value. Use a semantic token instead. |
| --leading-6 | `--leading-6` |  | `24px` | `24px` |  | Raw value. Use a semantic token instead. |
| --leading-7 | `--leading-7` |  | `28px` | `28px` |  | Raw value. Use a semantic token instead. |
| --leading-8 | `--leading-8` |  | `32px` | `32px` |  | Raw value. Use a semantic token instead. |
| --leading-9 | `--leading-9` |  | `36px` | `36px` |  | Raw value. Use a semantic token instead. |
| --leading-display-lg | `--leading-display-lg` | `leading-display-lg` | `44px` | `44px` | Mobile: 44px; Tablet: 56px; Desktop: 66px; Wide: 66px |  |
| --leading-display-md | `--leading-display-md` | `leading-display-md` | `38px` | `38px` | Mobile: 38px; Tablet: 44px; Desktop: 56px; Wide: 56px |  |
| --leading-display-sm | `--leading-display-sm` | `leading-display-sm` | `32px` | `32px` | Mobile: 32px; Tablet: 38px; Desktop: 44px; Wide: 44px |  |
| --leading-heading-lg | `--leading-heading-lg` | `leading-heading-lg` | `28px` | `28px` | Mobile: 28px; Tablet: 28px; Desktop: 32px; Wide: 32px |  |
| --leading-heading-md | `--leading-heading-md` | `leading-heading-md` | `26px` | `26px` | Mobile: 26px; Tablet: 26px; Desktop: 28px; Wide: 28px |  |
| --leading-heading-sm | `--leading-heading-sm` | `leading-heading-sm` | `24px` | `24px` | Mobile: 24px; Tablet: 24px; Desktop: 26px; Wide: 26px |  |
| --leading-heading-xl | `--leading-heading-xl` | `leading-heading-xl` | `32px` | `32px` | Mobile: 32px; Tablet: 32px; Desktop: 38px; Wide: 38px |  |
| --letter-spacing-normal | `--letter-spacing-normal` |  | `0em` | `0em` |  | 0 — h5, all body and labels. |
| --letter-spacing-snug | `--letter-spacing-snug` |  | `-0.01em` | `-0.01em` |  | -0.01em — h3 and h4. |
| --letter-spacing-tight | `--letter-spacing-tight` |  | `-0.02em` | `-0.02em` |  | -0.02em — h1 and h2. |
| --letter-spacing-tighter | `--letter-spacing-tighter` |  | `-0.025em` | `-0.025em` |  | -0.025em — display. |
| --letter-spacing-wide | `--letter-spacing-wide` |  | `0.04em` | `0.04em` |  | +0.04em — small uppercase eyebrows (h6). |
| --line-height-loose | `--line-height-loose` |  | `1.5` | `1.5` |  | 1.5 — all body copy and code. |
| --line-height-normal | `--line-height-normal` |  | `1.3` | `1.3` |  | 1.3 — h2 through h5. |
| --line-height-relaxed | `--line-height-relaxed` |  | `1.4` | `1.4` |  | 1.4 — eyebrows, subheads and labels. |
| --line-height-snug | `--line-height-snug` |  | `1.2` | `1.2` |  | 1.2 — h1. |
| --line-height-tight | `--line-height-tight` |  | `1.15` | `1.15` |  | 1.15 — display headings only. |
| --text-2xl | `--text-2xl` | `text-2xl` | `24px` | `24px` |  | Raw value. Use a semantic token instead. |
| --text-3xl | `--text-3xl` | `text-3xl` | `30px` | `30px` |  | Raw value. Use a semantic token instead. |
| --text-4xl | `--text-4xl` | `text-4xl` | `36px` | `36px` |  | Raw value. Use a semantic token instead. |
| --text-5xl | `--text-5xl` | `text-5xl` | `48px` | `48px` |  | Raw value. Use a semantic token instead. |
| --text-6xl | `--text-6xl` | `text-6xl` | `60px` | `60px` |  | Raw value. Use a semantic token instead. |
| --text-base | `--text-base` | `text-base` | `16px` | `16px` |  | Raw value. Use a semantic token instead. |
| --text-display-lg | `--text-display-lg` | `text-display-lg` | `36px` | `36px` | Mobile: 36px; Tablet: 48px; Desktop: 60px; Wide: 60px | Responsive size for display/lg. Set the Layout mode on the frame. |
| --text-display-md | `--text-display-md` | `text-display-md` | `30px` | `30px` | Mobile: 30px; Tablet: 36px; Desktop: 48px; Wide: 48px | Responsive size for display/md. Set the Layout mode on the frame. |
| --text-display-sm | `--text-display-sm` | `text-display-sm` | `24px` | `24px` | Mobile: 24px; Tablet: 30px; Desktop: 36px; Wide: 36px | Responsive size for display/sm. Set the Layout mode on the frame. |
| --text-heading-lg | `--text-heading-lg` | `text-heading-lg` | `20px` | `20px` | Mobile: 20px; Tablet: 20px; Desktop: 24px; Wide: 24px | Responsive size for heading/lg. Set the Layout mode on the frame. |
| --text-heading-md | `--text-heading-md` | `text-heading-md` | `18px` | `18px` | Mobile: 18px; Tablet: 18px; Desktop: 20px; Wide: 20px |  |
| --text-heading-sm | `--text-heading-sm` | `text-heading-sm` | `16px` | `16px` | Mobile: 16px; Tablet: 16px; Desktop: 18px; Wide: 18px |  |
| --text-heading-xl | `--text-heading-xl` | `text-heading-xl` | `24px` | `24px` | Mobile: 24px; Tablet: 24px; Desktop: 30px; Wide: 30px | Responsive size for heading/xl. Set the Layout mode on the frame. |
| --text-lg | `--text-lg` | `text-lg` | `18px` | `18px` |  | Raw value. Use a semantic token instead. |
| --text-sm | `--text-sm` | `text-sm` | `14px` | `14px` |  | Raw value. Use a semantic token instead. |
| --text-xl | `--text-xl` | `text-xl` | `20px` | `20px` |  | Raw value. Use a semantic token instead. |
| --text-xs | `--text-xs` | `text-xs` | `12px` | `12px` |  | Raw value. Use a semantic token instead. |

## Text styles

| Style | Utility | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- | --- |
| body/lg/bold | `text-body-lg-bold` | Geist | 18px | 700 | 28px | 0em |
| body/lg/medium | `text-body-lg-medium` | Geist | 18px | 500 | 28px | 0em |
| body/lg/regular | `text-body-lg-regular` | Geist | 18px | 400 | 28px | 0em |
| body/md/bold | `text-body-md-bold` | Geist | 16px | 700 | 24px | 0em |
| body/md/medium | `text-body-md-medium` | Geist | 16px | 500 | 24px | 0em |
| body/md/regular | `text-body-md-regular` | Geist | 16px | 400 | 24px | 0em |
| body/sm/bold | `text-body-sm-bold` | Geist | 14px | 700 | 20px | 0em |
| body/sm/medium | `text-body-sm-medium` | Geist | 14px | 500 | 20px | 0em |
| body/sm/regular | `text-body-sm-regular` | Geist | 14px | 400 | 20px | 0em |
| body/xs/bold | `text-body-xs-bold` | Geist | 12px | 700 | 16px | 0em |
| body/xs/medium | `text-body-xs-medium` | Geist | 12px | 500 | 16px | 0em |
| body/xs/regular | `text-body-xs-regular` | Geist | 12px | 400 | 16px | 0em |
| code/sm | `text-code-sm` | Geist Mono | 14px | 400 | 20px | 0em |
| code/xs | `text-code-xs` | Geist Mono | 12px | 400 | 16px | 0em |
| display/lg/medium | `text-display-lg-medium` | Sora | 36px | 500 | 44px | -0.03em |
| display/lg/semibold | `text-display-lg-semibold` | Sora | 36px | 600 | 44px | -0.03em |
| display/md/medium | `text-display-md-medium` | Sora | 30px | 500 | 38px | -0.025em |
| display/md/semibold | `text-display-md-semibold` | Sora | 30px | 600 | 38px | -0.025em |
| display/sm/medium | `text-display-sm-medium` | Sora | 24px | 500 | 32px | -0.02em |
| display/sm/semibold | `text-display-sm-semibold` | Sora | 24px | 600 | 32px | -0.02em |
| heading/lg | `text-heading-lg` | Sora | 20px | 500 | 28px | -0.015em |
| heading/md | `text-heading-md` | Sora | 18px | 500 | 26px | -0.015em |
| heading/sm | `text-heading-sm` | Sora | 16px | 500 | 24px | -0.01em |
| heading/xl | `text-heading-xl` | Sora | 24px | 500 | 32px | -0.02em |
| label/md/bold | `text-label-md-bold` | Geist | 16px | 700 | 24px | 0em |
| label/md/medium | `text-label-md-medium` | Geist | 16px | 500 | 24px | 0em |
| label/md/regular | `text-label-md-regular` | Geist | 16px | 400 | 24px | 0em |
| label/md/semibold | `text-label-md-semibold` | Geist | 16px | 600 | 24px | 0em |
| label/overline | `text-label-overline` | Geist | 12px | 600 | 16px | 0.06em |
| label/sm/bold | `text-label-sm-bold` | Geist | 14px | 700 | 20px | 0em |
| label/sm/medium | `text-label-sm-medium` | Geist | 14px | 500 | 20px | 0em |
| label/sm/regular | `text-label-sm-regular` | Geist | 14px | 400 | 20px | 0em |
| label/sm/semibold | `text-label-sm-semibold` | Geist | 14px | 600 | 20px | 0em |
| label/xs/bold | `text-label-xs-bold` | Geist | 12px | 700 | 16px | 0em |
| label/xs/medium | `text-label-xs-medium` | Geist | 12px | 500 | 16px | 0em |
| label/xs/regular | `text-label-xs-regular` | Geist | 12px | 400 | 16px | 0em |
| label/xs/semibold | `text-label-xs-semibold` | Geist | 12px | 600 | 16px | 0em |
| numeric/lg | `text-numeric-lg` | Geist Mono | 24px | 600 | 32px | -0.02em |
| numeric/md | `text-numeric-md` | Geist Mono | 16px | 500 | 24px | 0em |
| numeric/sm | `text-numeric-sm` | Geist Mono | 14px | 500 | 20px | 0em |
| numeric/xl | `text-numeric-xl` | Geist Mono | 36px | 600 | 40px | -0.03em |
| numeric/xs | `text-numeric-xs` | Geist Mono | 12px | 500 | 16px | 0em |
| title/lg | `text-title-lg` | Geist | 20px | 600 | 28px | -0.005em |
| title/md | `text-title-md` | Geist | 16px | 600 | 24px | 0em |
| title/sm | `text-title-sm` | Geist | 14px | 600 | 20px | 0em |