इंटरफेस टाइपोग्राफी

1) उत्पाद में टाइपोग्राफी की भूमिका

• गति स्कैनिंग और संज्ञानात्मक भार को कम करता है,
• एक पदानुक्रम बनाता है और राज्य को नेविगेट करने में मदद करता है,
• रूपांतरण (CTA, फॉर्म) बढ़ाता है और त्रुटियों को कम करता है,
• इंटरफ़ेस को स्थानीयकरण के लिए सुलभ और प्रतिरोधी बनाता है।

2) बुनियादी पैरामीटर

पिन (बॉडी टेक्स्ट): डेस्कटॉप पर 16-18 पीएक्स, मोबाइल पर 15-16 पीएक्स।

लाइन-ऊंचाई: 1। 45–1. 6 पाठ के लिए, 1। 2–1. खिताब के लिए 35।

लाइन की लंबाई (माप): 45-80 वर्ण; साइडबार में - 36-60।

ट्रैकिंग: सादे पाठ के लिए 0-1%; कैप्सूल के लिए - + 2-4%।

कंट्रास्ट (WCAG) -सादा पाठ ≥ 4। 5: 1, मोटे/वसायुक्त ≥ 3:1।

रजिस्टर: स्थायी सभी CAPS से बचें; टैग/चिप्स के लिए उपयोग करें, ट्रैकिंग के लिए क्षतिपूर्ति करें।

3) पदानुक्रम और आकार का पैमाना

हम एक मॉड्यूलर दृष्टिकोण की सिफारिश करते हैं: 8-पीटी ग्रिड + टाइपोग्राफिक स्केल।

• प्रदर्शन: 40/48 (एलएच 1। 15)
• H1: 32/40 (1) 25)
• H2: 24/32 (1) 25)
• H3: 20/28 (1) 3)
• H4: 18/26 (1) 4)
• बॉडी/एल: 18/28 (1) 55)
• शरीर/एम: 16/26 (1) 55)
• शरीर/एस: 14/22 (1) 5)
• कैप्शन: 12/18 (1) 5)
• मोनो/यूआई: 12-14/18-20

• पड़ोसी स्तरों के बीच - एक ध्यान देने योग्य कदम (कम से कम 12-16%)।
• पदानुक्रम आकार, वजन, अग्रणी, रंग (ध्यान में विपरीत) और पड़ोसी ब्लॉकों की दूरी के संयोजन द्वारा बनाया गया है।

4) कैप ऊंचाई, बेसलाइन और प्रकाशिकी

तत्वों को हेडर की कैप ऊंचाई पर संरेखित करें (आइकन के साथ सुविधाजनक)।

4/8-पीटी पाठ बेसलाइन बनाए रखें - यहां तक कि लय भी पढ़ ना आसान बनाते हैं।

ऑप्टिकल इंडेंट्स: ब्लॉक के ऊपर के शीर्षक इसके नीचे से बड़े हैं (उदाहरण के लिए, + 4-8 पीएक्स ऊपर)।

5) शैलियाँ और चर फोंट

न्यूनतम सेट: नियमित, मध्यम, बोल्ड (बोल्ड वैकल्पिक)।

UI में अल्ट्रा-लाइट/थिन का उपयोग न करें।

• शरीर: 420-470 (वैकल्पिक रूप से 400 से अधिक चापलूसी)।
• यूआई लेबल: 500-550।
• हेडर/सीटीए: 600-650।
• यदि आकार कम हो जाता है, तो वजन (मुआवजा) थोड़ा बढ़ जाता है।
• यूआई संख्या में सजावटी लिगचर अक्षम करें; मानक सिरिलिक/लैटिन लिगेचर धारण करें।

6) संख्या, तालिकाएं और तिथियाँ

मात्रा, गुणांक, टाइमर, रेटिंग के लिए सारणीबद्ध आंकड़े शामिल करें।

