होमबुनियादी बातेंटाइपोग्राफ़ी

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

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

अंतिम अपडेट: 23 अक्टूबर 2026

content_copy

Markdown में देखें

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

रोल एक पूरा टाइप स्टाइल है: फ़ैमिली, साइज़, वेट, लाइन हाइट और अक्षरों के बीच की दूरी। कंपोनेंट रोल से बँधते हैं, कच्चे साइज़ से कभी नहीं, और लेयर रोल का नाम बदले बिना उसे नए मान देती है।

सोलह रोल

रोल	डिफ़ॉल्ट	इस्तेमाल
`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, डायल और नए मान वाले रोल के साथ चलती है।

<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 की एक क्लास है। यह पेज इसी से बना है।

<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) इतनी लंबी पंक्तियों के लिए सुझाती हैं। दिशा उस जगह की होती है: दाएँ से बाएँ वाला लेआउट सूची के इनसेट, उद्धरण की रेखा और टेक्स्ट का किनारा दाईं ओर रखता है।

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

<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 फ़ॉन्ट फ़ाइलें साथ में नहीं देता; उन्हें प्रॉडक्ट देता है।

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 — और लेयर किसी स्टैक को नया मान देकर हर जगह टाइपफ़ेस बदल देती है। साथ आने वाले सिस्टम इन मानों पर रिज़ॉल्व होते हैं:

डिज़ाइन सिस्टम	`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 में इस तरह सेट करता है:

"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 एक दर्ज मिमिक्री गैप के अंतर्गत बिना मैपिंग के है, और कोई भी अलग नहीं है — डिज़ाइन सिस्टम पेज पर यह 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 है, इसलिए एक डायल पूरे स्केल को खिसकाता है और दूसरा हेडिंग को बॉडी से दूर फैलाता है।

हर रोल को लाइव नमूनों के साथ टाइप स्केल रेफ़रेंस में देखें।

GitHub पर सोर्स कोड और इश्यू