टाइपोग्राफी

टाइप सिस्टम स्विस डिज़ाइन से प्रेरित दो फ़ॉन्ट परिवारों को मिश्रित करता है, जो अभिव्यंजक हेडलाइन और कार्यात्मक बॉडी कॉपी के बीच एक स्पष्ट पदानुक्रम स्थापित करता है।

डिज़ाइन दर्शन

फ़ॉन्ट टाइपोग्राफी अनुपात, लय और गति का उपयोग करती है — जो टाइप स्टाइल, स्केल, वेट, रंग, लीडिंग, क्षैतिज स्थान और ऊर्ध्वाधर स्थान के माध्यम से प्राप्त होती है — स्पष्ट दृश्य पदानुक्रम बनाने के लिए।

• Neusa Next Wide प्रारंभिक अंतरिक्ष अन्वेषण के टाइप ट्रीटमेंट से प्रेरित है, जो हेडलाइन और सबहेड में एक मानवीय और अभिव्यंजक चरित्र जोड़ता है
• Proxima Nova बॉडी और यूटिलिटी कॉपी जैसे अधिक कठिन क्षणों में खुलापन और ज्यामितीय स्टाइलिंग लाता है

पदानुक्रम अवरोही टाइप आकार और वैकल्पिक लोअरकेस/अपरकेस ट्रीटमेंट के माध्यम से कंट्रास्ट द्वारा स्थापित किया जाता है। साइन-ऑफ़ और CTA निचले पदानुक्रम की स्थिति से उभरने के लिए वाइड बोल्ड फेस का उपयोग करते हैं।

फ़ॉन्ट परिवार

Neusa Next Wide

भूमिका: हेडलाइन, सबहेड, पुल कोट्स, CTA, लेबल, न्यूमेरिक स्टैट्स

Brand Center स्पेसिमेन पाँच स्टाइल दिखाता है:

स्टाइल	वेट मान	CSS font-weight	CSS font-style
Light	300	300	normal
Regular	400	400	normal
Italic	400	400	italic
Medium	500	500	normal
Bold	700	700	normal

Proxima Nova

भूमिका: बॉडी कॉपी, यूटिलिटी टेक्स्ट, सेक्शन हेडर, UI एलिमेंट

Brand Center स्पेसिमेन चार स्टाइल दिखाता है:

स्टाइल	वेट मान	CSS font-weight	CSS font-style
Regular	400	400	normal
Regular Italic	400	400	italic
Bold	700	700	normal
Bold Italic	700	700	italic

Proxima Nova अलग से लाइसेंस प्राप्त है और Brand Center फ़ॉन्ट डाउनलोड में शामिल नहीं है। थीम सामान्य स्टाइल में वेट 400, 500, 600 और 700 के साथ आती है।

टाइप पदानुक्रम

मुख्य सिद्धांत

• अवरोही टाइप आकार और वैकल्पिक केस ट्रीटमेंट के माध्यम से पदानुक्रम स्थापित करें
• कैंपेन हेडलाइन और सबहेड के लिए Neusa Wide Bold, सेंटेंस केस का उपयोग करें
• हेडलाइन लीडिंग को टाइप आकार का 1.1× सेट करें
• सेंटेंस-केस हेडिंग के साथ कंट्रास्ट के लिए सेक्शन हेडर में लेटर-स्पेसिंग के साथ Proxima Nova Bold, UPPERCASE का उपयोग करें
• साइन-ऑफ़ और CTA डिजिटल अनुभवों में एक्शन इंगित करने के लिए Cloud Red में दाहिनी ओर के कैरेट (›) के साथ Neusa Wide Bold का उपयोग करते हैं

पदानुक्रम तालिका

