---
title: "टाइपोग्राफ़ी"
description: "स्तर के नाम वाले सोलह टेक्स्ट स्टाइल — एक डिस्प्ले, छह हेडिंग, बॉडी के तीन साइज़, लेबल, कोड, एक आइब्रो — Inter में सेट, जिनमें एम्फ़ेसिस कोई रोल नहीं, वेट का एक स्टेप है।"
url: "https://tanrei.chnotchy.com/hi/foundations/typography/"
last_updated: 2026-10-23T17:33:05.000Z
---

# टाइपोग्राफ़ी

> स्तर के नाम वाले सोलह टेक्स्ट स्टाइल — एक डिस्प्ले, छह हेडिंग, बॉडी के तीन साइज़, लेबल, कोड, एक आइब्रो — Inter में सेट, जिनमें एम्फ़ेसिस कोई रोल नहीं, वेट का एक स्टेप है।

Tanrei के टेक्स्ट स्टाइल के नाम उस **स्तर** पर रखे गए हैं जो किसी टेक्स्ट का पेज में होता है, किसी साइज़ क्लास पर नहीं। कुल सोलह रोल हैं: एक `display`, `heading-1` से `heading-6`, चलते टेक्स्ट के तीन साइज़, कंट्रोल के भीतर और आस-पास के टेक्स्ट के लिए तीन रोल, कोड के लिए दो, और एक `eyebrow`। `h2` का मतलब `heading-2` है; पैराग्राफ़ `body` है; बटन पर लिखा टेक्स्ट `label` है। किसी को यह याद नहीं रखना पड़ता कि टेबल की हेडिंग चौदह पिक्सल वाले तीन रोल में से कौन-सा है।

