<Meta title="Typography/v7" />

# Typography (v7)

Design system version 7
- [Typefaces](#typefaces)
- [Type scale](#type-scale)
- [Line height](#line-height)

## Typefaces

### Economist Serif

#### Economist Serif OsF

Economist Serif with old style figures as default.

| Font | Weight | Style | Token |
| --- | --- | --- | --- |
| Light | 300 | normal | `--ds-type-system-serif` |
| Light Italic | 300 | italic | |
| Regular | 400 | normal | |
| Regular Italic | 400 | italic | |
| Medium | 500 | normal | |
| Medium Italic | 500 | italic | |
| SemiBold | 600 | normal | |
| SemiBold Italic | 600 | italic | |
| Bold | 700 | normal | |
| Bold Italic | 700 | italic | |
| ExtraBold | 800 | normal | |
| ExtraBold Italic | 800 | italic | |
| Black | 900 | normal | |
| Black Italic | 900 | italic | |

#### Economist Serif SC

Economist Serif with small caps only.

| Font | Token |
| --- | --- |
| All weights and styles supported in Economist Serif | `--ds-type-system-serif-smallcaps` |

#### Economist Serif LF

Economist Serif with proportional lining figures as default.

| Font | Token |
| --- | --- |
| All weights and styles supported in Economist Serif | `--ds-type-system-serif-lining` |

### Economist Sans


#### Economist Sans OsF

Economist Sans with old style figures as default.

| Font | Weight | Style | Token |
| --- | --- | --- | --- |
| Light | 300 | normal | `--ds-type-system-sans` |
| Light Italic | 300 | italic | |
| Regular | 400 | normal | |
| Regular Italic | 400 | italic | |
| Medium | 500 | normal | |
| Medium Italic | 500 | italic | |
| SemiBold | 600 | normal | |
| SemiBold Italic | 600 | italic | |
| Bold | 700 | normal | |
| Bold Italic | 700 | italic | |
| ExtraBold | 800 | normal | |
| ExtraBold Italic | 800 | italic | |
| Black | 900 | normal | |
| Black Italic | 900 | italic | |

#### Economist Sans SC

Economist Sans with small caps only.

| Font | Token |
| --- | --- |
| All weights and styles supported in Economist Serif | `--ds-type-system-sans-smallcaps` |

#### Economist Sans LF

Economist Sans with proportional lining figures as default.

| Font | Token |
| --- | --- |
| All weights and styles supported in Economist Sans | `--ds-type-system-sans-lining` |

### Glyphs

Our typefaces support a large range of special characters, glyphs
and ligatures. Glyphs allow us to use text characters in place of
graphics in components. As text, they support multiple weights
and sizes.

#### Arrow glyphs

| Font | Characters |
| --- | --- |
| Economist Serif and Sans | |

#### Ecopict glyphs

| Font | Characters |
| --- | --- |
| EcoPict | 123456789AB |

## Type scale

Provides a definitive list of resonant type sizes.

| Scale | px | rem | Token |
| --- | --- | --- | --- |
| -2 | 13 | 0.8125 | --ds-type-scale--2 |
| -1 | 15 | 0.9375 | --ds-type-scale--1 |
| 0 | 17 | 1.0625 | --ds-type-scale-0 |
| 1 | 20 | 1.25 | --ds-type-scale-1 |
| 2 | 23 | 1.4375 | --ds-type-scale-2 |
| 3 | 26 | 1.625 | --ds-type-scale-3 |
| 4 | 30 | 1.875 | --ds-type-scale-4 |
| 5 | 34 | 2.125 | --ds-type-scale-5 |
| 6 | 40 | 2.5 | --ds-type-scale-6 |
| 7 | 46 | 2.875 | --ds-type-scale-7 |
| 8 | 52 | 3.25 | --ds-type-scale-8 |
| 9 | 60 | 3.75 | --ds-type-scale-9 |
| 10 | 68 | 4.25 | --ds-type-scale-10 |
| 11 | 80 | 5 | --ds-type-scale-11 |
| 12 | 92 | 5.75 | --ds-type-scale-12 |

## Line-height

### Multipliers

Line-height (leading) multipliers. Provides a vertical rhythm
across all font sizes, and ensures text and headings are readable
and legible.

| Multiplier | Usage | Token |
| --- | --- | --- |
| 1.4 | Font size is less than or equal to 23px | --ds-type-leading-lower |
| 1.18 | Font size is greater than or equal to 23px | --ds-type-leading-upper |

| Multiplier | Usage | Token |
| --- | --- | --- |
| 1.125 | For non-wrapping link components only | --ds-type-leading-border-link |

### Computed values

| Type scale | Type size (px) | Multiplier | Line-height (px) |
| --- | --- | --- | --- |
| -2 | 13 | 1.4 | 18.2 |
| -1 | 15 | 1.4 | 21 |
| 0 | 17 | 1.4 | 23.8 |
| 1 | 20 | 1.4 | 28 |
| 2 | 23 | 1.18 | 27.14 |
| 3 | 26 | 1.18 | 30.68 |
| 4 | 30 | 1.18 | 35.4 |
| 5 | 34 | 1.18 | 40.12 |
| 6 | 40 | 1.18 | 47.2 |
| 7 | 46 | 1.18 | 54.28 |
| 8 | 52 | 1.18 | 61.36 |
| 9 | 60 | 1.18 | 70.8 |
| 10 | 68 | 1.18 | 80.24 |
| 11 | 80 | 1.18 | 94.4 |
| 12 | 92 | 1.18 | 108.56 |