द यूनिवर्सल वेब

1.0 अक्षर

स्क्रीन पर अक्षर-रूपों की सुपाठ्यता तय करने वाले डिज़ाइन कारक — शैली, वज़न, तिरछापन, चौड़ाई और स्पेसिंग — उच्च-घनत्व रेंडरिंग, अपर्चर शोध और वेरिएबल फ़ॉन्ट अक्षों के लिए अद्यतन।

7 min read

इस पृष्ठ का अनुवाद AI की सहायता से किया गया है। अंग्रेज़ी मूल ही प्रामाणिक है।

सुपाठ्यता (legibility) अक्षर से शुरू होती है। पाठक किसी शब्द को पहचान सके, उससे पहले दृश्य-तंत्र को व्यक्तिगत अक्षर-रूपों (letterforms) को सुलझाना पड़ता है — और जो भी कारक किसी अक्षर को सुलझाना आसान या कठिन बनाता है, उसका असर एक पठन-सत्र की हज़ारों दृष्टि-स्थिरताओं में संचित होता जाता है। मूल दिशानिर्देशों ने निर्णायक कारकों के रूप में टाइप शैली, वज़न, तिरछापन, चौड़ाई और स्पेसिंग की पहचान की थी। वह सूची ज्यों की त्यों क़ायम है। जो बदला है वह है वह परिवेश जिसमें ये अक्षर उकेरे जाते हैं, और हर कारक पर डिज़ाइनरों का अब उपलब्ध नियंत्रण।

2005 के बाद क्या बदला

2005 का संस्करण ऐसी स्क्रीनों के लिए लिखा गया था जहाँ बॉडी साइज़ पर एक लोअरकेस अक्षर की ऊँचाई मुश्किल से नौ-दस पिक्सेल होती थी। उस रिज़ॉल्यूशन पर पिक्सेल ग्रिड ही प्रमुख बाधा थी: स्ट्रोक पूरे पिक्सेलों पर चिपक जाते थे, महीन विवरण या तो ग़ायब हो जाते थे या शोर में बदल जाते थे, और रेंडरिंग तकनीक — Windows पर ClearType जैसी सबपिक्सेल एंटी-एलियासिंग (antialiasing), अन्यत्र ग्रेस्केल एंटी-एलियासिंग — किसी अक्षर के रूप का उतना ही निर्धारण करती थी जितना उसका डिज़ाइनर। हिंटिंग (hinting), यानी फ़ॉन्ट में ग्रिड-फ़िटिंग निर्देश जोड़ने की प्रथा, एक उपयोगी टेक्स्ट फ़ेस और एक अनुपयोगी फ़ेस के बीच का अंतर थी।

उच्च-घनत्व डिस्प्ले ने यह गणित बदल दिया। प्रति CSS पिक्सेल दो या तीन डिवाइस पिक्सेल पर वही अक्षर चार से नौ गुना पिक्सेल बजट के साथ खींचा जाता है। हाई-DPI पर ग्रेस्केल एंटी-एलियासिंग वक्रों, पतले स्ट्रोकों और असली तिरछी रेखाओं को विश्वसनीय ढंग से रेंडर करती है; उद्योग ने सबपिक्सेल रेंडरिंग को काफ़ी हद तक छोड़ दिया है क्योंकि घनत्व ने उसे अनावश्यक बना दिया। आक्रामक हिंटिंग का महत्व पहले की तुलना में बहुत कम रह गया है — हालाँकि आज भी आम रहे मानक-घनत्व वाले लैपटॉप और डेस्कटॉप मॉनिटरों पर वह मायने रखती है, और यही कारण है कि अक्षर-स्तरीय सिफ़ारिशें अभी हर जगह हाई-DPI मानकर नहीं चल सकतीं।

दूसरा संरचनात्मक परिवर्तन है वेरिएबल फ़ॉन्ट (variable fonts)। वज़न (wght), चौड़ाई (wdth), ऑप्टिकल साइज़ (opsz), और कुछ परिवारों में ग्रेड (GRAD) अब CSS से संबोधित किए जा सकने वाले सतत अक्ष हैं। मूल दिशानिर्देश किसी टाइपफ़ेस के वज़न और चौड़ाई को चुनी जाने वाली स्थिर विशेषताएँ मानते थे; वे अब समायोजित किए जाने वाले पैरामीटर हैं — आकार, पृष्ठभूमि रंग और उपयोगकर्ता की पसंद के अनुसार प्रतिक्रिया देते हुए भी।

