यह एक ऐसा तरीका है जिससे फ़ॉन्ट को उपयोगकर्ताओं की पसंद के मुताबिक बनाया जा सकता है. इससे उन्हें आपका कॉन्टेंट पढ़ने में ज़्यादा आसानी होती है.
उपयोगकर्ताओं को डिज़ाइन प्रोसेस में शामिल करने से, उपयोगकर्ताओं, डिज़ाइनर, और डेवलपर को काफ़ी फ़ायदा मिला है. उपयोगकर्ता आपके अनुभव पर पहुंच सकते हैं और बिना किसी रुकावट के कॉन्टेंट देखना शुरू कर सकते हैं. उनकी प्राथमिकताओं को डिज़ाइन के नतीजों में अच्छी तरह से इंटिग्रेट किया जाता है.
इस ब्लॉग पोस्ट में, सीएसएस मीडिया क्वेरी का इस्तेमाल करके, वैरिएबल फ़ॉन्ट के साथ पढ़ने के अनुभव को और बेहतर बनाने के बारे में बताया गया है. font-variation-settings की मदद से, फ़ॉन्ट के ग्रेड और वेट को पसंद के मुताबिक बनाया जा सकता है. इससे, अलग-अलग प्राथमिकताओं और संदर्भों के हिसाब से फ़ॉन्ट को बेहतर बनाया जा सकता है. जैसे, डार्क मोड या ज़्यादा कंट्रास्ट के लिए फ़ॉन्ट को बेहतर बनाना. हम इन प्राथमिकताओं को ध्यान में रखकर, उपयोगकर्ता अनुभव के हिसाब से वैरिएबल फ़ॉन्ट बना सकते हैं.
- गहरे रंग वाले मोड में, रंगत थोड़ी कम हो जाती है.
- ज़्यादा कंट्रास्ट वाले टेक्स्ट के लिए, बोल्ड फ़ॉन्ट का इस्तेमाल किया जाता है.
- कम कंट्रास्ट वाले टेक्स्ट के लिए, पतला फ़ॉन्ट इस्तेमाल किया जाता है.
सीएसएस और वैरिएबल फ़ॉन्ट के हर हिस्से को समझने के लिए, साथ बने रहें. इससे आपको यह समझने में मदद मिलेगी कि इस तरह के फ़ॉन्ट कैसे काम करते हैं!
सेटअप करना
सीएसएस और फ़ॉन्ट वैरिएशन सेटिंग की वैल्यू पर फ़ोकस करने के साथ-साथ, हमें कुछ पढ़ने और देखने के लिए यहां मार्कअप दिया गया है. इसका इस्तेमाल करके, काम की झलक देखी जा सकती है:
<h1>Variable font weight based on contrast preference</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo labore aliquid ex, dicta corporis. </p> कोई सीएसएस जोड़े बिना, फ़ॉन्ट का साइज़ पहले से ही उपयोगकर्ता की प्राथमिकताओं के हिसाब से होता है. यहां एक और डेमो का वीडियो दिया गया है. इसमें दिखाया गया है कि पिक्सल में font-size सेट करने से, उपयोगकर्ता की सभी प्राथमिकताओं को कैसे कम किया जा सकता है. साथ ही, यह भी बताया गया है कि आपको अपने फ़ॉन्ट का साइज़ rem में क्यों सेट करना चाहिए:
आखिर में, डेमो को सेंटर में लाने और उसे सपोर्ट करने के लिए, थोड़ी सी सीएसएस:
@layer demo.support { body { display: grid; place-content: center; padding: var(--size-5); gap: var(--size-5); } h1 { text-wrap: balance; } } 
इस डेमो सेटअप की मदद से, टाइपोग्राफ़ी से जुड़े इस बेहतरीन यूज़र एक्सपीरियंस (यूएक्स) की सुविधा को टेस्ट और लागू किया जा सकता है.
Roboto Flex वैरिएबल फ़ॉन्ट लोड हो रहा है
अडैप्टिव रणनीति, वैरिएबल फ़ॉन्ट पर निर्भर करती है. इसमें पसंद के मुताबिक बनाने के लिए, काम के ऐक्सिस होते हैं. खास तौर पर, आपको GRAD और wght की ज़रूरत होती है. इस लेख में, अडैप्टिव यूज़र इंटरफ़ेस (यूआई) की उन सेटिंग के बारे में बताया गया है जिन्हें टारगेट किया जा सकता है. ये सेटिंग, कलर स्कीम और कंट्रास्ट से जुड़ी हैं. इन दोनों सेटिंग को उपयोगकर्ता की पसंद के हिसाब से बनाया जाएगा.
सीएसएस के @font-face API का इस्तेमाल करके, वैरिएबल फ़ॉन्ट लोड करें:
@font-face { font-family: "Roboto Flex"; src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype'); } इसके बाद, कुछ कॉन्टेंट पर फ़ॉन्ट लागू करें. यहां दी गई सीएसएस, इसे हर चीज़ पर लागू करती है:
@layer demo.support { body { font-family: Roboto Flex; } } 
सीएसएस कस्टम प्रॉपर्टी और मीडिया क्वेरी का इस्तेमाल करके, बेहतर नतीजे पाएं
फ़ॉन्ट लोड होने के बाद, उपयोगकर्ता की प्राथमिकताओं के लिए क्वेरी की जा सकती है. साथ ही, वैरिएबल फ़ॉन्ट की सेटिंग को उपयोगकर्ता की प्राथमिकताओं के हिसाब से बदला जा सकता है.
जब कोई प्राथमिकता नहीं चुनी जाती है, तब सेटिंग (डिफ़ॉल्ट)
नीचे दी गई शुरुआती स्टाइल, डिफ़ॉल्ट स्टाइल होंगी. इसके अलावा, इन्हें ऐसे उपयोगकर्ताओं के लिए स्टाइल भी कहा जा सकता है जिन्होंने कोई प्राथमिकता सेट नहीं की है.
@layer demo { body { --base-weight: 400; --base-grade: 0; font-variation-settings: "wght" var(--base-weight), "GRAD" var(--base-grade) ; } } ज़्यादा कंट्रास्ट की सुविधा के लिए सेटिंग
जिन उपयोगकर्ताओं ने सिस्टम की सेटिंग में, ज़्यादा कंट्रास्ट को प्राथमिकता दी है उनके लिए, --base-weight की वैल्यू को 400 से बढ़ाकर 700 करें:
@layer demo { @media (prefers-contrast: more) { body { --base-weight: 700; } } } अब पढ़ने के दौरान कंट्रास्ट ज़्यादा होता है.
कम कंट्रास्ट के लिए सेटिंग
जिन उपयोगकर्ताओं ने सिस्टम की सेटिंग में कम कंट्रास्ट को प्राथमिकता दी है उनके लिए, --base-weight की वैल्यू को 400 से घटाकर 200 करें:
@layer demo { @media (prefers-contrast: less) { body { --base-weight: 200; } } } अब पढ़ने के दौरान कंट्रास्ट कम हो गया है.
गहरे रंग वाले मोड के लिए सेटिंग
@layer demo { @media (prefers-color-scheme: dark) { body { --base-grade: -25; } } } अब गहरे रंग पर हल्के रंग और हल्के रंग पर गहरे रंग के बीच के अंतर को ध्यान में रखा गया है.
अब सब एक साथ
@layer demo { body { --base-weight: 400; --base-grade: 0; font-variation-settings: "wght" var(--base-weight), "GRAD" var(--base-grade) ; } @media (prefers-contrast: more) { body { --base-weight: 700; } } @media (prefers-contrast: less) { body { --base-weight: 200; } } @media (prefers-color-scheme: dark) { body { --base-grade: -25; } } } इसके अलावा, सीएसएस नेस्टिंग का इस्तेमाल करके, इन सभी को एक साथ भी लिखा जा सकता है:
@layer demo { body { --base-weight: 400; --base-grade: 0; font-variation-settings: "wght" var(--base-weight), "GRAD" var(--base-grade) ; @media (prefers-contrast: more) { --base-weight: 700 } @media (prefers-contrast: less) { --base-weight: 200 } @media (prefers-color-scheme: dark) { --base-grade: -25 } } } इससे, पढ़ने का ऐसा अनुभव मिलता है जिसमें फ़ॉन्ट को उपयोगकर्ता की प्राथमिकताओं के हिसाब से बदला जाता है. पूरा सोर्स कोड, नीचे Codepen में उपलब्ध है.