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

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

Adam Argyle

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

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

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

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

जीतने के लिए सीएसएस कस्टम प्रॉपर्टी और मीडिया क्वेरी

लोड किए गए फ़ॉन्ट के साथ, उपयोगकर्ता की पसंद के बारे में क्वेरी कर सकते हैं और वैरिएबल को एडैप्ट कर सकते हैं फ़ॉन्ट सेटिंग से मिलान करना है.

प्राथमिकताएं न होने पर दिखने वाली सेटिंग (डिफ़ॉल्ट)

ये शुरुआती स्टाइल, डिफ़ॉल्ट स्टाइल होंगे या इन्हें देखने का कोई दूसरा तरीका होगा बिना किसी प्राथमिकता वाले उपयोगकर्ताओं के लिए स्टाइल.

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

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