# Typography.

## Font Family.

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-typo-font-family` | SBB, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif |

## Scale.

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-typo-scale-0-75x` | 12px |
| `--sbb-typo-scale-0-8125x` | 13px |
| `--sbb-typo-scale-0-875x` | 14px |
| `--sbb-typo-scale-default` | 16px |
| `--sbb-typo-scale-1-125x` | 18px |
| `--sbb-typo-scale-1-25x` | 20px |
| `--sbb-typo-scale-1-5x` | 24px |
| `--sbb-typo-scale-2x` | 32px |
| `--sbb-typo-scale-2-5x` | 40px |
| `--sbb-typo-scale-3x` | 48px |
| `--sbb-typo-scale-3-5x` | 56px |
| `--sbb-typo-scale-4x` | 64px |

## Letter Spacing.

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-typo-letter-spacing-heading` | 0em |
| `--sbb-typo-letter-spacing-text` | 0.03em |

## Line Height.

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-typo-line-height-heading` | 1.4 |
| `--sbb-typo-line-height-text` | 1.75 |

## Listen.

Lyne bietet Listenstile, die auf die nativen HTML-Listen angewendet werden. Die Schriftgrösse wird mit einer Text-Klasse wie `sbb-text-m` festgelegt.

| Liste | CSS-Klasse | Sass-Mixin | Verwendung |
| --- | --- | --- | --- |
| Standard | `sbb-list` | `list` | Auf `ul` und `ol`, auch verschachtelt. Die Farbe wird geerbt. |
| Schritte | `sbb-step-list` | `step-list` | Nur auf `ol`. Beschreibt eine Abfolge von Schritten. |
| Icon | `sbb-icon-list` | `icon-list` | Icon als Aufzählungszeichen, standardmässig `circle-tick-small`. Eigenes Icon mit `--sbb-icon-list-marker-icon`, Icon-Farbe mit `--sbb-icon-list-marker-icon-color`. |
| Beschreibung | `sbb-list` | `description-list` | Auf `dl` für Label und Beschreibung. Die Farbe wird geerbt. |

### Standard.

- Erster Punkt
- Zweiter Punkt

### Schritte.

1.  Erster Schritt
2.  Zweiter Schritt

### Icon.

- Aufgabe erstellt
- Änderungen übernommen

### Beschreibung.

Label:

Beschreibung des Labels.

---

Source: https://digital.sbb.ch/de/design-system/lyne/design-tokens/typography/