एलिमेंट	फ़ॉन्ट	वेट	केस	नोट्स
हेडलाइन	Neusa Wide	Bold (700)	Sentence	Leading = 1.1× type size
Eyebrow	Proxima Nova	Bold (700)	UPPERCASE	छोटा, लेटर-स्पेसिंग के साथ
Subhead / Intro	Neusa Wide	Medium (500)	Sentence	या Proxima Nova यदि सीधे बॉडी कॉपी के बाद आए
सेक्शन हेडर	Proxima Nova	Bold (700)	UPPERCASE	लेटर-स्पेसिंग के साथ
Sub-subhead	Proxima Nova	Bold (700)	Sentence
बॉडी कॉपी	Proxima Nova	Regular (400)	Sentence
बुलेट पॉइंट	Proxima Nova	Regular (400)	Sentence
पुल कोट	Neusa Wide	Bold (700)	Sentence	Cloud Red रंग; नीचे एट्रिब्यूशन के साथ बड़े लाल उद्धरण चिह्न
Sign-off / CTA	Neusa Wide	Bold (700)	Sentence	Cloud Red में दाहिनी ओर के कैरेट (›) के साथ

विशेष ट्रीटमेंट

संदर्भ	फ़ॉन्ट	वेट	आकार/लीडिंग	नोट्स
Collateral पुल कोट्स	Neusa Wide	Bold (700)	9pt / 14pt	Sentence case
eBook पुल कोट्स	Neusa Wide	Regular (400)	16pt / 19pt	ऊपर रूल के साथ
Infographic अंक/फ़ैक्टॉइड	Neusa Wide	Light (300)	—	बड़े आकार में दृश्य प्रभाव के लिए
चार्ट/बार अंक	Neusa Wide	Regular (400)	—	मानक चार्ट लेबलिंग

टाइटल केस उपयोग

टाइटल केस का उपयोग इनके लिए किया जा सकता है:

• Subhead
• पुल कोट्स
• न्यूमेरिक स्टैट्स
• लेबल

अन्य सभी एलिमेंट डिफ़ॉल्ट रूप से सेंटेंस केस का उपयोग करते हैं।

लाइव उदाहरण

हेडिंग

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

टेक्स्ट स्टाइल

यह जोर के लिए बोल्ड टेक्स्ट है।

यह सूक्ष्म जोर के लिए इटैलिक टेक्स्ट है।

यह अप्रचलित सामग्री के लिए स्ट्राइकथ्रू टेक्स्ट है।

यह तकनीकी संदर्भों के लिए inline code है।

यह मजबूत जोर के लिए बोल्ड इटैलिक टेक्स्ट है।

यह एक संयोजन है: inline code के साथ बोल्ड और code के साथ इटैलिक।

क्रमबद्ध सूची

1. क्रमबद्ध सूची में पहला आइटम
2. बोल्ड टेक्स्ट के साथ दूसरा आइटम
3. inline code के साथ तीसरा आइटम
4. Astro के लिंक के साथ चौथा आइटम

अक्रमबद्ध सूची

• पहला बुलेट पॉइंट
• जोर के साथ दूसरा बुलेट
• code reference के साथ तीसरा बुलेट
• लिंक के साथ चौथा बुलेट

नेस्टेड सूचियाँ

1. शीर्ष-स्तर का क्रमबद्ध आइटम
   • नेस्टेड अक्रमबद्ध आइटम A
   • नेस्टेड अक्रमबद्ध आइटम B
     1. गहरा नेस्टेड क्रमबद्ध आइटम
     2. एक और गहरा नेस्टेड आइटम
   • पहले नेस्टिंग स्तर पर वापस
2. दूसरा शीर्ष-स्तर आइटम
   • एक और नेस्टेड आइटम

ब्लॉककोट्स

यह एक सिंगल-लाइन ब्लॉककोट है।

यह एक मल्टी-लाइन ब्लॉककोट है।

यह कई पैराग्राफ तक फैला है और इसमें बोल्ड, इटैलिक, और code फ़ॉर्मेटिंग हो सकती है।

नेस्टेड ब्लॉककोट्स:

यह बाहरी ब्लॉककोट के अंदर एक नेस्टेड ब्लॉककोट है।

इसमें अपनी स्वयं की फ़ॉर्मेटिंग हो सकती है।

क्षैतिज रूल

रूल के ऊपर की सामग्री।

---

रूल के नीचे की सामग्री।

लिंक

• आंतरिक लिंक: दस्तावेज़ अवलोकन पर वापस
• बाहरी लिंक: Starlight Documentation
• शीर्षक के साथ लिंक: Astro