+/ − संकेत हमेशा दिखाई देते हैं और पर्याप्त विपरीत के साथ; नकारात्मक मानों को न केवल रंग में उभारें (आइकन/तीर/बोल्ड)।

मौद्रिक मूल्यों के लिए, एक पतले बिट विभाजक (या स्थानीय प्रारूप) के रूप में एक संकीर्ण स्थान का उपयोग करें।

तालिकाओं में, दशमलव बिंदु के लिए संरेखित करें; मोनो स्तंभों के लिए - मोनोस्पेस्ड फ़ॉन्ट।

अक्ष हस्ताक्षर रेखांकन ≥ 12 पीएक्स (मोबाइल) और ≥ 13-14 पीएक्स (डेस्कटॉप), एलएच 1। 3; किंवदंतियों ≥ 4। 5: 1 पृष्ठभूमि के लिए।

7) फॉर्म, इनपुट, संदेश

लेबल 12-14 पीएक्स, एलएच 1। 3–1. 4, नियमित या माध्यम।

प्लेसहोल्डर को "ग्रे एयर" नहीं होना चाहिए - लक्ष्य पृष्ठभूमि के लिए 3: 1 है, जो पाठ से नेत्रहीन रूप से अलग है।

त्रुटियां/सफलता/सहायता पाठ 12-14 पीएक्स; केवल रंग (प्रतीक/पाठ) पर भरोसा न करें।

8) डार्क/लाइट थीम्स

एक अंधेरे विषय में, # 000 पर # FFF से बचें: पृष्ठभूमि को L≈0 तक बढ़ाएं। 14–0. 18, और पाठ को L≈0 तक कम करें। 9 - कम चकाचौंध।

अंधेरे में अग्रणी + 0 हो सकता है। 05 ऊपर आराम के लिए।

अंधेरे में लिंक/उच्चारण - संतृप्ति को कम करना और 0। 02–0. 04.

9) स्थानीयकरण और बहुभाषावाद

पूर्ण सिरिलिक/लैटिन/ग्रीक, उच्चारण चिह्न और मुद्रा समर्थन वाले परिवार चुनें।

आरटीएल: दर्पण आइकन/संरेखण, लेकिन संख्या और लैटिन नहीं; परीक्षण स्थानांतरण।

केवल लंबी सामग्री क्षेत्रों में शामिल करने के लिए ऑटो स्थानान्तरण ('हाइफ़न्स: ऑटो'); UI बटन में - स्थानांतरण प्रतिबंधित करें।

तुर्की/अजरबैजान के लिए, "İ/ı" रूपों की जाँच करें।

जॉर्जियाई और थाई के लिए, बेस पिन को 1 px (शैली की विशेषताएं) द्वारा उठाएं।

10) उपलब्धता (A11y)

पाठ विपरीत: देखें। 2।

फ़ोकस शैलियाँ - बिना रंग के दृश्य: रेखांकित, किनारा, छाया, ऑफसेट।

फ़ॉन्ट आकार व्यवस्थित रूप से स्केल किया गया है (ओएस पाठ आकार समर्थन)।

केवल रंग/वजन के माध्यम से अर्थ एनकोड न करें - स्पष्ट कैप्शन और प्रतीक जोड़ें।

11) फ़ॉन्ट लोडिंग और प्रदर्शन

उद्देश्य: रुकावटों को कम करने के लिए, अनुमानित FOUT और स्थिर CLS प्रदान करना।

सबसेट: लैटिन, सिरिलिक, संख्या/प्रतीक - व्यक्तिगत फ़ाइलें।

प्रारूप: 'woff2' (मुख्य), 'woff' फॉलबैक के रूप में।

'फॉन्ट-डिस्प्ले: स्वैप' (या द्वितीयक परिवारों के लिए 'वैकल्पिक')।

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

3-4 स्टेटिक्स के बजाय चर फ़ॉन्ट - अक्सर वजन में अधिक लाभदायक।

