आपकी UI टाइपोग्राफी जूनियर क्यों लगती है: सटीक मानों के साथ 6 सुधार

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

1. टाइप स्केल इस्तेमाल करें

Heading31px

Heading27px

Heading22px

Heading17px

Heading15px

Heading13px

✕ जूनियर: साइज़ अंदाज़े से चुने गए

Heading39px

Heading31px

Heading25px

Heading20px

Heading16px

✓ सीनियर: एक अनुपात, 16 से 1.25

बाईं ओर हर साइज़ अलग से चुना गया: 31, 27, 22, 17, 15, 13। इनके बीच के कदम असमान हैं, इसलिए कुछ स्तर लगभग एक जैसे दिखते हैं और कुछ में अचानक उछाल आता है। दाईं ओर हर साइज़ अपने पिछले साइज़ का 1.25 गुना है: 16, 20, 25, 31, 39। कदम बराबर हैं, इसलिए हर स्तर अगले से साफ़ अलग दिखता है।

1.2 से 1.333 के बीच का अनुपात ज़्यादातर इंटरफ़ेस के लिए ठीक है। एक चुनें, लिख लें, और सूची से बाहर का साइज़ कभी न टाइप करें। CSS में यह वेरिएबल का छोटा सा सेट है, और Figma में टेक्स्ट स्टाइल का सेट। अनुपात चुनने के बारे में हमारी गाइड मॉड्यूलर टाइप स्केल में है।

:root { --text-sm: 0.8rem; /* 12.8px */ --text-base: 1rem; /* 16px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.563rem; /* 25px */ --text-2xl: 1.953rem; /* 31px */ --text-3xl: 2.441rem; /* 39px */ }

2. एक फ़ैमिली, दो वज़न

लिस्बन में एक वीकेंड

एक छोटी सी यात्रा डायरीतीन दिन, दो मोहल्ले और ट्राम की एक बहुत लंबी सवारी।

और पढ़ें

✕ जूनियर: एक कार्ड पर चार फ़ॉन्ट

लिस्बन में एक वीकेंड

एक छोटी सी यात्रा डायरीतीन दिन, दो मोहल्ले और ट्राम की एक बहुत लंबी सवारी।

और पढ़ें

✓ सीनियर: एक फ़ैमिली, रेगुलर और बोल्ड

हर नया फ़ॉन्ट अपना अलग मिज़ाज लाता है, और एक कार्ड पर चार मिज़ाज आपस में झगड़ते हैं। पाठक समझ नहीं पाता कि ब्रांड कौन सा है। दो वज़न में एक फ़ैमिली, पढ़ने के लिए रेगुलर और हेडिंग के लिए बोल्ड, स्क्रीन के हर स्तर के लिए काफ़ी है।

अगर दूसरी फ़ैमिली चाहिए, तो उसे एक ही काम दें, जैसे सिर्फ़ हेडलाइन, और हर जगह उसी तक सीमित रखें। किसी एक एलिमेंट को "खास" बनाने के लिए कभी फ़ॉन्ट न जोड़ें।

3. ऐसा ग्रे जो पढ़ा जा सके

आपका ऑर्डर रास्ते में है

14:20 से 14:40 के बीच पहुँचेगा।कूरियर पास आते ही हम आपको मैसेज करेंगे।

✕ सफ़ेद पर #B0B0B0: पढ़ना मुश्किल

आपका ऑर्डर रास्ते में है

14:20 से 14:40 के बीच पहुँचेगा।कूरियर पास आते ही हम आपको मैसेज करेंगे।

✓ सफ़ेद पर #6B6B6B: पढ़ना आसान

हल्का ग्रे चमकदार मॉनिटर पर डिज़ाइन फ़ाइल में निखरा हुआ लगता है। बाहर धूप में फ़ोन पर वह गायब हो जाता है। बाईं ओर पहुँचने का समय कार्ड की सबसे काम की लाइन है और सबसे मुश्किल से पढ़ी जाने वाली भी।

#6B6B6B काले टाइटल के बगल में अब भी शांत लगता है, और पढ़ने लायक रहता है। नियम के तौर पर, सफ़ेद पर सेकेंडरी टेक्स्ट लगभग #767676 से हल्का न हो, जो बॉडी टेक्स्ट के लिए एक्सेसिबिलिटी न्यूनतम पास करने वाला सबसे हल्का ग्रे है।

4. कैप्स सिर्फ़ लेबल के लिए

We've updated our terms. Please review the changes before your next order.

✕ जूनियर: पूरा वाक्य कैपिटल में

अपडेट

हमने अपनी शर्तें अपडेट की हैं

कृपया अपने अगले ऑर्डर से पहले बदलाव देख लें।

✓ सीनियर: कैपिटल लेबल, सामान्य केस में टेक्स्ट

कैपिटल शब्दों के आकार मिटा देते हैं। लोअरकेस में ऊँचे और छोटे अक्षर हर शब्द को एक रूपरेखा देते हैं जिसे आपकी आँख पहचानती है; कैपिटल में हर शब्द एक आयत बन जाता है, इसलिए वाक्य को अक्षर-अक्षर पढ़ना पड़ता है। इसीलिए कैप्स में पूरा पैराग्राफ़ चिल्लाने जैसा लगता है और पढ़ने में ज़्यादा समय लेता है।

