What font does Figma use?
Figma introduced its own type family with its 2024 brand refresh. As you would expect from a design tool, the site uses the variable font’s axes with real precision, down to weights like 320 and 330.
Short answer: Figma’s website uses Figma Sans, a custom variable typeface, for almost all text, with Figma Mono for small technical details. Both are served from figma.com.
Figma Sans
Self-hosted98.1%- CSS name
figmaSans- Weights
- 320, 330, 400, 540
- Sizes
- 56px · 44px · 30px · 18px · 16px · 14px
- Served from
- www.figma.com
Figma Mono
Self-hosted1.9%- CSS name
figmaMono- Weights
- 400
- Sizes
- 16px · 12px
- Served from
- www.figma.com
Sizes, weights and spacing by role
These are computed values from the live page, which is what the Font Inspector panel shows when you click each element.
| Role | Font | Size | Weight | Line height | Letter spacing |
|---|---|---|---|---|---|
| Headline | Figma Sans | 56px | 400 | 1 | -0.022em |
| Subheading | Figma Sans | 16px | 400 | 1.4 | normal |
| Navigation | Figma Sans | 16px | 400 | 1.45 | normal |
The main font stack in the CSS:
font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;- The CSS sets
font-variation-settingsdirectly. The headline uses a width of 96 and smaller text a width of 98, so large type is drawn slightly narrower. - Weights of 320, 330 and 540 are in use. Steps this fine are only possible with a variable font.
figmaSans Fallbackis a generated fallback face with adjusted metrics that keeps the layout steady while the font loads.
Check any site yourself in one click.
Sites change their type without notice. Font Inspector shows the rendered font, size, weight and spacing of any text on figma.com or anywhere else, and lists every font on the page. Free, no account.
About the fonts, and whether you can use them
Figma Sans
A custom sans serif made for Figma by the Swiss foundry Grilli Type. It is a variable font with weight and width axes, and the site adjusts both.
Can you use it? Figma Sans is proprietary and cannot be licensed. Inter, which was Figma’s interface font for years, is the obvious free stand-in.
On Google Fonts: Inter, Hanken Grotesk.
Figma Mono
The monospaced companion to Figma Sans, used for labels and code-like details.
Can you use it? Also proprietary. JetBrains Mono and IBM Plex Mono are free alternatives.
On Google Fonts: JetBrains Mono, IBM Plex Mono.
Finding a font does not license it. More in how to get a font you found, legally.
Get a similar look with a free font
This starter uses Inter, which is open source, with the sizes and spacing measured above. It is an approximation, not a copy of Figma’s brand typeface.
/* Approximates the Figma look with a free font */
body {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1 {
font-size: 3.5rem; /* 56px */
font-weight: 400;
line-height: 1;
letter-spacing: -0.022em;
}How we checked
We opened figma.com in Chrome on September 20, 2026 and read the computed styles of its visible text: the declared font stack, the font actually rendered, and how much of the page’s text each family sets. That is the same data the Font Inspector extension shows under Fonts on this page. We re-check these pages periodically, and the date above shows the last inspection.
Figma and its typefaces are trademarks of their respective owners. Font Inspector is not affiliated with Figma.
Questions & answers
What font does Figma use on its website?+
Figma’s website uses Figma Sans, a custom variable typeface, for almost all text, with Figma Mono for small technical details. Both are served from figma.com.
Can I use the Figma font?+
Figma Sans is proprietary and cannot be licensed. Inter, which was Figma’s interface font for years, is the obvious free stand-in.
What is a free font similar to Figma Sans?+
Inter and Hanken Grotesk are free on Google Fonts and give a similar feel. No free font is an exact match, so compare it with your own text first.
How can I check what font Figma uses myself?+
Open figma.com, then click any text with the Font Inspector extension, or right-click, choose Inspect and look at Rendered Fonts in the Computed tab. Sites change their typography, so checking the live page is the only way to be sure.