सीएसएस की मदद से, टाइपोग्राफ़ी को उपयोगकर्ता की पसंद के मुताबिक बनाना

फ़ॉन्ट को अपने उपयोगकर्ताओं की पसंद के मुताबिक बनाने का तरीका, ताकि वे आपकी सामग्री को आसानी से पढ़ सकें.

Adam Argyle

उपयोगकर्ताओं को डिज़ाइन की प्रोसेस में शामिल करना, उपयोगकर्ताओं, डिज़ाइनर, और डेवलपर के लिए एक रोमांचक समय रहा है. उपयोगकर्ता आपके अनुभव के आधार पर काम कर सकते हैं और आसानी से कॉन्टेंट इस्तेमाल करना शुरू कर सकते हैं. उनकी पसंद को डिज़ाइन से जुड़े नतीजे के साथ अच्छी तरह से शामिल किया जा सकता है.

इस ब्लॉग पोस्ट में, वैरिएबल फ़ॉन्ट के साथ सीएसएस मीडिया क्वेरी का इस्तेमाल करने के बारे में बताया गया है, ताकि पढ़ने के अनुभव को और बेहतर बनाया जा सके. font-variation-settings का इस्तेमाल करके, फ़ॉन्ट ग्रेड और वेट को पसंद के मुताबिक बनाया जा सकता है. इससे, अलग-अलग प्राथमिकताओं और संदर्भों के हिसाब से, माइक्रोट्यूनिंग की जा सकती है. जैसे, डार्क मोड या हाई कंट्रास्ट की प्राथमिकता. हम इन प्राथमिकताओं को ध्यान में रखकर, उपयोगकर्ता अनुभव के हिसाब से वैरिएबल फ़ॉन्ट बना सकते हैं.

  • गहरे रंग वाले मोड में ग्रेडिएशन की सुविधा थोड़ी कम हो जाती है.
  • ज़्यादा कंट्रास्ट में फ़ॉन्ट बोल्ड होता है.
  • कम कंट्रास्ट में फ़ॉन्ट पतला हो जाता है.
https://codepen.io/argyleink/pen/mdQrqvj

सीएसएस के हर हिस्से और वैरिएबल फ़ॉन्ट के बारे में जानने के लिए, यह तरीका अपनाएं!

सेटअप किया जा रहा है

सीएसएस और फ़ॉन्ट वैरिएशन सेटिंग की वैल्यू पर ध्यान देने में मदद करने के साथ-साथ, हमें पढ़ने और देखने के लिए भी कुछ दिया जा सकता है. आपके काम की झलक देखने के लिए, यहां दिए गए मार्कअप का इस्तेमाल किया जा सकता है:

<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 को पिक्सल में सेट करने से, उपयोगकर्ता की सेटिंग पर क्या असर पड़ेगा. साथ ही, यह भी बताया गया है कि आपको फ़ॉन्ट का साइज़, रेम में क्यों सेट करना चाहिए:

आखिर में, डेमो को सेंटर पर दिखाने और उसे सपोर्ट करने के लिए, सीएसएस का इस्तेमाल करें:

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

अब तक के डेमो की स्क्रीनशॉट की झलक, गहरे और हल्के रंग वाली थीम, दोनों में.

इस डेमो सेटअप की मदद से, इस बेहतरीन टाइपोग्राफ़ी यूज़र एक्सपीरियंस (UX) की सुविधा को टेस्ट किया जा सकता है और उसे लागू किया जा सकता है.

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;
  }
}

अब तक के डेमो की स्क्रीनशॉट की झलक, जिसमें फ़ॉन्ट अब गहरे और हल्के रंग वाली दोनों थीम में 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 में नीचे दिया गया है.