# Typography.

## What does the component do?

- It defines all permitted fonts in the SBB Mobile context.

## When should the component be used?

- For the design of all components and pages.

## Rules

- None

## Variants

- [xlarge, light](#xlarge-light)
- [large, light](#large-light)
- [large, bold](#large-bold)
- [medium, light](#medium-light)
- [medium, bold](#medium-bold)
- [small, light](#small-light)
- [small, bold](#small-bold)
- [xsmall, light](#xsmall-light)
- [xsmall, bold](#xsmall-bold)

### xlarge, light

![Image of the xlarge style](https://digital.sbb.ch/assets/images/mobile/x-large-light.webp "Stil xlarge")

![Image of the xlarge style](https://digital.sbb.ch/assets/images/mobile/x-large-dark.webp "Stil xlarge")

### large, light

![Image of the large style, light](https://digital.sbb.ch/assets/images/mobile/large-light-light.webp "Stil large, light")

![Image of the large style, light](https://digital.sbb.ch/assets/images/mobile/large-light-dark.webp "Stil large, light")

### large, bold

![Image of the large style, bold](https://digital.sbb.ch/assets/images/mobile/large-bold-light.webp "Stil large, bold")

![Image of the large style, bold](https://digital.sbb.ch/assets/images/mobile/large-bold-dark.webp "Stil large, bold")

### medium, light

![Image of the large style, light](https://digital.sbb.ch/assets/images/mobile/medium-light-light.webp "Stil large, light")

![Image of the large style, light](https://digital.sbb.ch/assets/images/mobile/medium-light-dark.webp "Stil large, light")

### medium, bold

![Image of the large style, bold](https://digital.sbb.ch/assets/images/mobile/medium-bold-light.webp "Stil large, bold")

![Image of the large style, bold](https://digital.sbb.ch/assets/images/mobile/medium-bold-dark.webp "Stil large, bold")

### small, light

![Image of the large style, light](https://digital.sbb.ch/assets/images/mobile/small-light-light.webp "Stil large, light")

![Image of the large style, light](https://digital.sbb.ch/assets/images/mobile/small-light-dark.webp "Stil large, light")

### small, bold

![Image of the large style, bold](https://digital.sbb.ch/assets/images/mobile/small-bold-light.webp "Stil large, bold")

![Image of the large style, bold](https://digital.sbb.ch/assets/images/mobile/small-bold-dark.webp "Stil large, bold")

### xsmall, light

![Image of the large style, light](https://digital.sbb.ch/assets/images/mobile/x-small-light-light.webp "Stil large, light")

![Image of the large style, light](https://digital.sbb.ch/assets/images/mobile/x-small-light-dark.webp "Stil large, light")

### xsmall, bold

![Image of the large style, bold](https://digital.sbb.ch/assets/images/mobile/x-small-bold-light.webp "Stil large, bold")

![Image of the large style, bold](https://digital.sbb.ch/assets/images/mobile/x-small-bold-dark.webp "Stil large, bold")

---

Source: https://digital.sbb.ch/en/design-system/mobile/basics/typography/