Stylepack

फ़ॉन्ट

notion.com जो फ़ॉन्ट इस्तेमाल करता है

notion.com अपने शीर्षक और बॉडी टेक्स्ट NotionInter में सेट करता है। NotionInter एक लाइसेंस वाला फ़ॉन्ट है, जिसे साइट ख़ुद सर्व करती है। Google Fonts पर सबसे क़रीबी मुफ़्त विकल्प: Inter।

notion.com से 4 दिन पहले मापा गया।

पूरा डिज़ाइन पैक खोलेंपैक डाउनलोड करें

फ़ॉन्ट फ़ैमिली

2 फ़ैमिली
NotionInter
इस्तेमाल
h1, h2, h3, body, button, label
स्रोत
स्वयं होस्ट किया गया
मुफ़्त विकल्प
Inter
Lyon Text
इस्तेमाल
body
स्रोत
स्वयं होस्ट किया गया
मुफ़्त विकल्प
Inter

इसे दोहराने के लिए CSS

फ़ॉन्ट variables, जिनके stack में मुफ़्त विकल्प भी है, ताकि वही CSS लाइसेंस वाले फ़ॉन्ट के साथ या उसके बिना भी काम करे।

: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;
}

टाइप कैसे सेट है

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
इस्तेमाल में फ़ॉन्ट साइज़
141618202242547296

AI एजेंट के लिए

पैक सादा टेक्स्ट है, कोई key नहीं: DESIGN.md लाएँ, या पूरा पैक MCP सर्वर से Claude Code, Cursor या Copilot को दें।

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

सवाल

notion.com कौन सा फ़ॉन्ट इस्तेमाल करता है?

notion.com NotionInter, Lyon Text इस्तेमाल करता है। शीर्षक NotionInter में और बॉडी टेक्स्ट NotionInter में सेट हैं, साइट के रेंडर होने पर मापे गए, उसकी stylesheet से पढ़े नहीं गए।

क्या notion.com का फ़ॉन्ट मुफ़्त में इस्तेमाल किया जा सकता है?

नहीं। NotionInter एक लाइसेंस वाला फ़ॉन्ट है, जिसे notion.com ख़ुद सर्व करता है। सबसे क़रीबी मुफ़्त विकल्प Inter है, जो Google Fonts पर उपलब्ध है। इस पेज की CSS उसे font stack में स्टैंड-इन के रूप में रखती है।

अपने प्रोजेक्ट में notion.com जैसी टाइपोग्राफ़ी कैसे पाऊँ?

Stylepack से notion.com का डिज़ाइन पैक डाउनलोड करें: उसमें font stack, type scale, हर टेक्स्ट स्टाइल और स्क्रीनशॉट हैं, ऐसे रूप में जिससे Claude Code या Cursor जैसा AI कोडिंग एजेंट बना सके।