टाइप स्केल टोकन

नमूने जनरेट की गई CSS कस्टम प्रॉपर्टी से सेट हैं, इसलिए आप जो देखते हैं वही @tanrei/web शिप करता है। हर रोल अपने हिस्से अलग-अलग प्रॉपर्टी के रूप में देता है: -font-family, -font-size, -line-height, -font-weight, -letter-spacing और -font-weight-emphasized, और साथ में एक -font शॉर्टहैंड। मार्गदर्शन के लिए — h2 या p कौन-सा रोल है, और एम्फ़ेसिस रोल के बजाय वेट क्यों है — टाइपोग्राफ़ी पढ़ें।

सोलह रोल

link

body 14px / 22px · 400 (एम्फ़ेसिस के साथ 500) · 0

साफ़ और सुगठित इंटरफ़ेस Tanrei

body-large 16px / 26px · 400 (एम्फ़ेसिस के साथ 500) · 0

साफ़ और सुगठित इंटरफ़ेस Tanrei

body-small 13px / 20px · 400 (एम्फ़ेसिस के साथ 500) · +0.005em

साफ़ और सुगठित इंटरफ़ेस Tanrei

caption 11px / 16px · 500 (एम्फ़ेसिस के साथ 600) · +0.02em

साफ़ और सुगठित इंटरफ़ेस Tanrei

code 13px / 20px · 400 (एम्फ़ेसिस के साथ 500) · 0

const tanrei = 端麗;

code-small 12px / 16px · 400 (एम्फ़ेसिस के साथ 500) · 0

const tanrei = 端麗;

display 48px / 52px · 450 (एम्फ़ेसिस के साथ 550) · -0.04em

साफ़ और सुगठित इंटरफ़ेस Tanrei

eyebrow 12px / 16px · 500 (एम्फ़ेसिस के साथ 600) · +0.08em

Design tokens

heading-1 32px / 40px · 500 (एम्फ़ेसिस के साथ 600) · -0.03em

साफ़ और सुगठित इंटरफ़ेस Tanrei

heading-2 24px / 32px · 500 (एम्फ़ेसिस के साथ 600) · -0.025em

साफ़ और सुगठित इंटरफ़ेस Tanrei

heading-3 20px / 28px · 500 (एम्फ़ेसिस के साथ 600) · -0.02em

साफ़ और सुगठित इंटरफ़ेस Tanrei

heading-4 18px / 26px · 500 (एम्फ़ेसिस के साथ 600) · -0.015em

साफ़ और सुगठित इंटरफ़ेस Tanrei

heading-5 16px / 24px · 500 (एम्फ़ेसिस के साथ 600) · -0.01em

साफ़ और सुगठित इंटरफ़ेस Tanrei

heading-6 14px / 20px · 500 (एम्फ़ेसिस के साथ 600) · 0

साफ़ और सुगठित इंटरफ़ेस Tanrei

label 14px / 20px · 500 (एम्फ़ेसिस के साथ 600) · 0

साफ़ और सुगठित इंटरफ़ेस Tanrei

label-small 12px / 16px · 500 (एम्फ़ेसिस के साथ 600) · +0.01em

साफ़ और सुगठित इंटरफ़ेस Tanrei

टोकन	फ़ैमिली	साइज़	लाइन हाइट	वेट	एम्फ़ेसिस वाला वेट	अक्षरों के बीच की दूरी
--tanrei-sys-typescale-body	Inter	14px	1.5714	400	500	0px
--tanrei-sys-typescale-body-large	Inter	16px	1.625	400	500	0px
--tanrei-sys-typescale-body-small	Inter	13px	1.5385	400	500	0.065px
--tanrei-sys-typescale-caption	Inter	11px	1.4545	500	600	0.22px
--tanrei-sys-typescale-code	Roboto Mono	13px	1.5385	400	500	0px
--tanrei-sys-typescale-code-small	Roboto Mono	12px	1.3333	400	500	0px
--tanrei-sys-typescale-display	Inter	48px	1.0833	450	550	-1.92px
--tanrei-sys-typescale-eyebrow	Inter	12px	1.3333	500	600	0.96px
--tanrei-sys-typescale-heading-1	Inter	32px	1.25	500	600	-0.96px
--tanrei-sys-typescale-heading-2	Inter	24px	1.3333	500	600	-0.6px
--tanrei-sys-typescale-heading-3	Inter	20px	1.4	500	600	-0.4px
--tanrei-sys-typescale-heading-4	Inter	18px	1.4444	500	600	-0.27px
--tanrei-sys-typescale-heading-5	Inter	16px	1.5	500	600	-0.16px
--tanrei-sys-typescale-heading-6	Inter	14px	1.4286	500	600	0px
--tanrei-sys-typescale-label	Inter	14px	1.4286	500	600	0px
--tanrei-sys-typescale-label-small	Inter	12px	1.3333	500	600	0.12px

इससे जनरेट किया गया: design/tokens/tanrei.light.tokens.json, tokens/sys/typescale.tokens.json

एम्फ़ेसिस स्टेप

link

एम्फ़ेसिस वाला टेक्स्ट वही रोल है, जिसके वेट में उसकी फ़ैमिली का स्टेप जुड़ा है। रोल की फ़ैमिली उसके नाम का पहला खंड है; caption, code, code-small और eyebrow लेबल वाला स्टेप लेते हैं। चारों स्टेप, साथ आने वाले हर सिस्टम के लिए:

डिज़ाइन सिस्टम	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