फ़ुटनोट

यह एक फ़ुटनोट संदर्भ¹ के साथ एक वाक्य है।

और एक अलग फ़ुटनोट² के साथ एक और वाक्य।

फ़ॉन्ट एसेट

थीम fonts/ डायरेक्टरी में 10 woff2 फ़ाइलें शामिल करती है:

Neusa Next Pro Wide

फ़ाइल	वेट	स्टाइल	आकार
neusaNextProWide-300.woff2	300 (Light)	Normal	~49 KB
neusaNextProWide-400.woff2	400 (Regular)	Normal	~49 KB
neusaNextProWide-400i.woff2	400 (Regular)	Italic	~49 KB
neusaNextProWide-500.woff2	500 (Medium)	Normal	~49 KB
neusaNextProWide-700.woff2	700 (Bold)	Normal	~49 KB
neusaNextProWide-700i.woff2	700 (Bold)	Italic	~49 KB

Proxima Nova

फ़ाइल	वेट	स्टाइल	आकार
proximaNova-400.woff2	400 (Regular)	Normal	~18 KB
proximaNova-500.woff2	500 (Medium)	Normal	~18 KB
proximaNova-600.woff2	600 (Semi-Bold)	Normal	~18 KB
proximaNova-700.woff2	700 (Bold)	Normal	~18 KB

नामकरण परंपरा

फ़ॉन्ट फ़ाइलें familyName-weight.woff2 पैटर्न का पालन करती हैं, इटैलिक वेरिएंट के लिए i सफ़िक्स के साथ (उदा., neusaNextProWide-400i.woff2)।

कवरेज अंतराल

निम्नलिखित इटैलिक वेरिएंट थीम में अभी उपलब्ध नहीं हैं:

अनुपलब्ध वेरिएंट	कारण
Proxima Nova 400 italic	वर्तमान डाउनलोड में स्रोत फ़ाइल उपलब्ध नहीं
Proxima Nova 500 italic	वर्तमान डाउनलोड में स्रोत फ़ाइल उपलब्ध नहीं
Proxima Nova 600 italic (Semi-Bold)	स्रोत फ़ाइल उपलब्ध नहीं
Proxima Nova 700 italic (Bold)	स्रोत फ़ाइल उपलब्ध नहीं

Proxima Nova इटैलिक वेरिएंट जोड़ने के लिए, किसी लाइसेंस प्राप्त स्रोत से वास्तविक woff2 फ़ाइलें प्राप्त करें, उन्हें परंपरा के अनुसार नाम दें (उदा., proximaNova-400i.woff2), और font-face.css में संबंधित @font-face नियम जोड़ें।

@font-face घोषणाएं

सभी फ़ॉन्ट पंजीकरण fonts/font-face.css में रहते हैं। प्रत्येक घोषणा इनका उपयोग करती है:

• font-display: swap — टेक्स्ट फ़ॉलबैक फ़ॉन्ट के साथ तुरंत रेंडर होता है, फिर कस्टम फ़ॉन्ट लोड होने पर स्वैप करता है
• format("woff2") — सभी वर्तमान ब्राउज़र द्वारा समर्थित आधुनिक संपीड़ित प्रारूप
• Relative URLs — ./ पाथ CSS फ़ाइल स्थान के सापेक्ष रिज़ॉल्व होते हैं

एक नया फ़ॉन्ट वेरिएंट जोड़ने के लिए, font-face.css में एक @font-face ब्लॉक जोड़ें:

@font-face {
  font-family: "familyName";
  font-weight: 400;
  font-style: italic;  /* or normal */
  font-display: swap;
  src: url("./familyName-400i.woff2") format("woff2");
}

CSS इंटीग्रेशन

थीम प्लगइन (index.ts) config:setup हुक के माध्यम से दोनों CSS फ़ाइलें इंजेक्ट करता है:

index.ts → fonts/font-face.css → styles/custom.css → Starlight renders

फ़ॉन्ट असाइनमेंट

styles/custom.css में:

