इस पृष्ठ का अनुवाद AI की सहायता से किया गया है। अंग्रेज़ी मूल ही प्रामाणिक है।
2005 के संस्करण ने आकार के प्रश्न का उत्तर एक संख्या से दिया था: सुगम्य बॉडी टेक्स्ट के लिए न्यूनतम 14 पॉइंट, यानी Verdana में लगभग 19 पिक्सेल। अपने समय के लिए यह एक तर्कसंगत संख्या थी — पारंपरिक 9 और 10 पॉइंट के प्रिंट आकार स्थूल स्क्रीनों के लिए स्पष्टतः अनुपयुक्त थे, और Verdana की विशाल एक्स-हाइट (x-height) 19 पिक्सेल को आरामदायक पठन बनाती थी। लेकिन पिछले दो दशकों का गहरा सबक़ यह है कि कोई एक संख्या उत्तर नहीं हो सकती, क्योंकि आकार पर अंतिम अधिकार अब डिज़ाइनर का नहीं, पाठक का है। डिज़ाइनर का काम सही आकार चुनने से बदलकर ऐसा तंत्र बनाना हो गया है जो पाठक के चुनावों को झेल सके।
2005 के बाद क्या बदला
तीन घटनाक्रमों ने इस प्रश्न की संरचना बदल दी।
पहला, ब्राउज़र डिफ़ॉल्ट ने न्यूनतम सीमा तय कर दी। हर प्रमुख ब्राउज़र 16 CSS पिक्सेल का डिफ़ॉल्ट टेक्स्ट आकार लेकर आता है, और उपयोगकर्ता सेटिंग्स में इसे बढ़ा सकते हैं। सोलह पिक्सेल प्लेटफ़ॉर्म और पाठक के बीच का प्रभावी अनुबंध बन गया: डिफ़ॉल्ट या उससे बड़ा बॉडी टेक्स्ट उस अनुबंध का सम्मान करता है; उससे छोटा बॉडी टेक्स्ट उस वरीयता को रौंदता है जिसे उपयोगकर्ता ने संभवतः जान-बूझकर सेट किया हो। पुराना 19-पिक्सेल Verdana आँकड़ा Verdana की असाधारण एक्स-हाइट और उस युग की रेंडरिंग की भरपाई कर रहा था; किसी सामान्य आधुनिक टेक्स्ट फ़ेस में 16px तुलनीय रूप से पढ़ा जाता है। छोटी एक्स-हाइट वाले फ़ेसों के लिए 17 या 18px ईमानदार समतुल्य है — 2005 की यह अंतर्दृष्टि कि नाममात्र आकार से अधिक एक्स-हाइट मायने रखती है, पूरी तरह क़ायम है, और CSS अब इसे font-size-adjust प्रॉपर्टी में संहिताबद्ध भी करती है, जो फ़ॉलबैक फ़ॉन्ट्स को एक सुसंगत एक्स-हाइट अनुपात पर स्केल करती है ताकि फ़ॉन्ट बदलने पर टेक्स्ट चुपचाप सिकुड़ न सके।
दूसरा, सुगम्यता मानकों ने आकार को नहीं, पुनःआकारण-क्षमता को परीक्षण-योग्य अपेक्षा बना दिया। WCAG सफलता मानदंड 1.4.4 (Resize Text) अपेक्षा करता है कि टेक्स्ट को सामग्री या कार्यक्षमता खोए बिना 200 प्रतिशत तक स्केल किया जा सके; 1.4.10 (Reflow) अपेक्षा करता है कि उच्च ज़ूम पर सामग्री द्वि-आयामी स्क्रॉलिंग के बिना रीफ़्लो हो। उदार स्थिर आकार पर सेट पृष्ठ भी दोनों में विफल हो सकता है; लचीले लेआउट के साथ 16px पर सेट पृष्ठ पास होता है। मानक का गुरुत्व-केंद्र आरंभ-बिंदु नहीं, ज़ूम-पथ है।
तीसरा, उच्च-घनत्व डिस्प्ले ने पुराने ऊपरी दबाव हटा दिए। स्केल करने पर टेक्स्ट अब बिगड़ता नहीं, इसलिए स्केलिंग में लेआउट-स्थिरता को लेकर 2005 की चिंताओं के अब टाइपोग्राफ़िक नहीं, इंजीनियरिंग उत्तर हैं।
उपयोगकर्ता का सम्मान: rem, px नहीं
अपनाने योग्य सबसे परिणामकारी अभ्यास है टाइप को rem इकाइयों में सेट करना। rem मूल (root) फ़ॉन्ट आकार के सापेक्ष होता है, जो ब्राउज़र डिफ़ॉल्ट से विरासत में मिलता है — इसलिए जो उपयोगकर्ता अपना डिफ़ॉल्ट 16 से 20px कर लेता है, उसे हर rem-आकारित तत्व आनुपातिक रूप से बड़ा दिखता है। px में स्थिर किया गया टाइप उस वरीयता की पूरी तरह अनदेखी करता है।
आम बचाव — "px वाले उपयोगकर्ता फिर भी ज़ूम कर सकते हैं" — केवल आंशिक रूप से सच है, और यह भेद महत्वपूर्ण है। पूर्ण-पृष्ठ ज़ूम px टेक्स्ट को स्केल करता है, हाँ। लेकिन ब्राउज़र की टेक्स्ट-आकार सेटिंग्स, जिन पर बहुत से अल्प दृष्टि (low vision) वाले उपयोगकर्ता ठीक इसीलिए निर्भर करते हैं कि वे बिना प्रति-पृष्ठ छेड़छाड़ के हर साइट पर बनी रहती हैं, px-आकारित टेक्स्ट पर कोई असर नहीं डालतीं। टाइप को पिक्सेल में स्थिर करना प्लेटफ़ॉर्म की सबसे टिकाऊ सुगम्यता-प्रणाली को चुपचाप निष्क्रिय कर देता है। यही तर्क मूल तत्व के font-size को px मान पर सेट करने के विरुद्ध भी है (पुरानी "html { font-size: 62.5% }" तरकीब स्वीकार्य है क्योंकि वह आनुपातिक है; "html { font-size: 10px }" नहीं)।
line-height भी इसी अनुशासन में आती है: उसे इकाई-रहित लिखें (बॉडी टेक्स्ट के लिए 1.5 एक ठोस डिफ़ॉल्ट है) ताकि टेक्स्ट जिस भी आकार पर पहुँचे, वह उसके साथ स्केल हो — डिज़ाइनर के व्यूपोर्ट के लिए गणना किए गए किसी px मान पर जमी न रहे।
न्यूनतम सीमा खोए बिना फ़्लुइड साइज़िंग
रिस्पॉन्सिव डिज़ाइन ने एक नया उपकरण और एक नई विफलता-विधि जोड़ी। clamp() फलन किसी आकार को व्यूपोर्ट के साथ साँस लेने देता है — clamp(1rem, 0.9rem + 0.5vw, 1.25rem) एक न्यूनतम, एक तरल मध्य और एक अधिकतम तय करता है — जो शीर्षकों के लिए, और बड़ी स्क्रीनों पर बढ़ने वाले बॉडी टेक्स्ट के लिए, वाक़ई उपयोगी है।
विफलता-विधि है केवल-व्यूपोर्ट साइज़िंग। विशुद्ध vw इकाइयों में आकारित टेक्स्ट ज़ूम पर प्रतिक्रिया नहीं देता: उपयोगकर्ता के ज़ूम करते ही व्यूपोर्ट की CSS चौड़ाई आनुपातिक रूप से सिकुड़ती है और टेक्स्ट लगभग उसी प्रतीत होने वाले आकार पर पुनर्गणित हो जाता है, जिससे WCAG 1.4.4 विफल हो जाता है। बचाव अनुशंसित पैटर्न में ही निहित है: फ़्लुइड अभिव्यक्ति में हमेशा एक rem पद और clamp() में rem-आधारित न्यूनतम रखें, ताकि उपयोगकर्ता-वरीयता और ज़ूम दोनों की पकड़ बनी रहे। फिर वास्तव में 200 प्रतिशत ज़ूम करके सत्यापित करें कि टेक्स्ट दुगना बड़ा हुआ।
एक आधुनिक आकार-वास्तुकला
टुकड़ों को जोड़ें तो सुगम्य पठन के लिए एक तर्कसंगत टाइप-स्केल ऐसा दिखता है: बॉडी टेक्स्ट न्यूनतम 1rem (डिफ़ॉल्ट सेटिंग्स पर 16px, छोटी एक्स-हाइट वाले फ़ेसों के लिए अधिक), द्वितीयक टेक्स्ट लगभग 0.875rem से नीचे कभी नहीं और सतत पठन के लिए कभी नहीं, शीर्षक rem में व्यक्त एक संयत अनुपात-स्केल पर वैकल्पिक clamp() तरलता के साथ, और हर स्थिर px font-size को दोष माना जाए। छोटे टेक्स्ट पर 2005 का मार्गदर्शन अद्यतन रूप में क़ायम है — वास्तव में छोटा टाइप केवल छोटी सहायक पंक्तियों के लिए सहनीय है, सतत अनुच्छेदों के लिए कभी नहीं, और WCAG के कंट्रास्ट नियम उसके लिए कड़े हो जाते हैं: 18pt रेगुलर (या 14pt बोल्ड) से छोटे टेक्स्ट को बड़े टेक्स्ट के लिए स्वीकृत 3:1 के बजाय 4.5:1 कंट्रास्ट अनुपात चाहिए — इस बात की स्पष्ट स्वीकारोक्ति कि आकार और कंट्रास्ट एक-दूसरे के बदले तौले जाते हैं।
अल्प दृष्टि वाले पाठकों के लिए इनमें से कुछ भी आवर्धन (magnification) का विकल्प नहीं है; यह आवर्धन को कारगर बनाता है। सफलता की कसौटी यह नहीं कि पृष्ठ 100 प्रतिशत पर कैसा दिखता है, बल्कि यह कि क्या वह 200 और 400 प्रतिशत ज़ूम पर भी एक ही पठनीय स्तंभ बना रहता है।
CSS में
html { font-size: 100%; } /* the reader's choice is the unit */
body { font-size: 1rem; } /* 16px floor for continuous text */
h1 {
/* the rem term keeps user settings and zoom in charge */
font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
}
small { font-size: 0.875rem; } /* captions only, never body text */सिफ़ारिशें
- बॉडी टेक्स्ट के लिए 16px (1rem) को न्यूनतम सीमा मानें; छोटी एक्स-हाइट वाले फ़ेसों के लिए इसे बढ़ाएँ।
- समूचा टाइप rem में आकारित करें; line-height इकाई-रहित लिखें (बॉडी टेक्स्ट के लिए लगभग 1.5)।
- बॉडी टेक्स्ट को कभी px में स्थिर न करें, और मूल font-size को कभी px मान पर सेट न करें।
- फ़्लुइड टाइप के लिए clamp() का उपयोग करें, हमेशा एक rem घटक के साथ, ताकि ज़ूम और उपयोगकर्ता-वरीयताएँ लागू रहें।
- font-size-adjust का उपयोग करें ताकि फ़ॉलबैक फ़ॉन्ट अभीष्ट एक्स-हाइट बनाए रखें।
- नियमित QA के रूप में 200 प्रतिशत ज़ूम (WCAG 1.4.4) और 400 प्रतिशत रीफ़्लो (WCAG 1.4.10) पर परीक्षण करें।
- बॉडी से छोटे आकार छोटे सहायक टेक्स्ट के लिए आरक्षित रखें, और छोटे टेक्स्ट को उसका अपेक्षित कड़ा 4.5:1 कंट्रास्ट दें।