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

1.3 फ़ॉन्ट वज़न

रेगुलर-से-हल्का-बोल्ड नियम, 2026 के लिए पुनर्निर्मित: सतत वेरिएबल वज़न अक्ष, ग्रेड के साथ डार्क-मोड वज़न-क्षतिपूर्ति, पतले वज़न के फ़ैशन की समस्या, और वज़न का WCAG कंट्रास्ट के साथ अंतर्संबंध।

7 min read

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

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

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

2005 में वज़न एक विविक्त चुनाव था। कोई परिवार रेगुलर और बोल्ड में, शायद लाइट और ब्लैक में भी, जारी होता था और डिज़ाइनर उनमें से एक चुनता था। वेरिएबल फ़ॉन्ट (variable fonts) ने वह बाधा घोल दी: wght अक्ष वज़न को एक सातत्य के रूप में उजागर करता है, आमतौर पर 100 से 900 तक, जिसे CSS से font-weight या font-variation-settings के ज़रिये संबोधित किया जा सकता है। "रेगुलर से हल्का बोल्ड" अब 400 से 700 की झटकेदार छलाँग नहीं है — वह लाइट मोड में बॉडी टेक्स्ट के लिए 430, गहरी पृष्ठभूमि पर 380, और सुदृढ़ीकरण चाहने वाले छोटे लेबल के लिए 500 हो सकता है। सिफ़ारिश क़ायम है; उसे लागू करने की परिशुद्धता नई है।

कुछ परिवार और आगे जाकर ग्रेड अक्ष (GRAD) उपलब्ध कराते हैं — एक परिपाटी जिसे Google के Roboto Flex जैसे परिवारों ने लोकप्रिय बनाया। ग्रेड अक्षरों की चौड़ाई बदले बिना स्ट्रोक की मोटाई बदलता है, इसलिए उसे समायोजित करने से टेक्स्ट रीफ़्लो नहीं होता। यह भेद वहाँ-वहाँ मायने रखता है जहाँ वज़न को लेआउट खिसकाए बिना संदर्भ के अनुसार प्रतिक्रिया देनी हो — डार्क मोड, होवर अवस्थाएँ, रेंडरिंग भिन्नताएँ।

दूसरा परिवर्तन है डार्क इंटरफ़ेसों का एक प्रथम श्रेणी के मोड के रूप में उदय, जिसे prefers-color-scheme से क्वेरी किया जा सकता है। वज़न और ध्रुवता (polarity) परस्पर क्रिया करते हैं, और 2005 के दिशानिर्देशों को — जो लगभग सर्वव्यापी गहरे-पर-हल्के टेक्स्ट के युग में लिखे गए थे — इसका सामना कभी करना ही नहीं पड़ा।

डार्क मोड और वज़न-क्षतिपूर्ति

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

व्यावहारिक क्षतिपूर्ति है डार्क मोड में वज़न थोड़ा घटाना। वेरिएबल wght अक्ष के साथ बॉडी टेक्स्ट को 20 से 50 इकाई घटाना — मसलन 400 से 370 की ओर — अभीष्ट स्ट्रोक-घनत्व लौटा देता है। जहाँ GRAD अक्ष मौजूद हो, वही बेहतर उपकरण है, क्योंकि ऋणात्मक ग्रेड बिना किसी रीफ़्लो के स्ट्रोक पतले करता है; ग्रेड ठीक इसी उपयोग के लिए डिज़ाइन किए गए थे। स्थैतिक परिवार कोई अच्छा लीवर नहीं देते — जो अपने आप में दोनों कलर स्कीमों के प्रति प्रतिबद्ध किसी भी उत्पाद में वेरिएबल फ़ॉन्ट अपनाने का तर्क है।

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

पतले वज़न की समस्या

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

रेंडर-योग्य होना पठनीय होना नहीं है। जो 200-वज़न का स्ट्रोक डिज़ाइनर की हाई-DPI स्क्रीन पर बच जाता है, वह मानक-घनत्व मॉनिटरों पर बिगड़ता है, कम डिस्प्ले चमक या आक्रामक नाइट-शिफ़्ट फ़िल्टरिंग में और मंद होता है, और अल्प दृष्टि वाले पाठकों के लिए उपयोगी स्ट्रोक-कंट्रास्ट की देहरी से नीचे ही गिर सकता है। पतला टाइप इस पर लगाया गया मिला-जुला दाँव है कि हर पाठक के पास उत्कृष्ट तीक्ष्णता, प्रीमियम स्क्रीन और पूरी चमक है। मापे गए कंट्रास्ट अनुपात भी पतले टाइप के वास्तविक प्रदर्शन को बढ़ा-चढ़ाकर दिखाते हैं: WCAG का सूत्र अग्रभूमि और पृष्ठभूमि के रंगों की तुलना करता है लेकिन स्ट्रोक-चौड़ाई का हिसाब नहीं रखता, इसलिए 100-वज़न का फ़ेस तकनीकी रूप से 4.5:1 पास कर सकता है जबकि उन्हीं रंगों पर 400-वज़न के फ़ेस से कहीं कम उपयोगी कंट्रास्ट देता है। WCAG 3.0 मसौदे को पोषित करने वाला APCA शोध ठीक इसी कमी को संबोधित करता है — उसका मॉडल कंट्रास्ट, आकार और वज़न को परस्पर क्रियाशील चर मानता है, और पतले तथा छोटे टेक्स्ट पर कड़ी लाइटनेस-कंट्रास्ट अपेक्षाएँ लगाता है। यात्रा की यह दिशा 2005 की सहज-बुद्धि की पुष्टि करती है: वज़न कंट्रास्ट का हिस्सा है, चाहे वर्तमान सूत्र यह कहे या न कहे।