शरीर-रचना जो मायने रखती है

अक्षर-पहचान पर शोध 2005 के बाद और पैना हुआ है, और वह लगातार संरचनात्मक विशेषताओं के एक छोटे समुच्चय की ओर संकेत करता है।

एक्स-हाइट (x-height) आज भी प्रतीत होने वाले आकार और छोटे-आकार की सुपाठ्यता का सबसे विश्वसनीय एकल पूर्वानुमापक है। एक ही नाममात्र आकार पर दो फ़ेस पढ़ने में नाटकीय रूप से भिन्न लग सकते हैं; जिसकी एक्स-हाइट बड़ी होती है, वह बड़ा पढ़ा जाता है। CSS की font-size-adjust प्रॉपर्टी इसीलिए मौजूद है — वह फ़ॉलबैक फ़ॉन्ट्स को एक लक्षित एक्स-हाइट अनुपात पर सामान्यीकृत करती है, ताकि फ़ेस बदलने पर टेक्स्ट चुपचाप सिकुड़ न जाए।

अपर्चर (aperture) — c, e, a और s जैसे अक्षरों के खुले भाग — यह तय करते हैं कि अक्षर अपने बंद पड़ोसियों से कितनी आसानी से अलग पहचाने जाते हैं। खुले अपर्चर वाले फ़ेस अल्प-दृष्टि के धुँधलेपन या छोटे रेंडरिंग आकारों में c को o से और e को a से अलग बनाए रखते हैं; बंद, भीतर मुड़े अपर्चर वाले फ़ेस ये भेद सबसे पहले खो देते हैं। पिछले दो दशकों में सुपाठ्यता-केंद्रित टाइप डिज़ाइन निर्णायक रूप से खुले अपर्चरों की ओर बढ़ा है, और अल्प-दृष्टि शोध इस बदलाव का समर्थन करता है।

अक्षर-भेद तीसरा स्तंभ है। भ्रमित करने वाले युग्म — b/d, p/q, और सबसे बढ़कर कैपिटल I, लोअरकेस l और अंक 1 — वहीं हैं जहाँ पहचान सबसे पहले विफल होती है। मूल संस्करण ने Natascha Frensch के Read Regular की ओर इशारा किया था, जो डिस्लेक्सिक पाठकों के लिए दर्पण-प्रतिबिंब अक्षरों को अलग करने हेतु डिज़ाइन किया गया फ़ेस था; वह डिज़ाइन दिशा तब से मुख्यधारा बन चुकी है, और त्वरित "Il1" परीक्षण (तीनों वर्णों को अगल-बग़ल रखकर जाँचना कि वे भिन्न दिखते हैं) अब किसी भी इंटरफ़ेस या बॉडी फ़ेस के लिए मानक जाँच-चरण है।

भ्रमित करने वाले वर्ण-समूह — कैपिटल I, लोअरकेस l और अंक 1; rn बनाम m; O बनाम शून्य — ग्रोटेस्क सैंस में अस्पष्ट, सेरिफ़ में सुभेद्य।

स्ट्रोक-व्यवहार इस सूची को पूरा करता है। अपेक्षाकृत समान स्ट्रोक-चौड़ाई, मोटे और पतले के बीच संयत कंट्रास्ट, और संयत समग्र चौड़ाई — तीनों 2005 से बचे हुए हैं — चरम मॉड्युलेशन और चरम संपीड़न, दोनों धुँधलेपन में अक्षर-रूपों को नष्ट कर देते हैं, और धुँधलापन अल्प दृष्टि तथा निम्न-गुणवत्ता वाली देखने की परिस्थितियों — दोनों का उचित मॉडल है।

वज़न, तिरछापन और चौड़ाई: सतत चुनाव के रूप में

मूल मार्गदर्शन — रेगुलर से हल्का बोल्ड वज़न, तिरछे के बजाय सीधा, संयत चौड़ाई — क़ायम है। संशोधन इस बात में है कि ये चुनाव कैसे किए जाते हैं।

