टाइपोग्राफिक हायरार्की: ऐसी हायरार्की कैसे बनाएं जो सच में पढ़ी जाए
असली स्केल रेशियो, वेट कॉन्ट्रास्ट, लीडिंग और ट्रैकिंग से शुरू से टाइपोग्राफिक हायरार्की कैसे बनाएं। साथ में वे गलतियां जो ज़्यादातर हायरार्की को लॉन्च से पहले ही मार देती हैं।
टाइपोग्राफिक हायरार्की पर ज़्यादातर लेख उसे बनाते नहीं, बस बयान करते हैं। कहते हैं हेडिंग महत्वपूर्ण लगनी चाहिए और बॉडी टेक्स्ट शांत। यह बेकार है जब काम यह हो कि "पांच साइज़, तीन वेट और ऐसी लीडिंग चुनो जो होमपेज, आर्टिकल और सेटिंग्स पैनल, तीनों में टिके।" वर्णन कोई सिस्टम नहीं है। सिस्टम वह है जो शिप होता है।
यह लेख बिल्ड है। असली रेशियो, असली नंबर, फैसलों का क्रम, और वे फेलियर पैटर्न जो ज़्यादातर हायरार्की को लॉन्च से पहले ही मार देते हैं।
टाइपोग्राफिक हायरार्की असल में है क्या
टाइपोग्राफिक हायरार्की हर टेक्स्ट एलिमेंट की संरचनात्मक रैंकिंग है, ताकि आंख कुछ भी पढ़ने से पहले जान ले कि पहले क्या पढ़ना है, फिर दूसरा और तीसरा क्या। यह विज़ुअल हायरार्की की टाइप-विशिष्ट परत है और किसी भी काम करने वाले टाइपोग्राफी सिस्टम की रीढ़।
सच्ची हायरार्की लिखित रूप में चार सवालों के जवाब देती है। कितने लेवल हैं। हर लेवल का साइज़ क्या है। हर लेवल का वेट क्या है। लेवलों के बीच और भीतर स्पेसिंग क्या है। अगर ये जवाब एक पेज के डॉक्यूमेंट में मौजूद नहीं हैं, तो सिस्टम जुगाड़ से बना है, डिज़ाइन से नहीं।
वे पांच लेवल जो लगभग हर सिस्टम को चाहिए
ज़्यादातर काम करने वाले सिस्टम पांच लेवल पर आकर टिकते हैं: H1, H2, H3, बॉडी और स्मॉल। ज़्यादा हुए तो शोर बढ़ता है। कम हुए तो पेज सपाट हो जाता है।
जाल यह है कि बटन, कैप्शन और फॉर्म लेबल को अलग लेवल मान लिया जाए। ये अलग भूमिका वाले बॉडी या स्मॉल ही हैं। बटन मीडियम वेट में बॉडी है। कैप्शन रेगुलर वेट में स्मॉल है। लेबल मीडियम वेट में स्मॉल है। साइज़ वही, काम अलग।
एक स्केल रेशियो चुनें और उस पर टिके रहें
हर लेवल का साइज़ एक ही रेशियो को एक बेस पर लगाने से आता है। पहले रेशियो चुनें, फिर हर साइज़ उसी से निकालें। बेस लगभग हमेशा 16px होता है, ब्राउज़र का डिफ़ॉल्ट और वह साइज़ जिस पर स्क्रीन पर बॉडी सबसे साफ पढ़ी जाती है। तीन रेशियो लगभग हर प्रोजेक्ट को कवर करते हैं।
मेजर थर्ड (1.25)। कसा हुआ और सघन। डेटा-भारी UI और एडमिन टूल्स के लिए सबसे अच्छा। 16px बेस से: 16, 20, 25, 31, 39, 49, 61। दिखता है पर कभी नाटकीय नहीं।
परफेक्ट फोर्थ (1.333)। वर्कहॉर्स। एडिटोरियल के लिए काफ़ी मज़बूत, प्रोडक्ट के लिए काफ़ी संयमित। 16px बेस से: 16, 21, 28, 37, 50, 67। ज़्यादातर मार्केटिंग साइट्स का डिफ़ॉल्ट।
गोल्डन रेशियो (1.618)। एडिटोरियल, अभिव्यंजक, लगभग नाटकीय। लैंडिंग पेज और मैगज़ीन लेआउट के लिए सबसे अच्छा। 16px बेस से: 16, 26, 42, 68, 110। H1 बॉडी के ऊपर मीनार की तरह खड़ा होता है, और यही मकसद है।
type-scale.com जैसे टूल किसी भी बेस और रेशियो की टेबल एक सेकंड में बना देते हैं। एक चुनें, नंबर लिखें, शिप करें। प्रोजेक्ट के बीच में बदलना ऐसा रीफैक्टर है जो हर पेज को छूता है।
वेट दूसरा अक्ष है, पहला नहीं
डिज़ाइनर साइज़ को ही इकलौता लीवर मान लेते हैं और फिर हैरान होते हैं कि पेज सपाट क्यों लगता है। वेट आधा काम उठाता है, खासकर मोबाइल पर जहां साइज़ की रेंज सीमित होती है।
काम करने वाले सिस्टम को तीन वेट चाहिए। बॉडी के लिए रेगुलर, ज़ोर और लेबल के लिए मीडियम, हेडिंग के लिए बोल्ड या सेमीबोल्ड। चौथा वेट ब्रांड का फैसला है, सिस्टम की ज़रूरत नहीं।
जो नियम ज़्यादातर सपाट पेज ठीक कर देता है: दो आसन्न लेवल पर कभी एक ही वेट न रखें। अगर H2 बोल्ड है तो H3 सेमीबोल्ड या मीडियम होना चाहिए। एक जैसे वेट की निकटता साइज़ चाहे जो हो, हायरार्की को ढहा देती है। उलटा जाल है सब कुछ बोल्ड, जो वेट को लीवर के रूप में ही खत्म कर देता है।
लीडिंग चुपचाप काम करने वाला हायरार्की लीवर है
लीडिंग लाइनों के बीच की वर्टिकल जगह है, बेसलाइन से बेसलाइन तक। CSS इसे line-height कहती है। टाइपोग्राफिक हायरार्की का सबसे कम आंका गया लीवर।
हेडलाइन पर कसी लीडिंग आत्मविश्वासी और सघन लगती है। बॉडी पर ढीली लीडिंग शांत और पठनीय लगती है। उलटा करने से हायरार्की उलट जाती है। 1.2 पर बॉडी दीवार जैसी लगती है। 1.6 पर 64px की हेडलाइन सजावट जैसी।
काम करने वाले डिफ़ॉल्ट। हेडलाइन (H1, H2): 1.1 से 1.2। सबहेड (H3): 1.2 से 1.3। बॉडी: 1.5 से 1.7। कैप्शन: 1.4 से 1.5। बड़े टेक्स्ट को कम लीडिंग चाहिए, छोटे को ज़्यादा। लंबे कंटेंट में बॉडी पर UI से ज़्यादा लीडिंग चाहिए। 1.4 पर डैशबोर्ड सघन दिखता है, और यही सही है।
ट्रैकिंग डिस्प्ले टाइप के लिए है, बॉडी के लिए नहीं
केर्निंग खास अक्षर-जोड़ों के बीच की जगह है, जो लोगो या हेडलाइन के स्केल पर एडजस्ट होती है। ट्रैकिंग एक पूरी रन के सभी अक्षरों के बीच की जगह है, जो एकसमान सेट होती है। ये एक ही लीवर नहीं हैं।
ट्रैकिंग केवल दोनों छोरों पर हायरार्की टूल है। बड़ी हेडलाइन पर कसी ट्रैकिंग (-0.02em से -0.04em) उसे जमी हुई और निर्णायक बनाती है। छोटे अपरकेस लेबल पर ढीली ट्रैकिंग (+0.05em से +0.1em) लेबल को सोचा-समझा दिखाती है। दोनों टाइप की भूमिका का संकेत देते हैं।
खतरे का क्षेत्र बॉडी है। बॉडी टेक्स्ट की ट्रैकिंग छेड़ना पठनीयता बिगाड़ता है और हायरार्की में कोई फायदा नहीं देता। बॉडी को ज़ीरो पर छोड़ें। ट्रैकिंग न समझने वाले डिज़ाइनर की सबसे तेज़ पहचान है +0.1em पर सेट की गई हीरो हेडलाइन क्योंकि वह "एडिटोरियल फील" देती है। नहीं देती। वह सजावट जैसी लगती है।
लेवलों के बीच की स्पेसिंग हायरार्की का हिस्सा है
हर लेवल के आसपास की वर्टिकल जगह उसे उतनी ही रैंक देती है जितनी साइज़ और वेट। ऊपर 80px और नीचे 24px वाला H2 नए सेक्शन की शुरुआत लगता है। ऊपर और नीचे 24px वाला वही H2 पैराग्राफ ब्रेक लगता है।
नियम: ऊपर की जगह नीचे की जगह की लगभग दोगुनी हो। एलिमेंट अपने नीचे के कंटेंट का है। शुरुआती स्पेक: H2 के ऊपर 64 से 96px, नीचे 16 से 24px। H3 के ऊपर 32 से 48px, नीचे 8 से 16px। व्हाइटस्पेस का अनुशासन टाइप जितना ही मायने रखता है। परफेक्ट स्केल के साथ लापरवाह स्पेसिंग सपाट पढ़ती है।
शुरू से हायरार्की बनाने का फैसला-क्रम
कदम छोड़ेंगे तो हायरार्की अकेले में ठीक दिखेगी पर असली प्रोडक्ट के भीतर बिखर जाएगी।
- बेस साइज़ चुनें। स्क्रीन के लिए 16px। एडिटोरियल-भारी साइट्स के लिए 18px। बॉडी के लिए कभी 16px से नीचे नहीं।
- स्केल रेशियो चुनें। सघन UI के लिए मेजर थर्ड, आम उपयोग के लिए परफेक्ट फोर्थ, एडिटोरियल के लिए गोल्डन रेशियो।
- साइज़ टेबल बनाएं। हर लेवल रेशियो से निकालें। पूरे पिक्सेल में राउंड करें। लिख लें।
- तीन वेट चुनें। रेगुलर, मीडियम, बोल्ड या सेमीबोल्ड। इससे ज़्यादा नहीं।
- हर लेवल की लीडिंग तय करें। हेडलाइन के लिए कसी, बॉडी के लिए ढीली।
- हर लेवल की स्पेसिंग तय करें। हर हेडिंग पर ऊपर-नीचे 2-से-1 का अनुपात।
- ट्रैकिंग केवल छोरों के लिए सेट करें। डिस्प्ले पर कसी, छोटे अपरकेस पर ढीली। बॉडी पर ज़ीरो।
- तीन असली स्क्रीन पर जांचें। होमपेज हीरो, लंबा आर्टिकल, सघन UI पैनल। अगर तीनों में टिके, तो शिप करें।
टूटी हुई हायरार्की शिप करने का सबसे तेज़ तरीका है रेशियो की जगह अंदाज़े से साइज़ निकालना, फिर हर पेज पर लीडिंग और स्पेसिंग पैच करना।
ज़्यादातर हायरार्की कहां फेल होती हैं
छह फेलियर पैटर्न बाकी सबसे ज़्यादा हायरार्की को मारते हैं।
सब कुछ बोल्ड है। वेट लीवर नहीं रह जाता और पेज अकेले साइज़ पर टिक जाता है। H3 और किसी भी तीसरे दर्जे की हेडिंग को मीडियम या सेमीबोल्ड पर लाएं।
सिर्फ़ दो लेवल हैं। बीच में कुछ नहीं, बस H1 और बॉडी, ऊपर शीर्षक वाला सपाट डॉक्यूमेंट लगता है। हर 150 से 300 शब्दों पर एक H2 जोड़ें।
तैरता हुआ सबहेड। ऊपर और नीचे बराबर जगह सबहेड को किसी भी सेक्शन का नहीं रहने देती। नीचे की जगह घटाएं ताकि वह आगे आने वाली बॉडी से जुड़े।
बेकाबू H1। डेस्कटॉप हीरो वाला H1 हर कंटेंट पेज पर इनलाइन इस्तेमाल करने से रिदम टूटती है। डेस्कटॉप H1 टोकन और कंटेंट-पेज H1 टोकन अलग रखें। नाम एक, दो वैल्यू।
14px पर बॉडी कॉपी। 16px से नीचे पठनीयता टूटती है और छोटे लेवल 2px की रेंज में निचुड़ जाते हैं। न्यूनतम 16px। 13 से 14px केवल कैप्शन और लेबल के लिए।
हायरार्की सिर्फ़ डेस्कटॉप पर डिज़ाइन की गई। मोबाइल हर लेवल को दबा देता है और हायरार्की धब्बे में बदल जाती है। मोबाइल पहले डिज़ाइन करें, फिर ऊपर स्केल करें।
2026 की परिस्थितियों में हायरार्की
वेरिएबल फ़ॉन्ट अब सही डिफ़ॉल्ट हैं। एक अकेली 80KB फ़ाइल एक ही अक्ष से रेगुलर, मीडियम, सेमीबोल्ड और बोल्ड देती है। दो वेरिएबल फ़ॉन्ट पूरा सिस्टम कवर करते हैं। उन्हें कैसे चुनें, यह फ़ॉन्ट पेयरिंग गाइड में है।
AI ओवरव्यू सिमैंटिक मार्कअप पढ़ते हैं, विज़ुअल नहीं। जिस पेज में H1 हो, फिर H2 जैसा दिखने वाला स्टाइल किया हुआ div, फिर H3, वह गलत पार्स होता है। विज़ुअल हायरार्की और सिमैंटिक HTML का मेल होना चाहिए। हर पेज पर एक H1, कोई लेवल छूटा नहीं। सिमैंटिक पक्ष वेब डिज़ाइन सिद्धांतों के विश्लेषण में है।
हायरार्की ऑडिट चेकलिस्ट
इसे सेव करें। लॉन्च से पहले चलाएं। कोई भी नहीं हो तो शिप करने से पहले ठीक करें।
| # | जांच | पास |
|---|---|---|
| 1 | बेस साइज़ और स्केल रेशियो दस्तावेज़ में दर्ज | पूरे सिस्टम के लिए एक रेशियो, लिखा हुआ |
| 2 | हर लेवल रेशियो से निकला है | कोई मनमाना साइज़ नहीं |
| 3 | हर कंटेंट पेज पर कम से कम तीन टेक्स्ट लेवल | कम से कम H1, H2, बॉडी |
| 4 | कोई दो आसन्न लेवल एक वेट साझा नहीं करते | हर कदम पर वेट कॉन्ट्रास्ट |
| 5 | बॉडी टेक्स्ट 16px या बड़ा | स्क्रीन बॉडी के लिए 16px की न्यूनतम सीमा |
| 6 | हेडलाइन की लीडिंग कसी, बॉडी की ढीली | हेडलाइन 1.1 से 1.2, बॉडी 1.5 से 1.7 |
| 7 | हर हेडिंग के ऊपर की जगह नीचे की लगभग 2 गुना | H2 और H3 पर 2-से-1 अनुपात |
| 8 | बॉडी पर ट्रैकिंग ज़ीरो, केवल छोरों पर एडजस्ट | बॉडी को छुआ नहीं गया |
| 9 | हायरार्की 375px व्यूपोर्ट पर टिकती है | मोबाइल पर जांची गई |
| 10 | सिमैंटिक HTML विज़ुअल हायरार्की से मेल खाता है | एक H1, कोई लेवल छूटा नहीं |
दस में से दस हर डिवाइस पर अपने आप पढ़ा जाता है। दस में से सात डिज़ाइन किया हुआ लगता है। सात से नीचे टाइपफेस चाहे जो हो, सपाट लगता है।
FAQ
विज़ुअल हायरार्की और टाइपोग्राफिक हायरार्की में क्या फ़र्क है?
विज़ुअल हायरार्की व्यापक सिस्टम है जो साइज़, वेट, रंग, स्थिति, जगह, अलाइनमेंट और इमेजरी से हर एलिमेंट को रैंक करता है। टाइपोग्राफिक हायरार्की टाइप-विशिष्ट परत है जो साइज़, वेट, लीडिंग, ट्रैकिंग और स्पेसिंग से टेक्स्ट को रैंक करती है। टाइपोग्राफिक हायरार्की विज़ुअल हायरार्की का एक इनपुट है।
टाइप स्केल के लिए सबसे अच्छा रेशियो कौन सा है?
परफेक्ट फोर्थ (1.333) सबसे सुरक्षित डिफ़ॉल्ट है। यह नाटकीय हुए बिना साफ कॉन्ट्रास्ट देता है। सघन UI और एडमिन टूल्स के लिए मेजर थर्ड (1.25) लें। एडिटोरियल और लैंडिंग पेज, जहां हीरो को हावी होना है, वहां गोल्डन रेशियो (1.618) लें।
सपाट दिखने वाली हायरार्की को कैसे ठीक करूं?
क्रम से तीन कदम। पहले साइज़ कॉन्ट्रास्ट बढ़ाएं। H1 कम से कम H2 का 2 गुना, H2 कम से कम बॉडी का 1.5 गुना। दूसरे, वेट कॉन्ट्रास्ट जोड़ें। कोई दो आसन्न लेवल एक वेट साझा न करें। तीसरे, हर हेडिंग पर 2-से-1 ऊपर-नीचे अनुपात से स्पेसिंग रिदम कसें। अगर पेज फिर भी सपाट पढ़ता है, तो लेआउट ज़रूरत से ज़्यादा काम कर रहा है और टाइपोग्राफी पर और काम करने से पहले स्कोप कटौती चाहिए।
हायरार्की बनाएं, फिर उस पर भरोसा करें
काम करने वाली हायरार्की उस पेज तक पहुंचने का सबसे सस्ता रास्ता है जो अपने आप पढ़ा जाता है। पाठक लेवल, रेशियो या लीडिंग वैल्यू नहीं देखता। वह ऐसा पेज देखता है जिसका मतलब समझ आता है। गणित स्पष्टता में गायब हो जाता है।
जाल यह है कि हायरार्की को आखिरी मील की पॉलिश समझ लिया जाए। यह रीढ़ है। इसे पहले बनाएं, असली स्क्रीन पर जांचें, टोकन के रूप में दर्ज करें, और बाकी हर फैसला इसी के सामने रचने दें। अगर आप ऐसी टीम चाहते हैं जो टाइप सिस्टम, हायरार्की और प्रोडक्ट UI को तीन प्रोजेक्ट की जगह एक प्रोजेक्ट की तरह बनाए, तो Brainy को हायर करें। हम रेशियो चुनते हैं, टोकन लिखते हैं और असली प्रोडक्ट पर सिस्टम शिप करते हैं।
Want a type system with a hierarchy that survives a real product instead of a Figma file? Brainy ships brand and product typography end to end.
Get Started