बजट: महत्वपूर्ण पथ (gzip/brotli के बाद) के लिए कुल ≤ 150-200 KB।

रेंडर: पाठ पर कई छाया/मुखौटे से बचें; सिस्टम प्रभाव का उपयोग संयम से करें।

12) टाइपोग्राफी टोकन (डिजाइन प्रणाली)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) लेआउट और लय

8-पीटी ऊर्ध्वाधर मॉड्यूल; पैराग्राफ = 1 × आधार चरण के बीच की दूरी।

सूची- मार्कर का इंडेंटेशन पाठ के आधार रेखा के साथ संरेखित है।

बटन और फ़ील्ड - हाइट्स बेसलाइन ग्रिड लाइन के गुणक हैं (उदाहरण के लिए, 40/48/56 px)।

14) आईगेमिंग की विशिष्टता (कार्यशाला)

ऑड्स/ऑड्स, बैलेंस, टाइमर - सारणीबद्ध संख्याओं का उपयोग करें, महत्वपूर्ण स्तंभों में मोनोस्पेस्ड।

नेता/रेटिंग: श्रेणी द्वारा समतल, एकीकृत मुद्रा प्रारूप, स्पष्ट "↑/↓"।

महत्वपूर्ण सूचनाएं (18 +, सीमा, जोखिम) - इसके विपरीत न्यूनतम एएए, सभी सीएपीएस का उपयोग नहीं करते हैं।

प्रोमो बैनर: केवल कंट्रास्ट-नियंत्रित स्लिप/ओवरले पर पाठ।

15) एंटी-पैटर्न

छोटे पिंस पर प्रकाश/पतला।

बिना कंट्रास्ट चेकिंग के रंगीन पृष्ठभूमि पर ग्रे पाठ।

दो या अधिक हेडसेट "सुंदरता के लिए।"

लंबी पंक्तियाँ (> 90 अक्षर) और घनी रेखा-ऊँचाई <1। 35.

टेबल/" जंपिंग" रकम में आनुपातिक चौड़ाई संख्या।

बटन/लेबल में पुश ट्रांसफर।

16) चेकलिस्ट की समीक्षा करें

पढ़ ने योग्यता

• बॉडीसुइट्स 16-18 पीएक्स; LH ≥ 1। 45.
• स्ट्रिंग की लंबाई 45-80 वर्ण है।

पदानुक्रम

• वेतन वृद्धि में स्केल ≥ 12%; ग्रिड के अनुरूप इंडेंट।

संख्या/तालिकाएँ

• रकम/गुणांक के लिए सारणीबद्ध-सुन्न; दशमलव संरेखण।

उपलब्धता

• WCAG कंट्रास्ट हासिल किया; फोकस स्टाइल बिना रंग के दिखाई देते हैं।

निष्पादन

• Subset/woff2; 'फ़ॉन्ट-डिस्प्ले: स्वैप'; बजट ≤ 200 KB।

स्थानीयकरण

• सिरिलिक/लैटिन/आरटीएल समर्थन; hyphenation/diacritics जाँच की।

17) ए/बी और मैट्रिक्स

टेस्ट: बॉडी of 1 पीएक्स पिन, हेडिंग स्केल पिच, सीटीए वेट, लीडिंग।

उपाय: पढ़ ने का समय, स्क्रॉल गहराई, सीटीआर सीटीए, फॉर्म त्रुटियां, सीएलएस (पाठ स्थिरता)।

संक्षिप्त सारांश

टाइपोग्राफी इंटरफ़ेस का कंकाल है। एक पूर्वानुमानित स्केल सेट करें, कंट्रास्ट और लय रखें, चर फोंट और सारणीबद्ध संख्याओं का उपयोग करें, लोडिंग का अनुकूलन करें। फिर UI को जल्दी से पढ़ा जाएगा, स्थिर रूप से काम किया जाएगा और थीम और भाषाओं को पैमाना दिया जाएगा।