वेरिएबल वज़न अक्ष के साथ "हल्का बोल्ड" अब 400 से 700 की छलाँग नहीं है; वह 450 या 480 हो सकता है — गहरी पृष्ठभूमि या छोटे आकार के लिए स्ट्रोकों को इतना मोटा करने भर को कि काउंटर बंद न हों। ऑप्टिकल साइज़ अक्ष, जहाँ उपलब्ध हों, वही स्वतः करते हैं जिसके लिए टाइप डिज़ाइनर कभी अलग-अलग आकार गढ़ते थे: छोटे आकारों पर डिज़ाइन अपर्चर खोलता है, स्पेसिंग ढीली करता है और कंट्रास्ट घटाता है; बड़े आकारों पर कसता है। जहाँ कोई फ़ेस opsz प्रदान करता है, उसे लागू होने दें — ब्राउज़र डिफ़ॉल्ट रूप से ऐसा करते हैं — क्योंकि वह ठीक वही छोटे-आकार समायोजन संहिताबद्ध करता है जिनकी यह अध्याय सिफ़ारिश करता है।

तिरछापन सतत पाठ के लिए आज भी सुपाठ्यता की क़ीमत माँगता है। इटैलिक बल देने के लिए हैं, अनुच्छेदों के लिए नहीं; ऑब्लीक (तिरछे किए गए रोमन) रूप असली इटैलिक से बदतर हैं, क्योंकि वे अक्षर-रूपों को पुनर्रचित किए बिना विकृत करते हैं।

अक्षर-स्तर पर स्पेसिंग

2005 का यह निष्कर्ष कि स्क्रीन टाइप को प्रिंट की तुलना में अधिक उदार अक्षर-स्पेसिंग और पंक्ति-अंतराल चाहिए, आंशिक रूप से रिज़ॉल्यूशन का दुष्प्रभाव था — ढीली स्पेसिंग स्थूल पिक्सेल अक्षरों को आपस में घुलने से बचाती थी। लेकिन बात केवल इतनी नहीं थी। क्राउडिंग (crowding) शोध दिखाता है कि बहुत कसकर भरे अक्षर परिधीय और अल्प-तीक्ष्णता दृष्टि में पहचान बाधित करते हैं, इसलिए अल्प दृष्टि वाले पाठकों को छोटे आकारों पर थोड़ी ढीली सेटिंग से वास्तविक लाभ होता है। WCAG 2.2 उपयोगकर्ता की ओर से इसे स्वीकार करती है: सफलता मानदंड 1.4.12 (Text Spacing) अपेक्षा करता है कि सामग्री उपयोगकर्ता द्वारा बढ़ाई गई अक्षर, शब्द और पंक्ति स्पेसिंग को बिना किसी हानि के झेल सके। शैलीगत पहचान के रूप में कसी हुई ट्रैकिंग (tracking) डिस्प्ले आकारों के लिए ठीक है; टेक्स्ट आकारों पर वह उन्हीं पाठकों पर कर है जिनके पास गँवाने लायक़ तीक्ष्णता सबसे कम है।

CSS में

/* Preserve letterform quality across fallbacks */
body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size-adjust: 0.5;   /* match fallback x-height to the web font */
  font-kerning: normal;
}

सिफ़ारिशें

  • फ़ेस को वर्गीकरण से नहीं, संरचना से परखें: बड़ी एक्स-हाइट, खुले अपर्चर, समान स्ट्रोक-चौड़ाई, संयत चौड़ाई।
  • किसी टेक्स्ट फ़ेस को अपनाने से पहले Il1 परीक्षण लागू करें और b/d/p/q का भेद जाँचें।
  • वेरिएबल फ़ॉन्ट अक्षों का सोच-समझकर उपयोग करें — संदर्भ के लिए वज़न में छोटे-छोटे अंतर, और छोटे आकारों पर ऑप्टिकल साइज़िंग (opsz) को अपना काम करने दें।
  • सतत पाठ को सीधा रखें; तिरछापन बल देने के लिए आरक्षित रखें।
  • टेक्स्ट आकारों पर अक्षर-स्पेसिंग तटस्थ से हल्की-ढीली रखें, और सत्यापित करें कि लेआउट WCAG 1.4.12 के उपयोगकर्ता स्पेसिंग ओवरराइड झेल लेते हैं।
  • केवल हाई-DPI ही नहीं, मानक-घनत्व वाले डिस्प्ले पर भी परीक्षण करें; बहुत से पाठकों के लिए पिक्सेल ग्रिड अब भी मौजूद है।

आगे पढ़ें