दूसरे ध्रुव पर दोबारा बहस की ज़रूरत कम है। भारी और ब्लैक वज़न टेक्स्ट आकारों पर आज भी काउंटर बंद करते और अक्षर-रूपों को आपस में मिला देते हैं; वे डिस्प्ले उपकरण ही हैं। बोल्ड की बल और पदानुक्रम की वैध भूमिका बनी हुई है — और WCAG स्वयं बोल्ड के योगदान को स्वीकार करती है, बड़े-टेक्स्ट की कंट्रास्ट-सीमा को बोल्ड के लिए 14pt पर लाकर, जबकि रेगुलर के लिए वह 18pt है।

100 से 900 तक का वज़न अक्ष जिसमें 400 से 600 की पट्टी बॉडी टेक्स्ट के लिए सुरक्षित चिह्नित है — हेयरलाइन केवल डिस्प्ले के लिए हैं, बोल्ड बल के लिए है, और पतले स्ट्रोक गहरी सतहों पर ग़ायब हो जाते हैं।

व्यवहार में वज़न

एक आधुनिक वज़न-नीति ऐसी दिखती है। बॉडी टेक्स्ट लगभग 400 और 500 के बीच रहता है, परिवार के अनुसार चुना हुआ — कुछ फ़ेस 400 पर हल्के खिंचे होते हैं और 450 पर बेहतर पढ़े जाते हैं। बल बॉडी वज़न से 200 से 300 इकाई ऊपर जाता है ताकि वह संदिग्ध नहीं, असंदिग्ध हो। डार्क मोड wght से — या बेहतर हो तो GRAD से — थोड़ी कटौती करता है। टेक्स्ट आकारों पर लगभग 300 से नीचे कुछ नहीं आता, और डिस्प्ले आकारों पर उससे नीचे जो भी हो उसे यथार्थपरक चमक पर मानक-घनत्व स्क्रीन पर जाँचा जाता है। जहाँ वेरिएबल फ़ॉन्ट उपलब्ध नहीं हैं, वहाँ इन लक्ष्यों के निकटतम स्थैतिक कट लागू होते हैं, और डार्क-मोड क्षतिपूर्ति रंग-मृदुकरण पर स्थानांतरित हो जाती है।

CSS में

body { font-weight: 400; }
strong { font-weight: 600; }     /* semibold beats bold for emphasis */

@media (prefers-color-scheme: dark) {
  /* light-on-dark reads heavier — pull back with a variable axis */
  body { font-variation-settings: "GRAD" -20; }
}

सिफ़ारिशें

  • बॉडी टेक्स्ट को 400–500 की सीमा में रखें, जहाँ उपलब्ध हो वहाँ वेरिएबल wght अक्ष से प्रति-टाइपफ़ेस ट्यून करते हुए।
  • डार्क मोड में वज़न थोड़ा घटाएँ; जहाँ परिवार GRAD अक्ष देता हो उसे प्राथमिकता दें, क्योंकि ग्रेड-परिवर्तन टेक्स्ट को रीफ़्लो नहीं करता।
  • हैलेशन सीमित करने के लिए डार्क मोड में शुद्ध सफ़ेद-पर-काले युग्मों को नरम करें।
  • लगभग 300 से नीचे के वज़नों को केवल-डिस्प्ले मानें, और उन्हें मानक-घनत्व स्क्रीनों पर सत्यापित करें; सतत पाठ के लिए उनका कभी उपयोग न करें।
  • टेक्स्ट आकारों पर भारी-से-ब्लैक वज़नों से बचें; बोल्ड को बॉडी वज़न से 200–300 इकाई ऊपर के सुविचारित बल-चरण के रूप में इस्तेमाल करें।
  • पास होते WCAG कंट्रास्ट अनुपात को पतले स्ट्रोकों का बहाना न बनने दें — वज़न प्रभावी कंट्रास्ट का हिस्सा है, जैसा कि WCAG 3.0 मसौदे के पीछे का APCA कार्य स्पष्ट करता है।

आगे पढ़ें