---
theme: citeob2b
type: semantic-typography-tokens
ds-version: "11.4.0"
generated: 2026-11-09
---

## How to use
Use `--ds-text-style-*` as a `font:` shorthand — it bundles weight, size, line-height, and family in one token.
Use `--ds-style-*` when you need to override a single property of a text style.
Use `--ds-semantic-font-*` for base weight/family primitives not tied to a specific text style.

```css
/* composite — preferred */
font: var(--ds-text-style-text-base);

/* single property override */
font-size: var(--ds-style-text-base-font-size);
```

## Composite text styles (`--ds-text-style-*`)
Use as the value of the CSS `font:` shorthand property.

| Token | Description |
|---|---|
| `--ds-text-style-heading-1` |  |
| `--ds-text-style-heading-2` |  |
| `--ds-text-style-heading-3` |  |
| `--ds-text-style-heading-4` |  |
| `--ds-text-style-text-xsmall-strong` |  |
| `--ds-text-style-text-large` |  |
| `--ds-text-style-text-xsmall` |  |
| `--ds-text-style-text-list` |  |
| `--ds-text-style-text-paragraph` |  |
| `--ds-text-style-text-small` |  |
| `--ds-text-style-text-base` | Texte de base des interfaces, avec une line-height plus condensée |
| `--ds-text-style-text-base-strong` |  |
| `--ds-text-style-text-small-strong` |  |
| `--ds-text-style-text-annotation` | Annotations pédagogiques |
| `--ds-text-style-display-1` |  |
| `--ds-text-style-display-2` |  |
| `--ds-text-style-display-number` |  |

## Style properties (`--ds-style-*`)
Individual font properties per text variant. Use for single-property overrides.

