3.2 वेरिएबल फ़ॉन्ट्स

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

वेब टाइपोग्राफ़ी (typography) के पहले दो दशकों में एक टाइपफ़ेस (typeface) जमे हुए इंस्टेंस का एक सेट होता था: रेगुलर, इटैलिक, बोल्ड, और बजट अनुमति दे तो शायद एक लाइट और एक ब्लैक। इनके बीच हर चुनाव निश्चित बिंदुओं में से एक चुनाव था। वेरिएबल फ़ॉन्ट्स (variable fonts) — जो 2016 में OpenType Font Variations के साथ आए और अब सभी प्रमुख ब्राउज़रों में समर्थित हैं — उन बिंदुओं की जगह सतत रेंज रख देते हैं। एक फ़ाइल में पूरा डिज़ाइन स्पेस समाया होता है, और टाइपोग्राफ़र, स्टाइलशीट या पाठक उसके भीतर कोई भी स्थिति चुन सकता है।

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

अक्ष (Axes)

एक वेरिएबल फ़ॉन्ट परिवर्तन के नामित अक्ष उपलब्ध कराता है। OpenType विनिर्देश में पाँच पंजीकृत हैं:

wght (वज़न) — सौ-सौ के चरणों के बजाय हेयरलाइन से ब्लैक तक सतत।
wdth (चौड़ाई) — कंडेंस्ड से एक्सटेंडेड तक, यांत्रिक स्केलिंग की विकृति के बिना।
opsz (ऑप्टिकल आकार) — रूप उस आकार के अनुरूप ढले होते हैं जिस पर उन्हें पढ़ा जाएगा।
slnt (तिरछापन) और ital (इटैलिक) — तिरछा कोण और वास्तविक इटैलिक रूपों का स्विच।

फ़ाउंड्री अपने कस्टम अक्ष जोड़ सकती हैं। हमारे प्रयोजन के लिए सबसे महत्वपूर्ण है GRAD (ग्रेड), जिसकी चर्चा नीचे है। CSS में पंजीकृत अक्ष उच्च-स्तरीय प्रॉपर्टियों से मैप होते हैं — font-weight, font-stretch, font-style और font-optical-sizing — जिन्हें निम्न-स्तरीय font-variation-settings पर वरीयता दी जानी चाहिए ताकि स्टाइलें अनुमानित ढंग से कैस्केड और संयोजित हों। पाँच पंजीकृत वेरिएबल फ़ॉन्ट अक्ष — wght, wdth, opsz, slnt, ital — रेंज के रूप में दर्शाए गए, जिनमें प्रत्येक पर बॉडी-टेक्स्ट का डिफ़ॉल्ट चिह्नित है।

पाँच पंजीकृत वेरिएबल फ़ॉन्ट अक्ष — wght, wdth, opsz, slnt, ital — रेंज के रूप में दर्शाए गए, जिनमें प्रत्येक पर बॉडी-टेक्स्ट का डिफ़ॉल्ट चिह्नित है।

ऑप्टिकल साइज़िंग: एक पुराना औज़ार लौट आया

ऑप्टिकल साइज़िंग (optical sizing) नई नहीं है; यह बहुत पुरानी है, और डिजिटल टाइप से इसकी अनुपस्थिति ही विसंगति थी। धातु के टाइप में हर आकार अलग से तराशा जाता था, और पंचकटर क्षतिपूर्ति करता था: छोटे आकारों को अधिक मज़बूत स्ट्रोक, चौड़ी स्पेसिंग, बड़ी एक्स-हाइट (x-height), अधिक खुले काउंटर मिलते थे; डिस्प्ले आकारों को महीन कंट्रास्ट और कसा हुआ फ़िट। फ़ोटोटाइपसेटिंग और फिर डिजिटल फ़ॉन्ट्स ने यह प्रथा छोड़ दी और एक ही मास्टर को हर आकार पर स्केल किया — यही कारण है कि इतना सारा छोटा डिजिटल टेक्स्ट पतला और भरा-भरा महसूस होता रहा है।

opsz अक्ष इस प्रथा को पुनर्स्थापित करता है। ऑप्टिकल साइज़ अक्ष वाला एक अच्छी तरह बनाया गया वेरिएबल फ़ॉन्ट कैप्शन-आकार के टेक्स्ट को सुदृढ़, खुले रूपों में और हेडलाइन टेक्स्ट को परिष्कार के साथ प्रस्तुत करता है — स्वतः, जब font-optical-sizing: auto प्रभावी हो (जो डिफ़ॉल्ट है)। कम दृष्टि वाले पाठकों के लिए, जो रेंज के छोटे-और-तनावपूर्ण सिरे पर रहते हैं, यह सुपाठ्यता (legibility) का सीधा लाभ है जिसकी क़ीमत डिज़ाइनर के लिए बस इतनी है कि वह इसे समर्थन देने वाला फ़ॉन्ट चुने।

ग्रेड: बिना रीफ़्लो के वज़न

ग्रेड अक्ष ग्लिफ़ की चौड़ाई बदले बिना स्ट्रोक का गहरापन बदलता है। यही भेद पूरी बात का सार है: font-weight बदलने से अक्षरों की चौड़ाई बदलती है और इसलिए टेक्स्ट रीफ़्लो (reflow) होता है, जबकि ग्रेड बदलने से नहीं। टेक्स्ट देखने में भारी या हल्का हो सकता है और हर लाइन ब्रेक अपनी जगह बना रहता है।

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

प्रदर्शन भी सुगम्यता है

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

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

निजीकरण: बड़ा वादा

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

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

यह अध्याय नया क्यों है

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

CSS में

body {
  font-optical-sizing: auto;   /* opsz: text forms at text sizes */
}

@media (prefers-color-scheme: dark) {
  /* grade trims dark-mode weight bloom without reflow */
  body { font-variation-settings: "GRAD" -20; }
}

सिफ़ारिशें

नई परियोजनाओं के लिए वेरिएबल फ़ॉन्ट्स को प्राथमिकता दें; स्थिर फ़ाइलों के ढेर के बजाय एक रोमन और एक इटैलिक फ़ाइल भेजें।
जो इंटरफ़ेस कई आकारों में टेक्स्ट सेट करते हैं, उनके लिए ऑप्टिकल साइज़ अक्ष वाले टाइपफ़ेस चुनें, और font-optical-sizing: auto प्रभावी रहने दें।
डार्क मोड में आभासी वज़न ठीक करने के लिए (जहाँ उपलब्ध हो) ग्रेड अक्ष का उपयोग करें, ताकि रीफ़्लो न हो।
जहाँ संभव हो, कच्चे font-variation-settings के बजाय उच्च-स्तरीय CSS प्रॉपर्टियाँ (font-weight, font-stretch) उपयोग करें।
नक़ली-बोल्ड या नक़ली-इटैलिक पर कभी निर्भर न रहें; वेरिएबल फ़ाइल वास्तविक रूप उपलब्ध कराती है।
जहाँ लंबे-लेख का पठन ही उत्पाद हो, वहाँ पाठकों को वज़न और चौड़ाई का सीधा नियंत्रण देने पर विचार करें — और उनका चुनाव याद रखें।