What font does Notion use?
Notion’s marketing site mirrors the product: a plain, friendly sans serif for almost everything, with a bookish serif for contrast. Both are hosted on notion.com.
Short answer: Notion’s website uses Inter, served under the name NotionInter, for headlines and interface text, and the serif Lyon Text for some longer passages.
Inter (as NotionInter)
Self-hosted80.9%- CSS name
NotionInter- Weights
- 400, 500, 600, 700
- Sizes
- 96px · 54px · 22px · 20px · 16px · 14px · 12px
- Served from
- www.notion.com
Lyon Text
Self-hosted19.1%- CSS name
Lyon Text- Weights
- 400
- Sizes
- 18px · 16px
- Served from
- www.notion.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 | Inter | 96px | 600 | 1.04 | -0.048em |
| Body text | Inter | 20px | 400 | 1.4 | -0.006em |
| Subheading | Inter | 16px | 700 | 1.5 | normal |
| Navigation | Inter | 16px | 400 | 1.5 | normal |
The main font stack in the CSS:
font-family: NotionInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";- The 96px headline is tightened hard, to about -0.048em. Inter is spaced for small text, so large sizes need negative tracking.
- Text uses the OpenType feature
lnumfor lining numerals. - The page also declares
iA Writer Monoand Noto Sans for Arabic and Hebrew, loaded only where needed.
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 notion.com or anywhere else, and lists every font on the page. Free, no account.
About the fonts, and whether you can use them
Inter (as NotionInter)
The CSS names NotionInter first and plain Inter right after it, which points to Notion’s own build of Inter, the open source interface typeface by Rasmus Andersson.
Can you use it? Inter is free under the SIL Open Font License. Get it from Google Fonts or the Inter project site. Notion’s own build is not distributed.
On Google Fonts: Inter.
Lyon Text
Lyon is a contemporary serif designed by Kai Bernau and published by Commercial Type. It is the serif option inside the Notion app as well.
Can you use it? Lyon Text is a commercial typeface licensed through Commercial Type. Source Serif 4 and Newsreader are free serifs with a similar reading texture.
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 Notion’s brand typeface.
/* Approximates the Notion look with a free font */
body {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1 {
font-size: 6rem; /* 96px */
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.048em;
}
p {
font-size: 1.25rem; /* 20px */
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.006em;
}How we checked
We opened notion.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.
Notion and its typefaces are trademarks of their respective owners. Font Inspector is not affiliated with Notion.
Questions & answers
What font does Notion use on its website?+
Notion’s website uses Inter, served under the name NotionInter, for headlines and interface text, and the serif Lyon Text for some longer passages.
Can I use the Notion font?+
Inter is free under the SIL Open Font License. Get it from Google Fonts or the Inter project site. Notion’s own build is not distributed.
How can I check what font Notion uses myself?+
Open notion.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.