Mapping Fluent UI Typography to SharePoint Brand Center
Over the last few weeks, I’ve been digging deep into the new SharePoint Brand Center and how it connects to Fluent UI 9 Typography — exploring its APIs, font licensing rules, and limitations with variable fonts.
Microsoft’s documentation explains how to register and use Brand Center fonts in SPFx:
https://learn.microsoft.com/en-us/sharepoint/dev/design/use-brand-center-fonts-in-spfx-components
What’s still missing, though, is a concise mapping overview between the Fluent UI 8/9 typography tokens and the Brand Center custom font slots exposed in SharePoint.
If you’ve ever opened DevTools and wondered why properties like --fontFamilyCustomFont100 or --fontFamilyCustomFont1700 exist with no explanation, this post connects the dots. It provides a structured reference of Fluent UI’s typography tokens, Brand Center’s variables, and how they align.
Understanding Fluent UI’s Typographic Tokens
The main references live inside the Fluent UI documentation:
Both list typographic tokens — Caption 2, Body 1 Strong, Subtitle 1, Title 3, etc. — but neither shows a side-by-side comparison to the CSS custom properties SharePoint exposes through the Brand Center.
Fluent UI defines tokens such as:
--fontSizeBase200
--lineHeightBase200
--fontWeightSemibold
SharePoint Framework, on the other hand, exposes font slots like:
--fontFamilyCustomFont200
Microsoft covers usage, but not a side-by-side map of Fluent UI 8/9 tokens → Brand Center slot numbers — that’s the gap this post fills.
Mapping Fluent UI 8 and 9 to SharePoint Brand Center
Fluent UI 8 and Fluent UI 9 use slightly different naming conventions and token hierarchies.
When working in SharePoint Framework, you’ll encounter the Brand Center font slots (--fontFamilyCustomFontXXXX) that roughly align to Fluent UI’s typography ramp.
| Fluent UI 9 style | Brand Center Font token | Typical use / size group |
|---|---|---|
| Caption 2 / Caption 2 Strong | --fontFamilyCustomFont100 – 200 | Small text, annotations, UI hints |
| Caption 1 / Caption 1 Strong / Caption 1 Stronger | --fontFamilyCustomFont300 – 500 | Labels and small captions |
| Body 1 / Body 1 Strong / Body 1 Stronger | --fontFamilyCustomFont600 – 800 | Paragraph text, body copy |
| Body 2 | --fontFamilyCustomFont900 | Larger paragraph or dense text |
| Subtitle 2 / Subtitle 2 Stronger | --fontFamilyCustomFont1000 – 1100 | Section headings or minor titles |
| Subtitle 1 | --fontFamilyCustomFont1200 | Sub-page headings |
| Title 3 / Title 2 / Title 1 | --fontFamilyCustomFont1300 – 1500 | Major page titles |
| Large Title / Display | --fontFamilyCustomFont1600 – 1700 | Hero text, banners |
Each of these slots mirrors Fluent UI’s scale from 8 → 9, but the connection remains undocumented in Microsoft Learn or Fluent’s developer portal.
Fluent UI 9 design font token definitions, as shown in the Storybook, directly translate to CSS custom properties in SharePoint.
Fluent UI Tokens in Practice
Each typographic token in Fluent UI defines a consistent combination of weight, size, and line height — for example:
font: var(--fontWeightSemibold)
var(--fontSizeBase300)/var(--lineHeightBase300)
var(--fontFamilyBase);
When mapped to SharePoint Brand Center, these token combinations become part of the custom font slots exposed to developers.
That’s what enables consistency between Fluent UI components and custom SharePoint designs.
If you’re looking for an implementation guide on how to use these tokens in SPFx or how to create your own ramp using SCSS, see my in-depth tutorial:
Leverage SharePoint Brand Center Font in SharePoint Framework
Why This Mapping Matters
Understanding how Fluent UI’s tokens connect to SharePoint’s font slots helps bridge the gap between design and development. It ensures:
- Consistent typography between Microsoft 365 UI and custom components.
- Easier handoff between designers and SPFx developers.
- Predictable updates when Fluent UI or Brand Center evolves.
Further Reading
- Fluent UI 9 Typography Reference
- Fluent UI 8 Typography Overview
- Use Brand Center Fonts in SPFx Components
- Leverage SharePoint Brand Center Font in SPFx
- Overcome Variable Fonts Limitation in SharePoint Brand Center
- The Fluent UI React Problem in SharePoint Framework
- Typography First – Make Your SharePoint Content Readable and Compelling