# 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 |

## Lists.

Lyne offers list styles that are applied to the native HTML lists. The font size is set with a text class such as `sbb-text-m`.

| List | CSS class | Sass mixin | Usage |
| --- | --- | --- | --- |
| Standard | `sbb-list` | `list` | On `ul` and `ol`, also nested. The colour is inherited. |
| Steps | `sbb-step-list` | `step-list` | Only on `ol`. Describes a sequence of steps. |
| Icon | `sbb-icon-list` | `icon-list` | Icon as bullet, `circle-tick-small` by default. Custom icon with `--sbb-icon-list-marker-icon`, icon colour with `--sbb-icon-list-marker-icon-color`. |
| Description | `sbb-list` | `description-list` | On `dl` for label and description. The colour is inherited. |

### Standard.

- First item
- Second item

### Steps.

1.  First step
2.  Second step

### Icon.

- Task created
- Changes applied

### Description.

Label:

Description of the label.

---

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