इस पृष्ठ का अनुवाद AI की सहायता से किया गया है। अंग्रेज़ी मूल ही प्रामाणिक है।
टाइपोग्राफ़िक पदानुक्रम (hierarchy) पाठक को बताता है कि पेज किस बारे में है, वह कैसे संगठित है, और उसमें कहाँ से प्रवेश करें — एक भी वाक्य पढ़े जाने से पहले। 2005 संस्करण ने पदानुक्रम-स्तरों का आकार 1.2 और 1.5 के बीच के किसी सुसंगत अनुपात से तय करने की अनुशंसा की थी, और चेताया था कि खराब चुना गया आधार-आकार स्केलिंग में ढह जाएगा। दोनों बातें बची हैं, लेकिन हर एक में एक दूसरा आयाम जुड़ गया है जिसे मूल संस्करण संबोधित नहीं कर सकता था: स्केल अब स्थिर नहीं बल्कि फ़्लूइड हैं, और वेब पर पदानुक्रम अब केवल दृश्य नहीं है। उसे संरचनात्मक भी होना होगा, क्योंकि पाठकों का एक बड़ा हिस्सा उसे कभी देखता ही नहीं।
2005 के बाद क्या बदला
1.2–1.5 अनुपात की अनुशंसा परिपक्व होकर मॉड्यूलर टाइप-स्केल (modular type scale) की अब-मानक प्रथा बन गई: पेज का हर आकार एक आधार-आकार को एक ही अनुपात से बार-बार गुणा करके व्युत्पन्न। आम अनुपातों को संगीत के अंतरालों से नाम मिल गए हैं — 1.2 (माइनर थर्ड), 1.25 (मेजर थर्ड), 1.333 (परफ़ेक्ट फ़ोर्थ), 1.5 (परफ़ेक्ट फ़िफ़्थ) — और मूल सीमा आज भी बिल्कुल सही है, एक परिष्कार के साथ: अनुपात माध्यम के अनुरूप होना चाहिए। सघन प्रोडक्ट-इंटरफ़ेस और दीर्घ-पाठ कोमल अनुपातों (1.125–1.25) के साथ अच्छा करते हैं, जो विशाल शीर्षकों के बिना पर्याप्त भिन्न आकार देते हैं; संपादकीय और विपणन पेज 1.333 या 1.5 उठा सकते हैं। जो अनुपात डेटा-सघन एप्लिकेशन में 60-पिक्सेल का h2 पैदा करता है, वह उस संदर्भ के लिए गलत अनुपात है।
बड़ा तकनीकी परिवर्तन यह है कि स्केल को अब संख्याओं का एक स्थिर समुच्चय होने की ज़रूरत नहीं। CSS clamp() स्केल के हर चरण को फ़्लूइड बनने देता है: न्यूनतम, व्यूपोर्ट-सापेक्ष पसंदीदा मान और अधिकतम के साथ परिभाषित आकार, ताकि शीर्षक फ़ोन और डेस्कटॉप के बीच ब्रेकपॉइंट पर उछलने के बजाय सहजता से स्केल हों। सुनिर्मित फ़्लूइड स्केल प्रभावी रूप से छोटी स्क्रीनों पर छोटा अनुपात और बड़ी स्क्रीनों पर बड़ा अनुपात उपयोग करता है — जो ठीक वैसा ही है जैसे प्रिंट-डिज़ाइनर हमेशा डिस्प्ले-टाइप को पृष्ठ के अनुसार समायोजित करते रहे। एक सुगम्यता-सावधानी अनिवार्य है: व्यूपोर्ट-सापेक्ष बीच वाले पद में rem-आधारित घटक मिला होना चाहिए (उदाहरण के लिए rem और vw को जोड़ती गणना), शुद्ध व्यूपोर्ट-इकाइयाँ कभी नहीं। केवल vw में नापा गया टेक्स्ट उपयोगकर्ता की font-size वरीयता की उपेक्षा करता है और ब्राउज़र के टेक्स्ट-रीसाइज़ पर प्रतिक्रिया नहीं देता, जो WCAG की रीसाइज़ और रीफ़्लो अपेक्षाओं को कमज़ोर करता है। हर clamp() अभिव्यक्ति को उस उपयोगकर्ता का भी सम्मान करना चाहिए जिसने अपना आधार-आकार 200% कर रखा है।
स्केलिंग-व्यवहार पर मूल की चेतावनियाँ — कटे फ़्रेम, गायब होते बटन-लेबल, 150% पर टूटा पठन-क्रम — अब संहिताबद्ध हो चुकी हैं। WCAG अपेक्षा करता है कि टेक्स्ट बिना हानि के 200% तक रीसाइज़ हो (1.4.4 Resize Text) और सामग्री 320 CSS पिक्सेल पर रीफ़्लो हो (1.4.10)। "स्केलिंग के लिए डिज़ाइन करें" वाली पुरानी सलाह अब बस अनुरूपता है।
पदानुक्रम संरचनात्मक होना चाहिए, केवल दृश्य नहीं
इस अध्याय का सबसे महत्वपूर्ण जोड़ अदृश्य है। स्क्रीन-रीडर उपयोगकर्ता यह अनुभव नहीं करता कि कोई पंक्ति 32 पिक्सेल और बोल्ड है; वह यह अनुभव करता है कि वह किसी विशेष स्तर का शीर्षक-तत्व है — या नहीं है। स्क्रीन-रीडर उपयोगकर्ता नियमित रूप से शीर्षकों की सूची निकालकर उनके बीच कूदते हुए नेविगेट करते हैं; जिस पेज के "शीर्षक" केवल बड़े किए गए बोल्ड अनुच्छेद हैं, वह उन्हें कोई संरचना नहीं देता। WCAG का सफलता मानदंड 1.3.1 Info and Relationships (स्तर A) यही अपेक्षा करता है: दृश्य प्रस्तुति से संप्रेषित जानकारी — पदानुक्रम सहित — प्रोग्रामेटिक रूप से भी निर्धारण-योग्य होनी चाहिए।
व्यावहारिक अनुशासन के दो हिस्से हैं। पहला, हर दृश्य शीर्षक एक वास्तविक शीर्षक-तत्व (h1 से h6) होना चाहिए, और शीर्षक-स्तरों को दस्तावेज़ की रूपरेखा दर्शानी चाहिए: पेज के विषय के लिए एक h1, प्रमुख अनुभागों के लिए h2, उनके उप-अनुभागों के लिए h3 — नीचे उतरते समय स्तर लाँघे बिना। दूसरा — और यहीं डिज़ाइनर सबसे अधिक चूकते हैं — सेमांटिक स्तर और दृश्य आकार को अलग-अलग करना होगा। सही शीर्षक-स्तर दस्तावेज़-संरचना तय करती है; सही आकार डिज़ाइन तय करता है। जब वे टकराएँ (कोई h2 जिसे विनम्र दिखना चाहिए, कोई h4 जो प्रमुखता का हक़दार है), तो संरचनात्मक स्तर रखें और उसे क्लास से पुनः स्टाइल करें। टैग को उसके डिफ़ॉल्ट आकार के लिए चुनना वेब की अधिकांश टूटी रूपरेखाओं का मूल कारण है।
आकार से परे पदानुक्रम
2005 का अध्याय पदानुक्रम को आकार की समस्या मानता था। परिपक्व व्यवहार यह काम चार चरों में बाँटता है — आकार, भार, स्थान और रंग — और आकार अक्सर इनमें सबसे कम कुशल है। फ़ॉन्ट-भार में एक क़दम ऊपर (मान लीजिए 400 से 600) या शीर्षक के ऊपर श्वेत स्थान की एक पट्टी नए अनुभाग का संकेत आकार-छलाँग जितनी ही स्पष्टता से दे सकती है — ऊर्ध्वाधर स्थान खाए बिना और छोटी स्क्रीनों में भीड़ लगाए बिना। यह मितव्ययिता के साथ-साथ सुगम्यता के लिए भी मायने रखता है: जो पदानुक्रम पूरी तरह आकार पर झुके होते हैं, वे संकरे व्यूपोर्ट पर ढहने लगते हैं, जहाँ डिस्प्ले-आकारों को सिकुड़ना पड़ता है, जबकि भार- और स्थान-आधारित विभेदन हर व्यूपोर्ट में जीवित रहता है। वेरिएबल फ़ॉन्ट भार को एक सतत अक्ष बनाते हैं, जिससे मध्यवर्ती भार ठीक उसी कंट्रास्ट पर ट्यून किए जा सकते हैं जो किसी स्तर को चाहिए। रंग और गौण संकेत पदानुक्रम को कभी अकेले न ढोएँ — उन्हें संरचनात्मक मार्कअप और कम से कम एक अन्य दृश्य संकेत के ऊपर सवार होना चाहिए, और शीर्षक-पाठ को कंट्रास्ट-अपेक्षाएँ फिर भी पूरी करनी होंगी।
दो छोटे आधुनिक परिष्कार। बहु-पंक्ति शीर्षकों को text-wrap: balance से लाभ होता है, जो पंक्ति-लंबाइयाँ बराबर करता है ताकि कोई शीर्षक अपनी अंतिम पंक्ति पर एक अकेला शब्द न छोड़े — एक छोटी CSS घोषणा जो वर्षों की हस्तचालित विच्छेद-नोकझोंक की जगह लेती है। और शीर्षक की line-height स्केल के हर स्तर पर कसकर (पिछले अध्याय के अनुसार लगभग 1.1–1.25) सेट होनी चाहिए, बॉडी टेक्स्ट से विरासत में नहीं।
आधार-आकार, जैसा मूल ने ज़ोर देकर कहा था, सर्वोपरि बना हुआ है: पूरा स्केल उसी से गुणित होता है। आधुनिक न्यूनतम है बॉडी टेक्स्ट के लिए ब्राउज़र का डिफ़ॉल्ट 1rem (डिफ़ॉल्ट रूप से 16px) — rem में सेट, पिक्सेल में कभी नहीं, ताकि उपयोगकर्ता-वरीयताएँ आगे पहुँचें — जबकि दीर्घ-पाठ को अक्सर 1.125–1.25rem बेहतर सेवा देता है।
CSS में
:root {
/* a fluid modular scale, ratio ≈ 1.25, anchored in rem */
--step-0: 1rem;
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--step-2: clamp(1.55rem, 1.35rem + 1vw, 2.2rem);
--step-3: clamp(1.95rem, 1.55rem + 2vw, 3.2rem);
}
h1 { font-size: var(--step-3); text-wrap: balance; }
h2 { font-size: var(--step-2); text-wrap: balance; }
h3 { font-size: var(--step-1); }अनुशंसाएँ
- आकारों को लगभग 1.2–1.5 के अनुपात वाले मॉड्यूलर स्केल से बनाएँ, जो सामग्री के घनत्व के अनुसार चुना गया हो।
- clamp() से स्केल को फ़्लूइड बनाएँ, पसंदीदा मान में हमेशा rem-घटक मिलाते हुए ताकि उपयोगकर्ता की font-size सेटिंग्स का सम्मान हो।
- WCAG 1.3.1 के अनुसार तार्किक रूपरेखा में वास्तविक शीर्षक-तत्व उपयोग करें — एक h1, कोई लाँघा हुआ स्तर नहीं; टैग को उसके आकार के लिए कभी न चुनें।
- सेमांटिक्स को रूप-रंग से अलग रखें: जब संरचना और डिज़ाइन असहमत हों, तो शीर्षक-स्तरों को क्लासों से स्टाइल करें।
- पदानुक्रम को आकार के साथ-साथ भार और स्थान से भी व्यक्त करें; केवल आकार या रंग पर निर्भर पदानुक्रमों से बचें।
- बॉडी टेक्स्ट सापेक्ष इकाइयों में न्यूनतम 1rem पर सेट करें, और सत्यापित करें कि पदानुक्रम 200% टेक्स्ट-रीसाइज़ और 320px रीफ़्लो में जीवित रहता है।
- शीर्षकों पर text-wrap: balance और कसी हुई line-height लागू करें।