:root {
  --sl-font: "proximaNova", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "neusaNextProWide", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

• --sl-font (Starlight बॉडी फ़ॉन्ट वेरिएबल) → बॉडी टेक्स्ट और UI के लिए Proxima Nova
• --sl-font-heading (कस्टम टोकन) → हेडिंग फ़ॉन्ट संदर्भ के लिए Neusa Next Pro Wide
• h1–h6 → Cloud टाइप पदानुक्रम के अनुसार फ़ॉन्ट फैमिली, वेट और केस लागू
• फ़ॉलबैक स्टैक: कस्टम फ़ॉन्ट लोड होने से पहले तेज़ प्रारंभिक रेंडरिंग के लिए system-ui, "Segoe UI", Helvetica, Arial, sans-serif

Starlight टाइपोग्राफी टोकन

थीम इन Starlight CSS कस्टम प्रॉपर्टी को ओवरराइड करती है:

टोकन	मान	उद्देश्य
--sl-font	"proximaNova", ...	बॉडी टेक्स्ट, UI एलिमेंट
--sl-font-heading	"neusaNextProWide", ...	हेडिंग फ़ॉन्ट के लिए कस्टम टोकन
--sl-line-height-headings	1.1	Cloud ब्रांड हेडलाइन लीडिंग
--sl-text-h1	var(--sl-text-5xl)	2.625rem हेडलाइन
--sl-text-h2	var(--sl-text-3xl)	1.8125rem सबहेड
--sl-text-h3	var(--sl-text-2xl)	1.5rem सेक्शन इंट्रो
--sl-text-h4	var(--sl-text-lg)	1.125rem सब-सेक्शन

हेडिंग पदानुक्रम मैपिंग

HTML	फ़ॉन्ट फैमिली	वेट	केस	ब्रांड भूमिका
h1	Neusa Next Wide	700 (Bold)	Sentence	हेडलाइन
h2	Neusa Next Wide	700 (Bold)	Sentence	Subhead
h3	Neusa Next Wide	500 (Medium)	Sentence	Intro / Sub-subhead
h4	Proxima Nova	700 (Bold)	UPPERCASE	सेक्शन हेडर
h5	Proxima Nova	700 (Bold)	UPPERCASE	सब-सेक्शन हेडर
h6	Proxima Nova	700 (Bold)	UPPERCASE	माइनर सेक्शन हेडर

फ़ॉन्ट बदलना

विभिन्न फ़ॉन्ट परिवारों का उपयोग करने के लिए:

1. नामकरण परंपरा familyName-weight.woff2 का उपयोग करके fonts/ में woff2 फ़ाइलें जोड़ें (इटैलिक के लिए i सफ़िक्स जोड़ें)
2. अपनी फ़ाइल नाम, वेट और स्टाइल से मेल खाने वाले नए @font-face नियमों के साथ fonts/font-face.css अपडेट करें
3. अपने नए फैमिली नामों पर --sl-font और हेडिंग font-family सेट करने के लिए styles/custom.css अपडेट करें
4. तेज़ प्रारंभिक रेंडरिंग के लिए फ़ॉलबैक स्टैक (system-ui, "Segoe UI", Helvetica, Arial, sans-serif) बनाए रखें

थीम जाँच

• H2 और H3 वेट 700/500 के साथ neusaNextProWide फ़ॉन्ट फैमिली का उपयोग करते हैं
• H4, H5, H6 proximaNova फ़ॉन्ट, अपरकेस, 0.05em लेटर-स्पेसिंग का उपयोग करते हैं
• लिंक एक्सेंट रंग डार्क मोड में #f06680 और लाइट मोड में #e4002b है
• इनलाइन कोड में --sl-color-gray-5 से बैकग्राउंड टिंट है
• ब्लॉककोट border-left दोनों थीम में दिखाई देती है
• फ़ुटनोट संदर्भ सुपरस्क्रिप्टेड और लिंक्ड हैं
• क्षैतिज रूल में उचित कंट्रास्ट है

Footnotes

1. यह पहली फ़ुटनोट सामग्री है। यह पृष्ठ के नीचे दिखाई देती है। ↩

2. यह दूसरी फ़ुटनोट है। इसमें फ़ॉर्मेटिंग और code हो सकता है। ↩