कैप्स वहीं चलते हैं जिसके लिए बने हैं: एक से तीन शब्दों के छोटे लेबल, जैसे सेक्शन टैग, स्टेटस या बटन। इससे लंबा सब कुछ सामान्य केस में जाए।

5. कसी हुई हेडिंग, खुली बॉडी

स्पेसिंग टाइप का हिस्सा है

कसी हुई लीडिंग पैराग्राफ़ को दीवार बना देती है। बॉडी टेक्स्ट को साँस लेने की जगह दें और हेडिंग को कसकर रखें।

✕ जूनियर: ढीली हेडिंग, भिंची बॉडी

स्पेसिंग टाइप का हिस्सा है

कसी हुई लीडिंग पैराग्राफ़ को दीवार बना देती है। बॉडी टेक्स्ट को साँस लेने की जगह दें और हेडिंग को कसकर रखें।

✓ सीनियर: हेडिंग 1.1 पर, बॉडी 1.5 पर

अलग-अलग साइज़ पर लाइन हाइट के काम उलटे होते हैं। बड़ी हेडिंग के अक्षरों के अंदर पहले से काफ़ी जगह होती है, इसलिए 1.1 पर हेडिंग एक आकृति की तरह जुड़ी रहती है। छोटे बॉडी टेक्स्ट को लाइनों के बीच जगह चाहिए ताकि आँख अगली लाइन की शुरुआत ढूँढ सके, इसलिए उसे 1.5 मिलता है।

जूनियर वर्शन इसका उलटा करता है, अक्सर इसलिए कि सब कुछ पर एक ही लाइन हाइट लगा दी गई। दो मान तय करें और हर जगह वही इस्तेमाल करें: हेडिंग के लिए लगभग 1.1 से 1.2, बॉडी टेक्स्ट के लिए 1.4 से 1.6।

6. साइज़, वज़न, रंग, स्पेस

ऑर्डर #2841

डिलीवर हुआआज, 14:203 आइटमकुल $42.80

✕ जूनियर: सब कुछ बोल्ड, एक ही साइज़

● डिलीवर हुआ

ऑर्डर #2841

आज, 14:20 · 3 आइटमकुल $42.80

✓ सीनियर: चार औज़ार, एक साफ़ क्रम

जब सब कुछ बोल्ड हो, तो कुछ भी बोल्ड नहीं रहता। जूनियर कार्ड में पाँच लाइनें एक ही साइज़ और वज़न की हैं, इसलिए पाठक को काम की लाइन ढूँढने के लिए सब पढ़नी पड़ती हैं।

सीनियर कार्ड चार औज़ार इस्तेमाल करता है, हर एक थोड़ा-थोड़ा: ऑर्डर नंबर बड़ा है, स्टेटस को रंग और डॉट मिला है, विवरण ग्रे में उतर गए हैं, और स्पेस कुल राशि को अलग करती है। कोई एक औज़ार ज़ोर से नहीं दबाया गया, इसीलिए यह शांत दिखता है। इस पर और टाइपोग्राफिक हाइरार्की में।

छहों सुधार एक टेबल में

FAQ

UI के लिए अच्छा टाइप स्केल क्या है?

16 px बेस से 1.2 से 1.333 के बीच का अनुपात। 1.25 का अनुपात 16, 20, 25, 31 और 39 px देता है, जो ज़्यादातर स्क्रीन के लिए पर्याप्त स्तर हैं।

UI में कितने फ़ॉन्ट इस्तेमाल करने चाहिए?

एक फ़ैमिली काफ़ी है, दो वज़न में। दूसरी फ़ैमिली तभी जोड़ें जब उसका एक तय काम हो, जैसे हेडलाइन, और उसे हर जगह एक ही तरह इस्तेमाल करें।

बॉडी टेक्स्ट की लाइन हाइट कितनी होनी चाहिए?

बॉडी टेक्स्ट के लिए लगभग 1.5 और बड़ी हेडिंग के लिए लगभग 1.1 से 1.2।

सफ़ेद पर कौन सा ग्रे पढ़ने लायक है?

#767676 सफ़ेद पर बॉडी टेक्स्ट के लिए WCAG न्यूनतम पास करने वाला सबसे हल्का ग्रे है। #6B6B6B थोड़ा और मार्जिन देता है और फिर भी सेकेंडरी लगता है।

क्या UI टेक्स्ट पूरा कैप्स में होना चाहिए?

सिर्फ़ एक से तीन शब्दों के छोटे लेबल के लिए। कैपिटल में लंबा टेक्स्ट पढ़ना धीमा होता है क्योंकि शब्द अपना आकार खो देते हैं।

स्रोत

• टाइप स्केल: 16 × 1.25ⁿ = 20, 25, 31.25 और 39.06, पूर्णांक में दिखाए गए।
• सफ़ेद पर कंट्रास्ट, WCAG 2 फ़ॉर्मूले से निकाला गया: #B0B0B0 2.2 से 1, #767676 4.5 से 1, #6B6B6B 5.3 से 1। WCAG बॉडी टेक्स्ट के लिए 4.5 से 1 माँगता है (1.4.3 Contrast (Minimum))।
• पहली बार UX Brainy पर कैरोसेल के रूप में प्रकाशित।