<Meta title="Typography/v5" />

# Typography (v5)

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

## Typefaces

### Milo

#### Milo TE

Primarily for body text, descriptions and headlines.

| Font | Weight | Style | Token |
| --- | --- | --- | --- |
| Regular | 400 | normal | `--ds-type-system-serif` |
| Italic | 400 | italic | |
| Medium | 500 | normal | |
| Medium Italic | 500 | italic | |
| Bold | 700 | normal | |
| Bold Italic | 700 | italic | |

#### Milo SC TE

For rendering small caps in text where Milo TE is used.

| Font | Weight | Style | Token |
| --- | --- | --- | --- |
| Regular | 400 | normal | `--ds-type-system-serif-smallcaps` |
| Italic | 400 | italic | |
| Medium | 500 | normal | |
| Medium Italic | 500 | italic | |
| Bold | 700 | normal | |
| Bold Italic | 700 | italic | |

#### Milo LN TE

For rendering Milo TE lining figures only.

| Font | Weight | Style | Token |
| --- | --- | --- | --- |
| Regular | 400 | normal | `--ds-type-system-serif-lining` |
| Italic | 400 | italic | |
| Medium | 500 | normal | |
| Medium Italic | 500 | italic | |
| Bold | 700 | normal | |
| Bold Italic | 700 | italic | |

### Econ Sans

#### Econ Sans OS

Primarily for navigation elements, such as: section openers, fly
titles, datelines, metadata, captions. Uses old style figures.

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

#### Econ Sans

Lining figures only. For use with wayfinding items such as
pagination and form labels, as well as numerical data in tables
and form inputs.

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

#### Econ Sans Condensed

For charts and interactive graphics. Uses lining figures.

| Font | Token |
| --- | --- |
| All weights and styles supported in Econ Sans OS | `--ds-type-system-sans-condensed` |

### 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 |
| --- | --- |
| Econ Sans, Econ Sans OS, Econ Sans Condensed | |

#### Ecopict glyphs

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

## Type scale

Provides a definitive list of resonant type sizes. Each step is
an increment on the preceding value. Uses a Major Second scale,
or 1.125. (note about base 16)

| Scale | px | rem | Token |
| --- | --- | --- | --- |
| -3 | 11 (11.237) | 0.702 | --ds-type-scale--3 |
| -2 | 13 (12.642) | 0.79 | --ds-type-scale--2 |
| -1 | 14 (14.222) | 0.889 | --ds-type-scale--1 |
| 0 | 16 | 1 | --ds-type-scale-0 |
| 1 | 18 | 1.125 | --ds-type-scale-1 |
| 2 | 20 (20.25) | 1.266 | --ds-type-scale-2 |
| 3 | 23 (22.781) | 1.424 | --ds-type-scale-3 |
| 4 | 26 (25.629) | 1.602 | --ds-type-scale-4 |
| 5 | 29 (28.833) | 1.802 | --ds-type-scale-5 |
| 6 | 32 (32.437) | 2.027 | --ds-type-scale-6 |
| 7 | 36 (36.491) | 2.281 | --ds-type-scale-7 |
| 8 | 41 (41.053) | 2.566 | --ds-type-scale-8 |
| 9 | 46 (46.184) | 2.887 | --ds-type-scale-9 |
| 10 | 52 (51.957) | 3.247 | --ds-type-scale-10 |
| 11 | 58 (58.452) | 3.653 | --ds-type-scale-11 |
| 12 | 66 (65.758) | 4.11 | --ds-type-scale-12 |
| 13 | 74 (73.978) | 4.624 | --ds-type-scale-13 |

## 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 / 1.266rem | --ds-type-leading-lower |
| 1.2 | Font size is greater than or equal to 23px / 1.424rem |
--ds-type-leading-upper |
| Multiplier | Usage | Token |
| --- | --- | --- |
| 1.125 | For non-wrapping link components only | --ds-type-leading-border-link |

### Computed values

Use whole numbers when designing with static assets; the precise
numbers are computed in the browser. The line-height values below
are the result of multiplying the whole number and the precise
number respectively.

| Type scale | Type size (px) | Multiplier | Line-height (px) |
| --- | --- | --- | --- |
| -3 | 11 (11.237) | 1.4 | 15 (15.732) |
| -2 | 13 (12.642) | 1.4 | 18 (17.699) |
| -1 | 14 (14.222) | 1.4 | 20 (19.9108) |
| 0 | 16 | 1.4 | 22 (22.4) |
| 1 | 18 | 1.4 | 25 (25.2) |
| 2 | 20 (20.25) | 1.4 | 28 (28.35) |
| 3 | 23 (22.781) | 1.2 | 28 (27.337) |
| 4 | 26 (25.629) | 1.2 | 31 (30.755) |
| 5 | 29 (28.833) | 1.2 | 35 (34.600) |
| 6 | 32 (32.437) | 1.2 | 38 (38.924) |
| 7 | 36 (36.491) | 1.2 | 43 (43.789) |
| 8 | 41 (41.053) | 1.2 | 49 (49.264) |
| 9 | 46 (46.184) | 1.2 | 55 (55.421) |
| 10 | 52 (51.957) | 1.2 | 62 (62.348) |
| 11 | 58 (58.452) | 1.2 | 70 (70.142) |
| 12 | 66 (65.758) | 1.2 | 79 (78.910) |
| 13 | 74 (73.978) | 1.2 | 89 (88.800) |