# Typography system: choosing roles for every font

[Canonical HTML page](https://gradiently.design/guide/brand-typography-system)

Choosing fonts is the easy part. Deciding exactly how they behave, at what size, in which weight, for which job, is what makes a brand look consistent everywhere.

## The short version

- A typography system is a small set of named roles, such as display, heading, body and label, each with a fixed font, weight, size, line height and case.
- Sizes in a typography system come from one scale, a base size multiplied by a constant ratio, so every step relates to the others.
- Most brands need only one or two typefaces; the system creates variety through roles, weights and sizes instead.
- Design tokens store each role as a named value, so websites, apps and design files all use the same type decisions.
- Social posts, slides and websites need different sizes for the same roles, so a good system lists each role per channel.

A **typography system** is the set of rules that decides how type behaves across a brand: a few named roles (display, heading, body, label), each with one font, weight, size, line height and case, all sized from a single scale and stored as tokens so every designer and developer uses the same values. Fonts give a brand its voice. The system makes that voice consistent, so a headline on a poster, a website and a story all look like they came from the same place. Here is how to build one.

## The roles in a typography system

Start with jobs, not fonts. Every piece of text a brand publishes does one of a handful of jobs, and each job becomes a role. Most brands need five to seven.

| Role | Job | Typical setting |
| --- | --- | --- |
| Display | The biggest words: campaign lines, covers, hero titles | Heading font, bold, tight line height, few words |
| Heading | Section titles and post headlines | Heading font, semibold or bold, sentence case |
| Subheading | Leads into a section, standfirsts | Body font, medium weight, a step above body |
| Body | Reading text | Body font, regular 400, line height around 1.5 |
| Label and eyebrow | Small text above headlines, tags, buttons | Body font, semibold, often capitals with added spacing |
| Caption | Credits, footnotes, small print | Body font, regular, smallest step |
| Numeric | Prices, statistics, tables | Tabular figures so digits line up |

Seven roles cover almost every brand. If you can't say what job a style does, it isn't a role; it is an exception.

A portrait newsletter style post with a small eyebrow, a large headline and a short supporting line

Three roles on one post: an eyebrow label, a heading and a body line. Each is instantly distinct, so the eye knows where to start.

## How many fonts a brand typography system needs

Usually one or two. One family in three weights can carry a whole system. Two fonts, one for headings and one for body, add character. A third is justified only for a specific job such as code or data. The variety comes from roles, sizes and weights, not from more typefaces. [Google Fonts pairings](https://gradiently.design/guide/google-fonts-pairings) and [brand fonts](https://gradiently.design/guide/brand-fonts) help you choose.

### Avoid

- A new font for every campaign
- Sizes picked by eye on each design
- Nine weights loaded, three used
- Different casing rules in different teams
- A style guide that lists fonts but not roles

### Do

- One or two families for everything
- Every size from one scale
- Only the weights the roles need
- One written casing rule for headings and buttons
- Roles with font, weight, size, line height and case

## Build a type scale

A type scale picks a base size and multiplies it by the same ratio for each step up. The steps relate to each other, so any two sizes in the system look intentional together. A ratio of 1.25 suits interfaces and dense pages; 1.333 or 1.5 gives more drama for editorial and marketing work. [Type scale](https://gradiently.design/guide/typographic-scale) explains the ratios in more depth.

| Step | Size at 1.25 from 16 px | Role |
| --- | --- | --- |
| Step 0 | 16 px | Body |
| Step 1 | 20 px | Subheading, large body |
| Step 2 | 25 px | Small heading |
| Step 3 | 31 px | Heading |
| Step 4 | 39 px | Large heading |
| Step 5 | 49 px | Display on mobile |
| Step 6 | 61 px | Display on desktop |
| Step minus 1 | 13 px | Caption, label |

A web scale from a 16 px base at a ratio of 1.25, rounded to whole pixels. Each role takes one step and keeps it.

## Store the system as tokens

A system that only lives in a PDF drifts. Tokens are named values that code and design files both read, so changing one value updates everything. Name tokens by role, never by size: `--type-heading` survives a redesign, `--type-31` does not. [Design tokens](https://gradiently.design/guide/design-tokens) covers the wider idea.

```css
:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }
```

Each role is one font shorthand token, so weight, size, line height and family always travel together. Values match the scale above in rem.

## One role, different sizes per channel

A heading on a website and a heading on an Instagram post do the same job at very different sizes, because one is read at arm's length on a big screen and the other shrinks into a phone feed. Keep the roles identical and give each channel its own sizes.

| Role | Website | Social post 1080×1350 | Slides 1920×1080 |
| --- | --- | --- | --- |
| Display | 49 to 61 px | 140 to 200 px | 120 to 160 px |
| Heading | 31 px | 90 to 120 px | 88 to 112 px |
| Body | 16 px | 40 to 48 px | 48 to 64 px |
| Label and eyebrow | 13 px | 28 to 32 px | 36 to 44 px |

Same roles, same fonts, same weights, different sizes. [Font size for Instagram posts](https://gradiently.design/guide/font-size-for-social-media) and [presentation fonts](https://gradiently.design/guide/typography-for-presentations) explain the social and slide numbers.

## How to build your typography system

1. **Collect what you already publish** Screenshot your website, posts, emails and slides. Circle every distinct text style. Most brands find far more than they meant to have.
2. **Group styles into roles** Merge near duplicates. Aim for five to seven roles that cover everything you circled.
3. **Choose fonts for the roles** Usually a heading font and a body font. Check the licence covers web, apps and any logo use.
4. **Set the scale and the details** Pick a base and ratio, then fix each role's weight, line height, case and spacing. Decide your heading case once; [sentence case vs title case](https://gradiently.design/guide/title-case-vs-sentence-case) helps.
5. **Publish it as tokens and a one page sheet** Tokens for code and design files, a single visual sheet in your [brand style guide](https://gradiently.design/guide/brand-style-guide) for everyone else.

For everyday social posts and decks, a Gradiently brand kit (on Pro) holds the heading and body fonts of your system, including uploaded font files, alongside your logos, colours and voice. New designs start with those two fonts, and the Designer applies the kit when it lays out a design, so the heading and body split holds without anyone having to remember it.

## FAQ

### What is a typography system?

A set of named type roles, such as display, heading, body and label, each with a fixed font, weight, size, line height and case, usually stored as design tokens.

### How many fonts should a brand use?

One or two for most brands: one for headings and one for body text. A third is only worth adding for a specific job like code or data.

### What is a type scale?

A sequence of font sizes made by multiplying a base size by a constant ratio, such as 1.25, so every size in the system relates to the others.

### How should typography tokens be named?

By role, such as type-heading or type-body, not by size. Role names stay meaningful when the sizes change.

### Should social media posts use the same font sizes as a website?

No. Keep the same roles and fonts, but use much larger sizes on posts, because they are viewed small in a phone feed.