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.
On this page
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.
Typical setting
Typical setting
Job
Typical setting
Typical setting
Job
Typical setting
Typical setting
Typical setting
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 and 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 explains the ratios in more depth.
Role
Role
Role
Role
Role
Role
Role
Size at 1.25 from 16 px
Role
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 covers the wider idea.
: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; }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.
Social post 1080×1350
Slides 1920×1080
Social post 1080×1350
Slides 1920×1080
Social post 1080×1350
Slides 1920×1080
Website
Social post 1080×1350
Slides 1920×1080
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 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 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile