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

1.1 फ़ॉन्ट शैली

2005 का नियम 'स्क्रीन पर सैन्स सेरिफ़ का उपयोग करें' उच्च-रिज़ॉल्यूशन डिस्प्ले पर अब क्यों नहीं टिकता — और उसकी जगह किन बातों का मूल्यांकन करें: एक्स-हाइट, अपर्चर, अक्षरों की भिन्नता, और रेंडरिंग गुणवत्ता।

7 min read

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

इन दिशानिर्देशों के 2005 संस्करण ने अपना सबसे दो-टूक निर्देश यहीं दिया था: स्क्रीन पढ़ने के लिए एक प्रतिकूल माध्यम है, इसलिए सैन्स सेरिफ़ (sans serif) टाइपफ़ेस का उपयोग करें। चेतावनी थी कि सेरिफ़ (serif) टेक्स्ट आकारों पर दृश्य शोर बन जाते हैं; बारीक स्ट्रोक और सूक्ष्मताएँ रेंडर ही नहीं होतीं। उस दौर के डिस्प्ले के लिए यह सलाह सही थी। आज के डिस्प्ले के लिए इसे नियम के रूप में सेवानिवृत्त करके उस तर्क से बदलना ज़रूरी है जो हमेशा से इसके नीचे मौजूद था।

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

मूल अनुशंसा वास्तव में कभी सेरिफ़ के बारे में थी ही नहीं। वह पिक्सेल के बारे में थी। 96-DPI पैनल पर दो-तीन भौतिक पिक्सेल लंबा सेरिफ़ या तो ग्रिड से चिपककर एक भोंडा स्लैब बन जाता था या एंटीएलियास्ड धुंध में घुल जाता था। पतले स्ट्रोक टूट जाते थे; ब्रैकेटेड वक्र सीढ़ीनुमा हो जाते थे। स्क्रीन के लिए डिज़ाइन किए गए सैन्स सेरिफ़ — Verdana, Tahoma और उनके समकक्ष, जो मज़बूत मोनोलाइन स्ट्रोक और उदार फ़िट के साथ बनाए गए थे — इस सबसे बच निकलते थे। उनकी अनुशंसा दरअसल उस रेंडरिंग इंजन के विरुद्ध रक्षात्मक डिज़ाइन थी जो सेरिफ़ खींच ही नहीं सकता था।

वह बाधा काफ़ी हद तक विलीन हो चुकी है। उच्च-घनत्व डिस्प्ले प्रति CSS पिक्सेल दो से तीन डिवाइस पिक्सेल रेंडर करते हैं — इतना पर्याप्त कि बारीक सेरिफ़, स्ट्रोक का उतार-चढ़ाव और सूक्ष्म जोड़ प्रिंट के निकट की निष्ठा से खींचे जा सकें। उन घनत्वों पर आधुनिक ग्रेस्केल एंटीएलियासिंग वक्रों और तिरछी रेखाओं को साफ़-सुथरा संभालती है। ऐसी स्क्रीनों पर, समान प्रभावी आकार में सेट किया गया एक सुनिर्मित टेक्स्ट सेरिफ़ और एक सुनिर्मित सैन्स — दोनों पूरी तरह सुपाठ्य हैं, और पठन-अनुसंधान का व्यापक निष्कर्ष भी यही दर्शाता है: जब एक्स-हाइट (x-height), आकार और स्पेसिंग को नियंत्रित रखा जाता है, तो सेरिफ़ और सैन्स शैलियों के बीच पढ़ने की गति और बोधगम्यता में मापे गए अंतर छोटे और असंगत होते हैं। सेरिफ़/सैन्स चर, उन सब चीज़ों से अलग करके देखा जाए जिनके साथ वह पहले जुड़ा रहता था, तो वह बहुत कम व्याख्या करता है।

दो सावधानियाँ पुराने नियम को सीधे उलट देने से रोकती हैं। पहली, मानक-घनत्व मॉनिटर अब भी डेस्कों पर आम हैं, और उन पर नाज़ुक सेरिफ़ आज भी बिगड़ते हैं — बॉडी टेक्स्ट के लिए चुने गए किसी भी फ़ेस को 1x रेंडरिंग पर परखा जाना चाहिए, जहाँ हिंटिंग की गुणवत्ता और स्ट्रोक की मज़बूती आज भी अपनी कीमत वसूल करती है। दूसरी, और इस परियोजना के लिए अधिक महत्वपूर्ण — निम्न-दृष्टि (low vision) का मामला औसत मामला नहीं है।

सुपाठ्यता की वास्तविक भविष्यवाणी क्या करता है

यदि शैली-वर्गीकरण छँटाई की कसौटी के रूप में बाहर हो गया है, तो उसकी जगह एक छोटी संरचनात्मक जाँच-सूची लेती है — वही जो अध्याय 1.0 में प्रस्तुत की गई थी, यहाँ उम्मीदवार फ़ेसों के बीच चुनाव पर लागू की गई है।

सबसे पहले एक्स-हाइट। बड़ी एक्स-हाइट वाला फ़ेस अपने नाममात्र आकार से बड़ा पढ़ा जाता है और छोटे आकारों में बेहतर टिकता है — चाहे उसमें सेरिफ़ हों या नहीं। कई समकालीन टेक्स्ट सेरिफ़ उतनी ही उदार एक्स-हाइट के साथ बनाए जाते हैं जितनी किसी भी स्क्रीन सैन्स की होती है।

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

तीसरे, अक्षरों की भिन्नता। Il1 परीक्षण चलाइए: बड़ा I, छोटा l और अंक 1 एक साथ सेट कीजिए। कई लोकप्रिय सैन्स सेरिफ़ इसमें सीधे विफल हो जाते हैं, I और l को एक जैसी रेखाओं के रूप में रेंडर करते हुए — पासवर्ड, कोड और नामों में यह वास्तविक ख़तरा है। विडंबना यह है कि सेरिफ़ प्रायः स्वतः ही उत्तीर्ण हो जाते हैं, क्योंकि सेरिफ़ ठीक इन्हीं अक्षरों को अलग करते हैं। b/d और p/q की दर्पण-छवि भी जाँचिए, और r n की जोड़ी भी, जो तंग स्पेसिंग में m बनकर जुड़ सकती है।

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

aegs अक्षर एक सेरिफ़ और एक सैन्स में सेट किए गए, टेक्स्ट आकारों पर सुपाठ्यता में लगभग बराबर — असली पूर्वानुमानक हैं एक्स-हाइट, अपर्चर, भिन्न अक्षर और स्पेसिंग।

निम्न-दृष्टि की सूक्ष्मता

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

सतत पाठ के लिए अलंकारिक और अति-शैलीकृत टाइपफ़ेस के विरुद्ध 2005 की चेतावनी बिना किसी संशोधन के क़ायम है। सजावटी फ़ेस शैली के लिए अक्षर-संरचना का त्याग करते हैं, और जिन पाठकों के पास दृश्य क्षमता की गुंजाइश सबसे कम है, वे सबसे बड़ी कीमत चुकाते हैं। बड़े आकारों में डिस्प्ले उपयोग एक अलग, अधिक क्षमाशील संदर्भ है।

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

CSS में

/* Screen for structure, not classification */
body {
  /* Georgia: large x-height, open apertures, screen-hinted */
  font-family: Georgia, Charter, "Bitstream Charter", serif;
}
.ui {
  font-family: system-ui, sans-serif;  /* the platform's proven face */
}

अनुशंसाएँ

  • "केवल सैन्स सेरिफ़" को नियम के रूप में सेवानिवृत्त करें; उम्मीदवार फ़ेसों का मूल्यांकन संरचनात्मक रूप से करें।
  • बॉडी टेक्स्ट के लिए बड़ी एक्स-हाइट, खुले अपर्चर और समान, संयमित स्ट्रोक-कंट्रास्ट अनिवार्य रखें।
  • Il1 और b/d/p/q परीक्षण लागू करें; जिन फ़ेसों के अक्षर एक-दूसरे में घुलते हों, उन्हें अस्वीकार करें।
  • निम्न-दृष्टि की दृष्टि से संवेदनशील संदर्भों में बारीक हेयरलाइन वाले उच्च-कंट्रास्ट डिज़ाइनों से बचें; मज़बूत, कम-कंट्रास्ट संरचनाओं को प्राथमिकता दें।
  • वास्तविक आकारों पर रेंडरिंग की पुष्टि करें — उच्च-DPI के साथ-साथ मानक-घनत्व स्क्रीनों पर, लाइट और डार्क दोनों मोड में।
  • अलंकारिक और अति-शैलीकृत फ़ेसों को सतत पाठ से बाहर रखना जारी रखें।

आगे पढ़ें