रोल एक पूरा टाइप स्टाइल है: फ़ैमिली, साइज़, वेट, लाइन हाइट और अक्षरों के बीच की दूरी। कंपोनेंट रोल से बँधते हैं, कच्चे साइज़ से कभी नहीं, और [लेयर](https://tanrei.chnotchy.com/hi/foundations/design-systems/) रोल का नाम बदले बिना उसे नए मान देती है।

## सोलह रोल

| रोल | डिफ़ॉल्ट | इस्तेमाल |
| --- | --- | --- |
| `display` | 48px · 450 · ब्रैंड टाइपफ़ेस | अकेला हीरो साइज़: लैंडिंग स्क्रीन का मुख्य कथन, स्प्लैश। यह हेडिंग का कोई स्तर नहीं है। |
| `heading-1` | 32px · 500 · ब्रैंड टाइपफ़ेस | `h1`, पेज का शीर्षक। |
| `heading-2` | 24px · 500 · ब्रैंड टाइपफ़ेस | `h2`, एक सेक्शन। |
| `heading-3` | 20px · 500 · ब्रैंड टाइपफ़ेस | `h3`, एक उप-सेक्शन। |
| `heading-4` | 18px · 500 | `h4`, सेक्शन के भीतर एक ग्रुप। |
| `heading-5` | 16px · 500 | `h5`, और कार्ड, डायलॉग या लिस्ट आइटम का शीर्षक। |
| `heading-6` | 14px · 500 | `h6`, और टेबल या फ़ॉर्म के सेक्शन की हेडिंग। |
| `body-large` | 16px · 400 | लीड टेक्स्ट और लंबा पाठ। |
| `body` | 14px · 400 | `p`: इंटरफ़ेस का डिफ़ॉल्ट टेक्स्ट। |
| `body-small` | 13px · 400 | `small`: गौण टेक्स्ट, एक स्टेप नीचे। |
| `label` | 14px · 500 | कंट्रोल के भीतर और उनके पास का टेक्स्ट: बटन, इनपुट, नेविगेशन। |
| `label-small` | 12px · 500 | चिप, बैज, घने कंट्रोल। |
| `caption` | 11px · 500 | सहायक टेक्स्ट, मेटाडेटा, टाइमस्टैम्प। |
| `code` | 13px · 400 · मोनो | `code` और `pre`। |
| `code-small` | 12px · 400 · मोनो | घने UI के भीतर का कोड। |
| `eyebrow` | 12px · 500 · अक्षरों के बीच बढ़ी दूरी | हेडिंग के ऊपर सेक्शन का किकर, जिसे कंपोनेंट अपरकेस करता है। |

हर फ़ैमिली साइज़ में सख़्ती से एकदिश है: कोई हेडिंग अपने से नीचे की हेडिंग से छोटी नहीं है, कोई बॉडी रोल अपने से नीचे के बॉडी रोल से छोटा नहीं है। जहाँ हेडिंग और बॉडी का रोल एक ही साइज़ के हैं — `heading-6` और `body` दोनों 14px हैं, `heading-5` और `body-large` दोनों 16px — वहाँ डिफ़ॉल्ट सिस्टम का नियम एक वाक्य का है: **हेडिंग का वेट 500 है, बॉडी का 400।** प्रीसेट अपने वेट ख़ुद तय करता है (`m3-like` का `heading-1` Material का 400 है)।

वह स्तर चुनें जो टेक्स्ट का है, वह साइज़ नहीं जो आप चाहते हैं। जिस `h2` को छोटा दिखना है, वह फिर भी `heading-2` है; जो प्रॉडक्ट सेक्शन की छोटी हेडिंग चाहता है, वह अपनी लेयर में `heading-2` को नया मान देता है, और हर `h2` उसके साथ बदलता है।

### HTML और Markdown के एलिमेंट → रोल

| एलिमेंट | रोल |
| --- | --- |
| `h1` … `h6` | `heading-1` … `heading-6` |
| `p`, `li`, `td` | `body` (प्रोज़ में, उसके पढ़ने वाले साइज़ पर, `body-large`) |
| लीड पैराग्राफ़ | `body-large` |
| `small` | `body-small` |
| `code`, `pre` | `code` |
| `strong`, `b` | जिस रोल के भीतर है वही रोल, एम्फ़ेसिस वाले वेट पर |
| `button`, `input`, `label` | `label` |
| हेडिंग के ऊपर का किकर | `eyebrow` |

वेब पर `@tanrei/web/text.css` हर रोल को एक यूटिलिटी क्लास देती है, `.tanrei-text-<role>`, जो रोल के पाँचों फ़ील्ड सेट करती है; उसी एलिमेंट या किसी वंशज पर `.tanrei-text-emphasized` एम्फ़ेसिस वाले वेट पर ले जाती है। यह सक्रिय सिस्टम की कस्टम प्रॉपर्टी पढ़ती है, इसलिए `data-tanrei-system`, डायल और नए मान वाले रोल के साथ चलती है।

```html
<h2 class="tanrei-text-heading-2">सेक्शन</h2>
<p class="tanrei-text-body">चलता टेक्स्ट, जिसमें <strong class="tanrei-text-emphasized">ज़ोर</strong> भी है।</p>
```

### प्रोज़: वह टेक्स्ट जिसका लेआउट आपने नहीं बनाया

सहायता लेख, रिलीज़ नोट, शर्तें, Markdown में लिखा संदेश, CMS से आया पेज: प्रॉडक्ट ऐसे टेक्स्ट को टुकड़ा-टुकड़ा करके नहीं रखता, फिर भी उसे बाक़ी इंटरफ़ेस के साथ एक ही पाठ की तरह पढ़ा जाना चाहिए। **प्रोज़** सिस्टम का वह हिस्सा है जो इसी के लिए है — ऊपर की टेबल, जो रेंडरर के बनाए किसी भी आउटपुट पर लागू होती है, एक वर्टिकल रिदम और पंक्ति की लंबाई की एक सीमा के साथ। यह स्टाइल और स्पेसिंग देता है; पार्स नहीं करता। Tanrei किसी भी प्लैटफ़ॉर्म पर Markdown पार्सर शिप नहीं करता।

वेब पर यह `@tanrei/web/prose.css` की एक क्लास है। यह पेज इसी से बना है।

```html
<article class="tanrei-prose">…h1, p, ul, blockquote, hr…</article>
<article class="tanrei-prose" data-size="large">…</article>
```

- **दो साइज़।** `medium` चलते टेक्स्ट को `body` में सेट करता है, कंट्रोल के बीच के प्रोज़ के लिए: पैनल, डायलॉग, कार्ड। `large` उसे `body-large` में सेट करता है, उस पेज के लिए जिसका उद्देश्य ही टेक्स्ट है। हेडिंग दोनों में एक जैसी हैं।
- **दो पड़ोसियों के बीच एक ही अंतर।** ब्लॉक एक-दूसरे से एक गैप की दूरी पर हैं; हेडिंग के पहले उसके बाद से ज़्यादा जगह होती है, ताकि वह आगे आने वाली चीज़ की लगे; हेडिंग के ठीक नीचे की हेडिंग ऊपर वाली की जगह लेती है। अंतर कभी जुड़ते नहीं, और पहले और आख़िरी ब्लॉक पर कोई अंतर नहीं होता।
- **एक माप।** टेक्स्ट ब्लॉक ज़्यादा से ज़्यादा चलते टेक्स्ट के 36 em चौड़े होते हैं — लगभग 72 से 80 लैटिन अक्षर, या 36 जापानी अक्षर। फ़्लो में रखी टेबल, कोड ब्लॉक, चित्र या कोई भी कंपोनेंट पूरी चौड़ाई लेता है। जहाँ कंटेनर पहले से ही सँकरा है, वहाँ `data-measure="false"` यह सीमा हटा देता है।
- **टेक्स्ट का कोई रंग नहीं।** प्रोज़ उस सरफ़ेस के कॉन्टेंट का रंग लेता है जिस पर वह रखा है, इसलिए वही टेक्स्ट पेज पर, कार्ड में और कॉलआउट में पढ़ा जा सकता है।
- **कंपोनेंट जैसे हैं वैसे रहते हैं।** जो किसी Tanrei एलिमेंट के भीतर है, या `tanrei-not-prose` से चिह्नित भाग के भीतर है, उसे प्रोज़ स्टाइल नहीं करता; वह सिर्फ़ उसके आस-पास की स्पेसिंग देता है।
- **लिंक सामान्य अवस्था में अंडरलाइन होते हैं**, ताकि लिंक को पास के टेक्स्ट से अलग बताने का काम कभी अकेले रंग पर न रहे।
- **भाषाएँ।** जापानी और चीनी की पंक्तियाँ अपने नियमों से टूटती हैं; चीनी, जापानी और कोरियाई में एम्फ़ेसिस सीधे अक्षरों में, एम्फ़ेसिस वाले वेट पर होता है, क्योंकि इन लिपियों में इटैलिक नहीं है; इनकी हेडिंग और हर कंपोनेंट का शीर्षक लैटिन हेडिंग की तरह अक्षरों के बीच की दूरी घटाए बिना सेट होते हैं (बढ़ी हुई दूरी बनी रहती है), और जो लिपि अपने अक्षरों को जोड़ती है या उन पर चिह्न चढ़ाती है, उसमें अक्षरों के बीच कोई दूरी नहीं जोड़ी जाती। जापानी का मुख्य टेक्स्ट थोड़ा खुला, 1.85 की लाइन हाइट पर सेट होता है, ताकि दो पंक्तियों के बीच की जगह एक अक्षर के क़रीब रहे, जैसा जापानी टेक्स्ट लेआउट की ज़रूरतें (JLREQ) इतनी लंबी पंक्तियों के लिए सुझाती हैं। दिशा उस जगह की होती है: दाएँ से बाएँ वाला लेआउट सूची के इनसेट, उद्धरण की रेखा और टेक्स्ट का किनारा दाईं ओर रखता है।

हेडिंग के साथ एक ऐंकर हो सकता है — ख़ुद उसी हेडिंग का लिंक, उसके टेक्स्ट के अंत के बाद, जो हेडिंग पर होवर करने या लिंक पर फ़ोकस आने पर दिखता है, और जहाँ होवर नहीं है वहाँ हमेशा दिखता है:

```html
<div class="tanrei-prose-heading">
  <h2 id="install">इंस्टॉल करें</h2>
  <a class="tanrei-prose-anchor" href="#install" aria-label="इसका लिंक: इंस्टॉल करें">…</a>
</div>
```

हर मान एक `comp.prose.*` टोकन है, इसलिए लेयर किसी मार्जिन को छुए बिना रिदम को दूसरी जगह मोड़ सकती है। यह व्यवहार `specs/prose.spec.json` के रूप में लिखा गया है; वेब इसे सबसे पहले इम्प्लीमेंट करता है, और बाक़ी प्लैटफ़ॉर्म उसके बाद।

## एम्फ़ेसिस एक वेट है, रोल नहीं

स्तर बदले बिना टेक्स्ट पर ज़ोर देने के लिए — चुना हुआ टैब, कोई अहम आँकड़ा, पैराग्राफ़ के भीतर `strong` — प्लैटफ़ॉर्म रोल को उसके वेट में उसकी फ़ैमिली का एक **स्टेप** जोड़कर बनाता है। चारों स्टेप टोकन हैं:

| डिज़ाइन सिस्टम | `emphasis.display` | `emphasis.heading` | `emphasis.body` | `emphasis.label` |
| --- | --- | --- | --- | --- |
| `tanrei` | 100 | 100 | 100 | 100 |
| `cupertino` | 100 | 200 | 200 | 200 |
| `m3-expressive-like` | 100 | 100 | 100 | 200 |
| `m3-like` | 100 | 100 | 100 | 200 |

इससे जनरेट किया गया: `tokens/systems/*.system.json`, `design/tokens/<system>/tanrei.light.tokens.json`

Tanrei हर फ़ैमिली में 100 जोड़ता है, इसलिए एम्फ़ेसिस वाला `heading-1` 600 है और एम्फ़ेसिस वाला `body` 500। जो डिज़ाइन सिस्टम हर फ़ैमिली पर अलग ढंग से ज़ोर देता है, वह चारों संख्याएँ सेट करता है: `m3-like` लेबल में 200 जोड़ता है, जैसा Material के एम्फ़ेसिस वाले लेबल स्टाइल करते हैं; `cupertino` हेडिंग, बॉडी और लेबल में 200 जोड़ता है। रोल की फ़ैमिली उसके नाम का पहला खंड है; `caption`, `code`, `code-small` और `eyebrow` लेबल वाला स्टेप लेते हैं।

हर प्लैटफ़ॉर्म वही मॉडिफ़ायर देता है: टेक्स्ट-स्टाइल API पर `emphasized` (SwiftUI में `.tanreiTextStyle(system.typescale.heading1, emphasized: true)`, Compose में `typescale.heading1.emphasized()` — कंपोज़िशन के बाहर `emphasized(system.typescale.emphasis)` — Flutter में `theme.textStyle(system.typescale.heading1, emphasized: true)`, React Native में `useTanrei()` से मिला `text('heading1', { emphasized: true })`, और वेब पर `--tanrei-sys-typescale-<role>-font-weight-emphasized` और `.tanrei-text-emphasized`)। न एम्फ़ेसिस वाले रोल को नाम देना पड़ता है, न किसी दूसरे स्केल को साथ-साथ मिलाकर रखना पड़ता है।

## टाइपफ़ेस

डिफ़ॉल्ट फ़ैमिली हैं: लैटिन टेक्स्ट के लिए **Inter**, जापानी के लिए **Noto Sans JP** और कोड के लिए **Roboto Mono**, तीनों खुले लाइसेंस वाली (SIL OFL 1.1 और Apache-2.0)। स्टैक में इनके बाद दूसरी लिपियों के लिए Noto Sans और फिर सिस्टम का UI फ़ॉन्ट आता है, इसलिए जहाँ फ़ॉन्ट लोड नहीं हैं वहाँ भी टेक्स्ट ठीक ढंग से दिखता है। जो प्रॉडक्ट और लिपियों में शिप होता है, वह अपनी लेयर में हर लिपि की Noto फ़ैमिली — Noto Sans KR, SC, TC, Arabic, Devanagari, Thai — स्टैक में जोड़ता है; चीनी, जापानी और कोरियाई के लिए पेज पर `lang` भी सेट करें, क्योंकि तीनों के कोड पॉइंट साझा हैं और फ़ॉन्ट का क्रम तय करता है कि ग्लिफ़ का कौन-सा रूप दिखेगा। Tanrei फ़ॉन्ट फ़ाइलें साथ में नहीं देता; [उन्हें प्रॉडक्ट देता है](https://tanrei.chnotchy.com/hi/foundations/typography/#%E0%A4%A8%E0%A4%BE%E0%A4%AE-%E0%A4%B8%E0%A5%87-%E0%A4%B0%E0%A5%87%E0%A4%AB%E0%A4%BC%E0%A4%B0%E0%A5%87%E0%A4%82%E0%A4%B8-%E0%A4%B8%E0%A4%BE%E0%A4%A5-%E0%A4%AE%E0%A5%87%E0%A4%82-%E0%A4%95%E0%A4%AD%E0%A5%80-%E0%A4%A8%E0%A4%B9%E0%A5%80%E0%A4%82)।

- **`ref.typeface.brand`**: Display and headline text. Inter for Latin, Noto Sans JP for Japanese, Noto Sans for other scripts; a product adds the Noto family of each further script it ships (Noto Sans KR, SC, TC, Arabic, Devanagari, Thai…).
- **`ref.typeface.plain`**: Running text and labels. Inter for Latin, Noto Sans JP for Japanese, Noto Sans for other scripts.
- **`ref.typeface.mono`**: Code. Roboto Mono, with Noto Sans JP for Japanese inside code.

इससे जनरेट किया गया: `tokens/ref/typeface.tokens.json`

## हर डिज़ाइन सिस्टम के अपने टाइपफ़ेस

टाइपफ़ेस डिज़ाइन सिस्टम के होते हैं। रोल तीन स्टैक पर बने हैं — `display` और `heading-1` से `heading-3` के लिए `ref.typeface.brand`, छोटी हेडिंग, चलते टेक्स्ट, लेबल और आइब्रो के लिए `plain`, कोड के लिए `mono` — और [लेयर](https://tanrei.chnotchy.com/hi/foundations/design-systems/) किसी स्टैक को नया मान देकर हर जगह टाइपफ़ेस बदल देती है। साथ आने वाले सिस्टम इन मानों पर रिज़ॉल्व होते हैं:

| डिज़ाइन सिस्टम | `brand` | `plain` | `mono` |
| --- | --- | --- | --- |
| `tanrei` | Inter, Noto Sans JP, Noto Sans, system-ui, sans-serif | Inter, Noto Sans JP, Noto Sans, system-ui, sans-serif | Roboto Mono, Noto Sans JP, ui-monospace, monospace |
| `cupertino` | -apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif | -apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif | ui-monospace, SF Mono, Menlo, monospace |
| `m3-expressive-like` | Roboto, system-ui, sans-serif | Roboto, system-ui, sans-serif | Roboto Mono, ui-monospace, monospace |
| `m3-like` | Roboto, system-ui, sans-serif | Roboto, system-ui, sans-serif | Roboto Mono, ui-monospace, monospace |

इससे जनरेट किया गया: `tokens/systems/*.system.json`, `design/tokens/<system>/tanrei.light.tokens.json`

`m3-like` अपना टेक्स्ट Roboto में इस तरह सेट करता है:

```json
"tokens": {
  "tanrei.ref.typeface.brand": { "$value": ["Roboto", "system-ui", "sans-serif"], "reason": "Material Design 3's default typeface; Roboto is OFL-licensed." },
  "tanrei.ref.typeface.plain": { "$value": ["Roboto", "system-ui", "sans-serif"], "reason": "Material Design 3's default typeface; Roboto is OFL-licensed." },
  "tanrei.ref.typeface.mono":  { "$value": ["Roboto Mono", "ui-monospace", "monospace"], "reason": "The monospace companion of Roboto (OFL)." }
}
```

कंपोनेंट अछूते रहते हैं: वे रोल से बँधे हैं, और रोल स्टैक का रेफ़रेंस लेते हैं।

### स्टैक कैसे पढ़ा जाता है

स्टैक उसी तरह लिखा जाता है जैसे CSS लिखती है, क्योंकि हर डिज़ाइन टूल यही रूप समझता है। उसे लिखे हुए रूप में सिर्फ़ वेब इस्तेमाल कर सकता है, इसलिए बिल्ड हर स्टैक को एक बार पढ़ता है और हर प्लैटफ़ॉर्म को वही चार तथ्य देता है:

| फ़ील्ड | अर्थ |
| --- | --- |
| `stack` | सूची, जैसी लिखी गई है |
| `families` | **नाम वाली** फ़ैमिली, क्रम से — वे जिन्हें प्रॉडक्ट इंस्टॉल या रजिस्टर कर सकता है |
| `generic` | फ़ॉन्ट का वह वर्ग जिस पर फ़ॉलबैक होना है: `sans-serif`, `serif` या `monospace` |
| `system` | `true`, जब स्टैक किसी भी नाम वाली फ़ैमिली से पहले प्लैटफ़ॉर्म का अपना फ़ॉन्ट माँगता है |

डिफ़ॉल्ट `brand` स्टैक, `Inter, Noto Sans JP, Noto Sans, system-ui, sans-serif`, इस तरह पढ़ा जाता है: फ़ैमिली Inter, Noto Sans JP और Noto Sans, generic `sans-serif`, `system` false: `system-ui` नाम वाली फ़ैमिली के बाद आता है, इसलिए वह सिर्फ़ फ़ॉलबैक है। `cupertino` का स्टैक `-apple-system` से शुरू होता है, इसलिए वह `system` true के रूप में पढ़ा जाता है, जिसमें Inter अकेली नाम वाली फ़ैमिली है: पहले प्लैटफ़ॉर्म का अपना फ़ॉन्ट, और जहाँ प्लैटफ़ॉर्म में ऐसी कोई धारणा नहीं है वहाँ Inter।

प्लैटफ़ॉर्म नाम वाली फ़ैमिली क्रम से इस्तेमाल करता है, फिर `generic` वर्ग का अपना फ़ॉन्ट; जब `system` true हो, तो उसका अपना फ़ॉन्ट सबसे पहले आता है। प्लैटफ़ॉर्म `system-ui`, `ui-monospace` या जेनेरिक कीवर्ड की व्याख्या ख़ुद नहीं करते।

### नाम से रेफ़रेंस, साथ में कभी नहीं

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

| प्लैटफ़ॉर्म | प्रॉडक्ट नाम वाली फ़ैमिली कैसे देता है |
| --- | --- |
| Web | उसे ठीक उसी फ़ैमिली नाम से लोड करें: आपका अपना `@font-face`, Google Fonts, या कोई फ़ॉन्ट पैकेज। |
| SwiftUI | फ़ॉन्ट फ़ाइलें ऐप में जोड़ें और उन्हें रजिस्टर करें (`UIAppFonts` / `ATSApplicationFontsPath`, या `CTFontManagerRegisterFontsForURL`)। |
| Jetpack Compose | फ़ॉन्ट ऐप के फ़ॉन्ट रिसोर्स में रखें और `TanreiTheme` को दी गई `TanreiFontFamilies` से नामों को उनसे मैप करें। |
| Flutter | फ़ॉन्ट फ़ाइलें ऐप की `pubspec.yaml` में उन्हीं फ़ैमिली नामों के अंतर्गत घोषित करें। |
| React Native | फ़ॉन्ट फ़ाइलें लिंक करें (`npx react-native-asset`, या `expo-font`)। React Native में फ़ॉलबैक की कोई सूची नहीं होती और वह हर वेट के लिए एक फ़ाइल चुनता है, इसलिए जब आपके फ़ॉन्ट हर वेट के लिए एक नाम से रजिस्टर हों, तो `TanreiProvider` को `resolveFont` दें। |

ब्योरा “शुरुआत करें” की गाइड और हर पैकेज के README में है। किसी टाइपफ़ेस को शिप करने से पहले उसका लाइसेंस जाँच लें: डिफ़ॉल्ट टाइपफ़ेस खुले लाइसेंस वाले हैं, और `cupertino` Apple के फ़ॉन्ट का रेफ़रेंस सिर्फ़ कीवर्ड या नाम से लेता है, क्योंकि उन्हें साथ में देने या दूसरे प्लैटफ़ॉर्म पर इस्तेमाल करने की अनुमति नहीं हो सकती; दूसरी जगहों पर वह खुले लाइसेंस वाले टाइपफ़ेस पर आ जाता है।

## प्रीसेट स्केल को नए मान कैसे देते और उसका विस्तार कैसे करते हैं

जो प्रीसेट किसी दूसरे डिज़ाइन सिस्टम की नक़ल करता है, वह सोलह नाम रखता है और उन्हें उस सिस्टम के मान देता है; जहाँ उसके स्रोत में ऐसा स्टाइल है जिसका कोर में नाम नहीं, वहाँ वह अपने एक रोल के साथ शब्दावली का **विस्तार** करता है। नाम कभी नहीं खिसकते, इसलिए `tanrei` पर बना प्रॉडक्ट एक भी हेडिंग छुए बिना `m3-like` पर चला जाता है।

- **`m3-like`** हर रोल को Material Design 3 के टाइप स्केल से नया मान देता है — `heading-1` Material का “headline large” लेता है, `body` उसका “body medium”, `label` उसका “label large” — और `display-large` (57px) और `display-small` (36px) जोड़ता है, क्योंकि Material में डिस्प्ले के तीन साइज़ हैं और एक प्रॉडक्ट को एक चाहिए। इसके एम्फ़ेसिस स्टेप Material के हैं: डिस्प्ले, हेडिंग और बॉडी पर 100, लेबल पर 200। फ़िडेलिटी हार्नेस Material के प्रकाशित हर टेक्स्ट स्टाइल को मापता है, एम्फ़ेसिस वालों समेत सभी तीस, और साथ में कलर रोल और Button को: मापे गए 288 टोकन में से 273 बराबर हैं, 14 किसी दूसरे टोकन से कवर हैं, 1 एक दर्ज मिमिक्री गैप के अंतर्गत बिना मैपिंग के है, और कोई भी अलग नहीं है — [डिज़ाइन सिस्टम पेज](https://tanrei.chnotchy.com/hi/foundations/design-systems/) पर यह 273 / 274 के रूप में दिखता है, जो कवर किए गए टोकन को गिनती से बाहर रखता है। ये संख्याएँ `tokens/generated/m3-like/fidelity.json` से पढ़ी जाती हैं, जिसे बिल्ड दोबारा लिखता है।
- **`cupertino`** हर रोल को Apple के iOS के ग्यारह टेक्स्ट स्टाइल से नया मान देता है — Large Title से लेकर Caption 2 तक — और वे तीन जोड़ता है जिनका कोर में नाम नहीं: `body-callout`, `body-subhead` और `caption-small`। इसके एम्फ़ेसिस स्टेप डिस्प्ले पर 100 और बाक़ी जगह 200 हैं, जो Apple के regular और emphasized स्टाइल के बीच की दूरी है।

प्रीसेट का जोड़ा हुआ रोल हर प्लैटफ़ॉर्म पर एक साधारण टोकन है: `m3-like` का `display-large` वेब पर `--tanrei-sys-typescale-display-large-font` है और हर नेटिव पैकेज में टाइप स्केल का एक सदस्य। Theme Studio का प्रीव्यू इसे टाइप रैंप में सोलह के बग़ल में बनाता है।

## चरित्र

- **डिस्प्ले और हेडिंग कसी हुई हैं।** बड़ा टाइप अक्षरों के बीच घटी हुई दूरी के साथ सेट होता है — `display` पर −0.04em, `heading-1` पर −0.03em, जो `heading-5` पर घटकर −0.01em रह जाती है — जिससे बड़ी हेडिंग शांत रहती हैं; वेट 450 पर `display` हल्का रहता है।
- **छोटे साइज़ खुलते हैं।** `body-small`, `label-small`, `caption` और `eyebrow` में अक्षरों के बीच की दूरी थोड़ी बढ़ी होती है, ताकि 11–13px का टेक्स्ट पढ़ने लायक़ रहे।
- **वेट संख्याएँ हैं।** चूँकि Inter एक वेरिएबल फ़ॉन्ट है, 450 जैसे वेट मान्य हैं और वेरिएबल अक्ष सपोर्ट करने वाले हर प्लैटफ़ॉर्म पर बने रहते हैं। एम्फ़ेसिस स्टेप भी इसी कारण संख्याएँ हैं: 450 + 100 एक असली वेट है।
- **मोनो कोड के लिए है।** `code` और `code-small` Roboto Mono इस्तेमाल करते हैं। `eyebrow` प्लेन टाइपफ़ेस में सेट होता है — छोटा, अक्षरों के बीच खुली दूरी के साथ, और अपरकेस उसे कंपोनेंट करता है, टोकन कभी नहीं।

## भाषाएँ

लाइन हाइट इस तरह चुनी गई हैं कि लैटिन और CJK का मिला-जुला टेक्स्ट कटे नहीं, और जापानी उन्हीं रोल को इनहेरिट करती है। अक्षरों के बीच घटी हुई दूरी लैटिन लिपि की युक्ति है: जहाँ भी टेक्स्ट का `lang` चीनी, जापानी या कोरियाई हो — prose में, टेक्स्ट क्लास में और हर कंपोनेंट के शीर्षक में — Tanrei उसे हटाकर हेडिंग को बिना घटी दूरी के सेट करता है। `lang` सेट करें, हेडिंग को और कुछ नहीं चाहिए।

## स्केलिंग

टाइप के साइज़ वेब पर रिलेटिव इकाइयों (`rem`) में दिए गए हैं और हर प्लैटफ़ॉर्म पर व्यक्ति की टेक्स्ट-साइज़ सेटिंग के साथ स्केल होते हैं। लेआउट को 200% पर टेक्स्ट सहना चाहिए: कंटेनर बढ़ते हैं, और लेबल कटने से पहले अगली पंक्ति में जाते हैं। हर साइज़ `dial.type.base` पर एक गुणांक है, जिसका घातांक `dial.type.contrast` है, इसलिए एक डायल पूरे स्केल को खिसकाता है और दूसरा हेडिंग को बॉडी से दूर फैलाता है।

हर रोल को लाइव नमूनों के साथ [टाइप स्केल रेफ़रेंस](https://tanrei.chnotchy.com/hi/tokens/typescale/) में देखें।