---
title: "Typography"
subtitle: "The typefaces and how they are set"
description: "BlackDoctor's two typefaces, Erode for headings and Inter for text and interface, the hierarchy they set, and the rules for weight, case, measure and spacing."
author: "Studio"
section: "Brand Book"
subsection: "03 Visual Identity"
order: 3
status: "published"
---

BlackDoctor sets its headings in Erode, a contemporary serif with a sharp, editorial voice, and everything else in Inter. Two faces, two jobs: Erode announces, Inter carries. The sizes below are the design file's; how they translate to the web is on the [Website typography page](/website/typography.html).

## Typefaces

| Face | Role | Source |
| --- | --- | --- |
| Erode Variable | Headings and display settings | Indian Type Foundry, distributed free through Fontshare under the ITF Free Font Licence. The website self-hosts Fontshare's build as a stand-in until BlackDoctor's own files replace it |
| Inter | Body text, interface, labels, buttons | Google Fonts, Open Font Licence |

Erode is a heading face. It is never used below 20 px and never at reading size; the one running-text exception is the pull quote, set in Erode italic at 24 px. Inter carries everything else at reading size and every piece of interface.

## Hierarchy

Desktop sizes from the design file, in pixels. Leading is a multiple of the size; tracking is the design file's unit.

| Style | Face | Size / leading / tracking | Use |
| --- | --- | --- | --- |
| Display | Erode Regular | 94 / 1 / −1 | Hero statements |
| Heading 1 | Erode Regular | 64 / 1 / −1 | Page titles |
| Heading 2 | Erode Regular | 56 / 1 / −1 | |
| Heading 3 | Erode Regular | 48 / 1 / −1 | |
| Heading 4 | Erode Regular | 40 / 1 / −1 | |
| Heading 5 | Erode Medium | 32 / 1.14 / −1 | |
| Heading 6 | Erode Medium | 24 / 1 / −1 | |
| Heading 2X Small | Erode Medium | 20 / 1.1 / +1 | The smallest Erode setting |
| Eyebrow | Inter Medium | 18 / 1.4 / +8 | Uppercase kicker above a heading |
| Body | Inter Regular | 20 / 1.3 | Article text |
| Body Medium | Inter Regular | 24 / 1.5 | Lead paragraphs |
| Body Small | Inter Regular | 16 / 1.4 | Supporting text |
| Body X Small | Inter Regular | 12 / 1.3 | Fine print |
| Caption | Inter Regular | 14 / 1.3 / +6 | Uppercase captions |
| Label | Inter Regular | 12 / 1.3 / +3 | Uppercase labels |
| Token | Inter Regular | 14 / 1.5 | Tags and chips |
| Button | Inter Medium | 20 / 1.3 (16 small) | |
| Nav link | Inter Semi Bold / Medium | 14 · 17 (+5) · 20 (+5) | Site navigation at three sizes |

## Rules

- **Erode for headings, Inter for everything else.** The two faces are never mixed in one line.
- **Headings sit tight.** Leading of 1 and negative tracking; a heading is a block, not a paragraph.
- **Tracked-out text is uppercase Inter and small.** Eyebrows, captions and labels are the only settings with open tracking; nothing at reading size is tracked.
- **No synthetic weights or slants.** Erode Variable and Inter supply their own weights; a faked bold or italic is not the brand.
- **Erode never goes below 20 px.** At small sizes the serif detail closes up; use Inter.