| Token | Value | Description |
|---|---|---|
| `--ds-style-chart-number-large-font-family` | `Lato` | Font family of the Chart Number large text style. |
| `--ds-style-chart-number-large-font-size` | `24px` | Font size of the Chart Number large text style. |
| `--ds-style-chart-number-large-font-weight` | `700` | Font weight of the Chart Number large text style. |
| `--ds-style-chart-number-large-line-height` | `1.25px` | Line height of the Chart Number large text style. |
| `--ds-style-chart-number-xlarge-font-family` | `Lato` | Font family of the Chart Number xlarge text style. |
| `--ds-style-chart-number-xlarge-font-size` | `32px` | Font size of the Chart Number xlarge text style. |
| `--ds-style-chart-number-xlarge-font-weight` | `700` | Font weight of the Chart Number xlarge text style. |
| `--ds-style-chart-number-xlarge-line-height` | `1.25px` | Line height of the Chart Number xlarge text style. |
| `--ds-style-display-1-font-family` | `'Gill Sans Nova Inline'` | Font family of the Display 1 text style. |
| `--ds-style-display-1-font-size` | `48px` | Font size of the Display 1 text style. |
| `--ds-style-display-1-font-weight` | `400` | Font weight of the Display 1 text style. |
| `--ds-style-display-1-line-height` | `1px` | Line height of the Display 1 text style. |
| `--ds-style-display-2-font-family` | `'Gill Sans Nova Inline'` | Font family of the Display 2 text style. |
| `--ds-style-display-2-font-size` | `24px` | Font size of the Display 2 text style. |
| `--ds-style-display-2-font-weight` | `400` | Font weight of the Display 2 text style. |
| `--ds-style-display-2-line-height` | `1px` | Line height of the Display 2 text style. |
| `--ds-style-display-number-font-family` | `'Gill Sans Nova Inline'` | Font family of the Display Number text style. |
| `--ds-style-display-number-font-size` | `72px` | Font size of the Display Number text style. |
| `--ds-style-display-number-font-weight` | `400` | Font weight of the Display Number text style. |
| `--ds-style-display-number-line-height` | `1px` | Line height of the Display Number text style. |
| `--ds-style-heading-1-font-family` | `Poppins` | Font family of the Heading 1 text style. |
| `--ds-style-heading-1-font-size` | `32px` | Font size of the Heading 1 text style. |
| `--ds-style-heading-1-font-weight` | `600` | Font weight of the Heading 1 text style. |
| `--ds-style-heading-1-line-height` | `1.25px` | Line height of the Heading 1 text style. |
| `--ds-style-heading-2-font-family` | `Poppins` | Font family of the Heading 2 text style. |
| `--ds-style-heading-2-font-size` | `24px` | Font size of the Heading 2 text style. |
| `--ds-style-heading-2-font-weight` | `600` | Font weight of the Heading 2 text style. |
| `--ds-style-heading-2-line-height` | `1.35px` | Line height of the Heading 2 text style. |
| `--ds-style-heading-3-font-family` | `Poppins` | Font family of the Heading 3 text style. |
| `--ds-style-heading-3-font-size` | `20px` | Font size of the Heading 3 text style. |
| `--ds-style-heading-3-font-weight` | `600` | Font weight of the Heading 3 text style. |
| `--ds-style-heading-3-line-height` | `1.25px` | Line height of the Heading 3 text style. |
| `--ds-style-heading-4-font-family` | `Poppins` | Font family of the Heading 4 text style. |
| `--ds-style-heading-4-font-size` | `16px` | Font size of the Heading 4 text style. |
| `--ds-style-heading-4-font-weight` | `600` | Font weight of the Heading 4 text style. |
| `--ds-style-heading-4-line-height` | `1.25px` | Line height of the Heading 4 text style. |
| `--ds-style-text-annotation-font-family` | `'Blokletters Balpen'` | Font family of the Text Annotation text style. |
| `--ds-style-text-annotation-font-size` | `12px` | Font size of the Text Annotation text style. |
| `--ds-style-text-annotation-font-weight` | `400` | Font weight of the Text Annotation text style. |
| `--ds-style-text-annotation-line-height` | `1.65px` | Line height of the Text Annotation text style. |
| `--ds-style-text-base-font-family` | `Lato` | Font family of the Text Base text style. |
| `--ds-style-text-base-font-size` | `16px` | Font size of the Text Base text style. |
| `--ds-style-text-base-font-weight` | `400` | Font weight of the Text Base text style. |
| `--ds-style-text-base-line-height` | `1.25px` | Line height of the Text Base text style. |
| `--ds-style-text-base-strong-font-family` | `Lato` | Font family of the Text Base Strong text style. |
| `--ds-style-text-base-strong-font-size` | `16px` | Font size of the Text Base Strong text style. |
| `--ds-style-text-base-strong-font-weight` | `700` | Font weight of the Text Base Strong text style. |
| `--ds-style-text-base-strong-line-height` | `1.25px` | Line height of the Text Base Strong text style. |
| `--ds-style-text-large-font-family` | `Lato` | Font family of the Text Large text style. |
| `--ds-style-text-large-font-size` | `18px` | Font size of the Text Large text style. |
| `--ds-style-text-large-font-weight` | `400` | Font weight of the Text Large text style. |
| `--ds-style-text-large-line-height` | `1.5px` | Line height of the Text Large text style. |
| `--ds-style-text-paragraph-font-family` | `Lato` | Font family of the Text Paragraph text style. |
| `--ds-style-text-paragraph-font-size` | `16px` | Font size of the Text Paragraph text style. |
| `--ds-style-text-paragraph-font-weight` | `400` | Font weight of the Text Paragraph text style. |
| `--ds-style-text-paragraph-line-height` | `1.5px` | Line height of the Text Paragraph text style. |
| `--ds-style-text-small-font-family` | `Lato` | Font family of the Text Small text style. |
| `--ds-style-text-small-font-size` | `14px` | Font size of the Text Small text style. |
| `--ds-style-text-small-font-weight` | `400` | Font weight of the Text Small text style. |
| `--ds-style-text-small-line-height` | `1.4px` | Line height of the Text Small text style. |
| `--ds-style-text-small-strong-font-family` | `Lato` | Font family of the Text Small Strong text style. |
| `--ds-style-text-small-strong-font-size` | `14px` | Font size of the Text Small Strong text style. |
| `--ds-style-text-small-strong-font-weight` | `700` | Font weight of the Text Small Strong text style. |
| `--ds-style-text-small-strong-line-height` | `1.4px` | Line height of the Text Small Strong text style. |
| `--ds-style-text-xsmall-font-family` | `Lato` | Font family of the Text Xsmall text style. |
| `--ds-style-text-xsmall-font-size` | `12px` | Font size of the Text Xsmall text style. |
| `--ds-style-text-xsmall-font-weight` | `400` | Font weight of the Text Xsmall text style. |
| `--ds-style-text-xsmall-line-height` | `1.3px` | Line height of the Text Xsmall text style. |
| `--ds-style-text-xsmall-strong-font-family` | `Lato` | Font family of the Text Xsmall Strong text style. |
| `--ds-style-text-xsmall-strong-font-size` | `12px` | Font size of the Text Xsmall Strong text style. |
| `--ds-style-text-xsmall-strong-font-weight` | `700` | Font weight of the Text Xsmall Strong text style. |
| `--ds-style-text-xsmall-strong-line-height` | `1.3px` | Line height of the Text Xsmall Strong text style. |

## Font weight primitives (`--ds-semantic-font-weight-*`)
| Token | Value | Description |
|---|---|---|
| `--ds-semantic-font-weight-default` | `400` | Text weight (regular). Example: body text, default button weight. |
| `--ds-semantic-font-weight-stronger` | `700` | Text weight (bold). Example: avatar initials. |
| `--ds-semantic-font-weight-strong` | `600` | Text weight (semibold). Often used for emphasis in UI chrome. Example: badges, tooltips, select labels. |

## Font family primitives (`--ds-semantic-font-family-*`)
| Token | Value | Description |
|---|---|---|
| `--ds-semantic-font-family-annotation` | `'Blokletters Balpen'` | Font family for annotations — Blokletters Balpen |
| `--ds-semantic-font-family-default` | `Lato` | Default font family — Lato |
| `--ds-semantic-font-family-title` | `Poppins` | Font family for titles — Poppins. Often used inside heading text styles. |
| `--ds-semantic-font-family-title-alt` | `'Gill Sans Nova Inline'` | Alternative font family for titles — Gill Sans Nova Inline |