Stylepack

Font

Font yang dipakai notion.com

notion.com memakai NotionInter untuk judul dan teks isinya. NotionInter adalah font berlisensi yang disajikan situs itu sendiri. Padanan gratis terdekat di Google Fonts: Inter.

Diukur dari notion.com 4 hari yang lalu.

Buka paket desain lengkapUnduh paket

Font family

2 font family
NotionInter
Dipakai untuk
h1, h2, h3, body, button, label
Sumber
Dihosting sendiri
Alternatif gratis
Inter
Lyon Text
Dipakai untuk
body
Sumber
Dihosting sendiri
Alternatif gratis
Inter

CSS untuk menirunya

Variabel font dengan pengganti gratis di dalam stack, jadi CSS yang sama tetap bekerja dengan atau tanpa font berlisensinya.

:root {
  --font-heading: "NotionInter", "Inter", sans-serif; /* Inter stands in for NotionInter */
  --font-body: "NotionInter", "Inter", sans-serif; /* Inter stands in for NotionInter */
  --font-size-base: 18px;
}

Cara teksnya ditata

headline-displayQuick brown foxNotionInter / 96px / 600 / lh 100px / -4.6px
headline-lgQuick brown foxNotionInter / 22px / 700 / lh 28px / -0.25px
headline-mdQuick brown foxNotionInter / 16px / 700 / lh 24px
body-mdThe quick brown fox jumps over the lazy dogLyon Text / 18px / 400 / lh 28px
label-mdThe quick brown fox jumps over the lazy dogNotionInter / 14px / 400 / lh 20px
buttonThe quick brown fox jumps over the lazy dogNotionInter / 14px / 400 / lh 20px
Ukuran font yang dipakai
141618202242547296

Untuk agen AI

Paket berupa teks biasa, tanpa kunci: ambil DESIGN.md, atau serahkan seluruh paket ke Claude Code, Cursor, atau Copilot lewat server MCP.

curl -s https://stylepack.ai/packs/notion.com/DESIGN.md

Pertanyaan

Font apa yang dipakai notion.com?

notion.com memakai NotionInter, Lyon Text. Judul ditata dengan NotionInter dan teks isi dengan NotionInter, diukur dari situs saat dirender, bukan dibaca dari stylesheet-nya.

Apakah font notion.com gratis dipakai?

Tidak. NotionInter adalah font berlisensi yang disajikan notion.com sendiri. Padanan gratis terdekatnya adalah Inter, tersedia di Google Fonts. CSS di halaman ini menaruhnya di font stack sebagai pengganti.

Bagaimana cara mendapatkan tipografi yang sama seperti notion.com di proyek saya?

Unduh paket desain notion.com dari Stylepack: isinya font stack, skala tipografi, setiap gaya teks, dan screenshot, dalam bentuk yang bisa dijadikan acuan AI coding agent seperti Claude Code atau Cursor.