One type system for Figma and code
Our type is too big on large screens, and far harder to manage than it needs to be. We can fix both with fewer sizes, one set of names, and type that grows smoothly with the screen.
6212391662372
This is step one of a wider design system overhaul. The look is settled. The system underneath it is what we’re building. The sizes here are a first draft.
Type gets too big on big screens
Sizes were raised for people on large monitors. Now pages feel oversized there. This is the same text on a 2560px screen, today and as proposed.
Page title 68px
Body text 24px
Page title 54px
Body text 18px
It jumps
Sizes change at four breakpoints, so a page is right at one width and off either side of it.
It’s written down too often
Two line heights and 14 sizes have become 62 separate values in code.
Figma and code disagree
Four text styles in code no longer match their Figma size.
Grow smoothly, then ease off
Each size is set at three screen widths. It grows in a straight line from 390 to 1440px, then more gently up to 2560px. No jumps, and no oversized type at the top.
Two layers, one set of names
A font size that grows with the screen. You rarely pick one directly.
The text styles you choose: a typeface, a size and a line height. Weight, italic and link are options.
- Figma
- Heading XL
- Code
easel-heading-xl- A brief
- ‘Use heading-xl’
Every new name starts with easel-. You can see at a glance what uses the new system, and we can count it.
Three line heights
Lot 42
20th/21st Century Evening Sale, London
Our specialists are here to answer your questions, from free valuations to market advice.
Each is a multiple of the font size, so it follows the type at any width. Figma already works this way.
The 16 roles
These are live. Resize the window and they grow. The numbers are each role’s size at 390, 1440 and 2560px.
Post-War and Contemporary Art
Post-War and Contemporary Art
Upcoming auctions
20th/21st Century Evening Sale
20th/21st Century Evening Sale
From free valuations to market advice
From free valuations to market advice
From free valuations to market advice
From free valuations to market advice
Our specialists are here to answer your questions
Our specialists are here to answer your questions
Our specialists are here to answer your questions
18 Sep – 2 Oct · Online
18 Sep – 2 Oct · Online
Browse auction
Browse auction
See every role and size as a table
| Role | Typeface | Size | 390 | 1440 | 2560, draft | 2560, today | Line height | In code today |
|---|---|---|---|---|---|---|---|---|
heading-xxl | Serif | 5xl | 48 | 56 | 60 | 84 | 1.2 | heading-xxl-serif |
heading-xl | Serif | 4xl | 36 | 48 | 54 | 68 | 1.2 | heading-xl-serif |
heading-l | Serif | 3xl | 28 | 32 | 34 | 56 | 1.2 | heading-l-serif |
heading-m-sans | Sans | 2xl-sans | 24 | 28 | 30 | 36 | 1.2 | heading-m-sans |
heading-m-serif | Serif | 2xl-serif | 24 | 28 | 30 | 42 | 1.2 | heading-m-serif |
heading-s-sans | Sans | xl-sans | 18 | 18 | 20 | 24 | 1.2 | heading-s-sans |
heading-s-serif | Serif | xl-serif | 20 | 24 | 26 | 36 | 1.2 | heading-s-serif, heading-s-serif-m |
heading-xs-sans | Sans | lg-sans | 14 | 16 | 17 | 24 | 1.2 | heading-xs-sans |
heading-xs-serif | Serif | lg-serif | 16 | 20 | 22 | 28 | 1.2 | heading-xs-serif |
body | Sans | md | 16 | 16 | 18 | 24 | 1.4 | body, body-medium |
body-s | Sans | sm | 14 | 14 | 16 | 20 | 1.4 | body-s, body-s-medium |
body-xs | Sans | xs | 12 | 12 | 14 | 14 | 1.4 | body-xs |
label | Sans | sm | 14 | 14 | 16 | 20 | 1.2 | label, label-medium |
label-s | Sans | xs | 12 | 12 | 14 | 14 | 1.2 | label-s, label-s-medium |
action-l | Sans | md | 16 | 16 | 18 | 24 | 1.2 | action-l |
action | Sans | sm | 14 | 14 | 16 | 20 | 1.2 | action, action-medium |
What changes for you
Draw two widths, not seven
Draw 390 and 1440. Check 2560 by switching a mode. The browser works out the rest.
- Pick a role, such as Heading XL, not a size
- Weight, italic and link are choices on a role
- Add a 768 frame only where the layout changes
- A size change is made once, and reaches Figma and code together
One class, no breakpoints
Today
text-4xl md:text-4xl-lg 2xl:text-4xl-xl 3xl:text-4xl-2xlProposed
easel-heading-xl- Plain CSS, with nothing new to install
- The new classes sit beside the old ones, so nothing breaks
- Packages move over one at a time
- QA checks a table of sizes, not seven frames
- Layout breakpoints stay as they are
Eight steps, none of them a big bang
Each step ships on its own. A design system taskforce could lead steps 5 to 8.
1
Agree the numbers
Settle the 2560 sizes. Check the three widths against visitor data.
2
Agree the names
Design and engineering sign off one set of names.
3
Add new beside old
New variables in Figma, new classes in code. Nothing changes on screen.
4
Pilot one page
Build it with the new roles. Compare before and after on big screens.
5
Move shared packages
Start with the one Typography lives in. New work uses the roles.
6
Move each area
One package at a time, at each team’s pace.
7
Flag the old
Mark the old sizes as deprecated, with a warning on new uses.
8
Remove the old
Once no package uses them.
How we’ll know it’s working
Because every new name starts with easel-, progress is a count, not an opinion. This is where we start.
| Measure | Today | Goal |
|---|---|---|
| Sizes in the Tailwind config | 62 | 12 |
| Line heights in the Tailwind config | 62 | 3 |
| Typography variants that differ from Figma | 4 of 22 | 0 |
| Files that use the old size classes directly | 43 | 0 |
| One-off font sizes | 13 | 0 |
| Font sizes forced with !important | 10 | 0 |
| Files that style text outside Typography | 37 | 0 |
| Type set with easel- names, by package | 0% | 100% |
Code counts are from engineering’s main branch on 30 September 2026. Two figures are still needed before anything changes: how long a type change takes to reach the site, and how long QA spends on one.
Still to decide
- The 2560 sizes, with the design lead
- Whether labels and buttons grow at all
- What to call the sizes: today’s names, or a numbered ladder
- How Typography offers old and new side by side, for engineering to choose