पब्लिश होने की तारीख: 16 दिसंबर, 2025
रिस्पॉन्सिव वेब डिज़ाइन, वेबसाइट बनाने का एक ऐसा तरीका है जिससे वेबसाइट अलग-अलग ब्राउज़र, व्यूपोर्ट डाइमेंशन, डिवाइसों, और उपयोगकर्ता की प्राथमिकताओं के हिसाब से अच्छी दिखती है और ठीक से काम करती है. टाइपोग्राफ़ी पर लागू होने पर, मुख्य समस्या अक्सर ब्राउज़र की चौड़ाई के आधार पर font-size को अडजस्ट करना होती है. इससे line-height और margin जैसी स्पेसिंग वैल्यू पर भी असर पड़ सकता है.
एक डिज़ाइनर के तौर पर, यह सोचना ज़रूरी है कि ब्राउज़र में कितना स्पेस उपलब्ध है. इसके हिसाब से, अपनी टाइपोग्राफ़ी को अडजस्ट करें. यह भी ध्यान रखना ज़रूरी है कि अलग-अलग उपयोगकर्ताओं की font-size ज़रूरतें अलग-अलग होंगी. ये ज़रूरतें, अलग-अलग डिवाइसों के हिसाब से भी अलग-अलग हो सकती हैं. ऐसा उन निजी परिस्थितियों की वजह से हो सकता है जिनके बारे में आपको पता नहीं है या जिन पर आपका कंट्रोल नहीं है. इसलिए, ऐसा कुछ भी करना खतरनाक हो सकता है जिससे उपयोगकर्ता का कंट्रोल, फ़ाइनल नतीजे से हट जाए. वेब ब्राउज़ करते समय, फ़ॉन्ट के साइज़ पर असर डालने के लिए, लोग इन दो मुख्य इनपुट का इस्तेमाल कर सकते हैं:
- सभी वेबसाइटों पर, डिफ़ॉल्ट
font-sizeसेटिंग उपलब्ध कराना. - साइट के हिसाब से ज़ूम इन या ज़ूम आउट करना.
इस डेमो का मकसद, टाइपोग्राफ़ी को ब्राउज़र के व्यूपोर्ट साइज़ और उपयोगकर्ता के इनपुट, दोनों के हिसाब से रिस्पॉन्सिव बनाना है. हालांकि, यह समझना ज़रूरी है कि टाइपोग्राफ़ी, व्यूपोर्ट के हिसाब से जितनी ज़्यादा अडजस्ट होगी, वह उपयोगकर्ता की प्राथमिकताओं के हिसाब से उतनी ही कम अडजस्ट होगी. अगर आपको रिस्पॉन्सिव टाइपोग्राफ़ी लागू करनी है, तो इसे ध्यान से लागू करें. साथ ही, यह जांच करें कि नतीजे अब भी ऐक्सेस किए जा सकते हैं.
उपयोगकर्ता की प्राथमिकताओं के आधार पर, बुनियादी font-size पर बातचीत करना
ऑनलाइन टाइपोग्राफ़ी तय करने का पहला चरण, उपयोगकर्ता की font-size प्राथमिकता के आधार पर फ़ॉन्ट के शुरुआती साइज़ पर बातचीत करना है. इसका इस्तेमाल पेज पर मौजूद ज़्यादातर टेक्स्ट के लिए किया जाएगा. साथ ही, इसका इस्तेमाल हेडिंग जैसे दूसरे फ़ॉन्ट साइज़ के लिए भी किया जाएगा. यहां सबसे आसान विकल्प यह है कि उपयोगकर्ता को 1em का इस्तेमाल करके, पूरा कंट्रोल दिया जाए. इसके लिए, किसी भी तरह के बदलाव करने की ज़रूरत नहीं है. जब कोई दूसरी font-size वैल्यू सेट नहीं की जाती है, तो 1em का मतलब उपयोगकर्ता की प्राथमिकता से होता है. स्पेक्ट्रम के दूसरे छोर पर, पिक्सल या अन्य ऐब्सलूट यूनिट (और यहां तक कि व्यूपोर्ट के हिसाब से यूनिट) में font-size सेट करने से, उपयोगकर्ता की सेटिंग पूरी तरह से बदल जाएगी. ऐसा नहीं करना चाहिए.
हालांकि, अलग-अलग इस्तेमाल के उदाहरणों के लिए अलग-अलग टाइपोग्राफ़ी की ज़रूरत होती है. किसी लेख को बड़े टेक्स्ट में पढ़ना आसान हो सकता है. वहीं, डेटा से जुड़ी साइटों के लिए, छोटे टेक्स्ट वाला ज़्यादा कॉम्पैक्ट डिज़ाइन बेहतर हो सकता है. इन दोनों ही मामलों में, आपको ऐसा डिफ़ॉल्ट सुझाव देना चाहिए जो डिज़ाइन के हिसाब से सही हो. साथ ही, उपयोगकर्ता को अपनी ज़रूरत के हिसाब से नतीजे में बदलाव करने की अनुमति भी देनी चाहिए.
पहला विकल्प: अनुमानों के आधार पर मल्टीप्लायर का हिसाब लगाना
आम तौर पर, उपयोगकर्ता के डिफ़ॉल्ट font-size के हिसाब से, em या % यूनिट में अडजस्ट किया गया font-size तय किया जाता है. आम तौर पर, इस तरीके में यह मान लिया जाता है कि ब्राउज़र, 16px डिफ़ॉल्ट सेटिंग उपलब्ध कराते हैं और ज़्यादातर उपयोगकर्ता उस डिफ़ॉल्ट सेटिंग को नहीं बदलते. अगर आपको लगता है कि आपकी साइट के लिए 20px फ़ॉन्ट का साइज़ बेहतर रहेगा, तो आम तौर पर 1.25em या 125% का font-size इस्तेमाल करने से आपको मनमुताबिक नतीजे मिलेंगे:
html {
/* 20px preferred, 16px expected: 20/16 = 1.25 */
font-size: 1.25em;
}
यहां गणित दिखाने के लिए, calc() फ़ंक्शन का भी इस्तेमाल किया जा सकता है. हालांकि, आपको अब भी यह पता होना चाहिए कि समीकरण क्या है—टारगेट साइज़ को अनुमानित साइज़ से भाग दें और फिर उसे 1em से गुणा करें:
html {
font-size: calc(20 / 16 * 1em);
}
जिन उपयोगकर्ताओं की प्राथमिकता ज़्यादा या कम है वे नतीजे पर कुछ हद तक असर डाल सकते हैं, क्योंकि अब आपका डिफ़ॉल्ट विकल्प उनकी प्राथमिकता के हिसाब से तय होता है. इस मामले में, यह उनकी प्राथमिकता का 1.25 गुना है. हालांकि, अगर आपने और उपयोगकर्ता, दोनों ने 20px के डिफ़ॉल्ट अनुरोध किए हैं और नतीजा 25px है, तो यह अजीब लग सकता है. ऐसा इसलिए, क्योंकि डिफ़ॉल्ट समय को 1.25 से फिर से अडजस्ट किया गया है. यह वह साइज़ है जिसके लिए किसी ने अनुरोध नहीं किया था.
दूसरा विकल्प: clamp() को काम करने दें
ज़्यादा बेहतर तरीके के लिए, सीएसएस के तुलना फ़ंक्शन का इस्तेमाल किया जाता है. इसमें किसी भी तरह के गणित का इस्तेमाल नहीं किया जाता! 16px को 1em के बराबर मानने और px से em में गलत कन्वर्ज़न करने के बजाय, 1em को एक ऐसे वैरिएबल के तौर पर देखा जा सकता है जो उपयोगकर्ता की पसंद के बारे में बताता है. 1em की पिक्सल वैल्यू कुछ भी हो, font-size की max(1em, 20px) वैल्यू हमेशा आपके डिज़ाइन की पसंद (20px) और उपयोगकर्ता की पसंद (1em) में से बड़ी वैल्यू दिखाएगी. इससे उपयोगकर्ता को बड़े फ़ॉन्ट साइज़ चुनने का विकल्प मिलता है, लेकिन छोटे फ़ॉन्ट साइज़ चुनने का विकल्प नहीं मिलता.
clamp() फ़ंक्शन पर स्विच करके, उपयोगकर्ता को दोनों दिशाओं में स्केल करने की अनुमति दी जा सकती है. ऐसा तब किया जाता है, जब उसका पसंदीदा साइज़ आपके चुने गए डिफ़ॉल्ट साइज़ से बहुत अलग हो. उदाहरण के लिए, clamp(1em, 20px, 1.25em) का font-size, डिफ़ॉल्ट रूप से 20px पर सेट होगा. ऐसा तब तक होगा, जब तक यह उपयोगकर्ता के डिफ़ॉल्ट से ज़्यादा है. हालांकि, यह उपयोगकर्ता के डिफ़ॉल्ट के 125% से ज़्यादा नहीं होना चाहिए.
इससे, आपके डिज़ाइन को प्राथमिकता मिलती है, जब वह उपयोगकर्ता की पसंद के करीब होता है. हालांकि, अगर उपयोगकर्ता की पसंद तय की गई सीमा से बाहर होती है, तो उसे प्राथमिकता मिलती है. इसमें कन्वर्ज़न से जुड़ी कोई गणित शामिल नहीं है. साथ ही, उपयोगकर्ता की पसंद के साइज़ के बारे में कोई अनुमान नहीं लगाया जाता है. इसके अलावा, डिज़ाइनर और उपयोगकर्ता की वैल्यू को गुणा नहीं किया जाता है.
इसे html एलिमेंट पर रूट font-size के तौर पर सेट करके, अब बातचीत के बाद तय किए गए मूल साइज़ के तौर पर, साइट पर कहीं भी 1rem को रेफ़रंस किया जा सकता है.
रिस्पॉन्सिवनेस जोड़ना
इस font-size को व्यूपोर्ट के हिसाब से अडजस्ट होने वाला बनाने के लिए, मीडिया क्वेरी या कंटेनर क्वेरी के ब्रेकपॉइंट जोड़े जा सकते हैं. उदाहरण के लिए, स्क्रीन के साइज़ के हिसाब से क्लैंप की गई वैल्यू को बदला जा सकता है:
html {
font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
@media (width > 30em) { --base-font-size: 18px; }
@media (width > 45em) { --base-font-size: 20px; }
}
दूसरा विकल्प, स्टैटिक बेस वैल्यू में व्यूपोर्ट या कंटेनर यूनिट जोड़ना है:
html {
font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}
vw (व्यूपोर्ट की चौड़ाई) या vi (व्यूपोर्ट का इनलाइन साइज़) यूनिट, व्यूपोर्ट के कुल साइज़ का 1% होती है. व्यूपोर्ट, ब्राउज़र का वह हिस्सा होता है जो आपकी साइट को रेंडर करता है. इसी तरह, cqw और cqi यूनिट, पेज पर मौजूद इनलाइन-साइज़ कंटेनर के 1% हिस्से को दिखाती हैं. ज़्यादा जानकारी के लिए, कंटेनर क्वेरी और यूनिट का डेमो देखें.
इस तरीके को अक्सर फ़्लूड टाइपोग्राफ़ी कहा जाता है. ऐसा इसलिए, क्योंकि व्यूपोर्ट की चौड़ाई की एक तय सीमा के दौरान font-size में होने वाला बदलाव लगातार होता है. इसके बजाय, मीडिया या कंटेनर ब्रेकपॉइंट पर एक वैल्यू से दूसरी वैल्यू पर जंप नहीं करता है. हालांकि, ट्रांज़िशन के स्मूद होने से भ्रमित न हों. यह अंतर आम तौर पर सिर्फ़ टेस्टिंग के दौरान दिखता है. ऐसा तब होता है, जब विंडो के साइज़ को आसानी से अडजस्ट किया जाता है. उपयोगकर्ताओं को इसका असर कभी-कभार ही दिखता है. उपयोगकर्ता ब्राउज़र का साइज़ या ज़ूम लेवल नियमित तौर पर बदल सकते हैं. हालांकि, उन्हें इन बदलावों को धीरे-धीरे और आसानी से करना होगा, ताकि वे ब्रेकपॉइंट और व्यूपोर्ट यूनिट के बीच के अंतर को समझ सकें. इससे सिर्फ़ ट्रांज़िशन पर असर पड़ता है, साइज़ बदलने के बाद दिखने वाले नतीजे पर नहीं.
फ़्लूड फ़ॉन्ट साइज़िंग का मुख्य फ़ायदा यह है कि इससे ब्रेकपॉइंट को मैन्युअल तरीके से कैलकुलेट करने या तय करने की ज़रूरत नहीं होती. इससे किसी भी साइज़ पर इंटरपोलेट किया गया नतीजा मिलता है. आपको सिर्फ़ शुरुआती पॉइंट (16px) और बदलाव की दर सेट करनी होती है. 0.25vw, व्यूपोर्ट में हर 100px की बढ़ोतरी के लिए font-size में 0.25px की बढ़ोतरी करेगा. साथ ही, कम से कम और ज़्यादा से ज़्यादा वैल्यू भी सेट की जा सकती हैं. जब व्यूपोर्ट 1000px चौड़ा होता है, तब font-size, 16px + 2.5px या 18.5px होगा. हालांकि, यह हिसाब-किताब पूरी तरह से ब्राउज़र करता है. डेमो में इसी तरीके का इस्तेमाल किया गया है. इसमें कंटेनर के हिसाब से रिस्पॉन्सिवनेस दिखाने के लिए, cqi यूनिट का इस्तेमाल किया गया है. जब इसका इस्तेमाल रूट (html) एलिमेंट पर किया जाता है, जहां कोई कंटेनर तय नहीं किया गया है, तब भी cqi यूनिट, व्यूपोर्ट के साइज़ को दिखाती हैं.
अगर आपको किसी व्यूपोर्ट साइज़ के लिए तय किए गए font-size के हिसाब से सोचना है, तो मीडिया क्वेरी के ज़्यादा सीधे तरीके का इस्तेमाल करें. यह तरीका ज़्यादा आसान है. जब आपको इंटेंड किए गए ब्रेकपॉइंट के आधार पर व्यूपोर्ट यूनिट का हिसाब लगाना होता है, तो चीज़ें मुश्किल हो जाती हैं. कई लोग तीसरे पक्ष के टूल से वैल्यू कॉपी करके चिपकाते हैं. हालांकि, इससे मिलने वाले कोड को समझना या उसमें सीधे तौर पर बदलाव करना बहुत मुश्किल होता है. आम तौर पर, सीएसएस के लिए सबसे सही विकल्प वह होता है जो आपके इरादों को सबसे सही तरीके से दिखाता है.
चेतावनी: व्यूपोर्ट में बदलाव का मतलब हमेशा एक जैसा नहीं होता!
मीडिया क्वेरी और vi यूनिट को अलग-अलग तरीकों से लागू किया जाता है. हालांकि, दोनों तरीके व्यूपोर्ट के एक ही मेज़रमेंट पर आधारित होते हैं. अगर व्यूपोर्ट की चौड़ाई 600px है, तो 100vw की वैल्यू 600px के बराबर होगी. साथ ही, (width > 500px) मीडिया क्वेरी में मौजूद स्टाइल लागू होंगी.
लेकिन, व्यूपोर्ट के 600px चौड़ा होने का क्या मतलब है? असल में, पिक्सल का साइज़ तय नहीं होता. साथ ही, हर स्थिति में इसका मतलब एक जैसा नहीं होता. ऐसा लग सकता है कि कम पिक्सल वाला व्यूपोर्ट, छोटी स्क्रीन (जैसे कि फ़ोन) या ब्राउज़र की छोटी विंडो पर होता है. हालांकि, यह अनुमान सही नहीं है. दरअसल, ज़ूम इन करने और ब्राउज़र विंडो को छोटा करने, दोनों से मेज़र किए गए व्यूपोर्ट की चौड़ाई पर एक जैसा असर पड़ेगा. ज़ूम करने से पिक्सल का साइज़ बदल जाता है, जबकि साइज़ बदलने से ब्राउज़र का साइज़ बदल जाता है. हालांकि, दोनों से ब्राउज़र की चौड़ाई में पिक्सल की संख्या बदल जाती है. व्यूपोर्ट मेज़रमेंट से हमें मौजूदा पिक्सल साइज़ और मौजूदा ब्राउज़र विंडो के बीच संबंध के बारे में पता चलता है.
उपयोगकर्ता के लिए, ज़ूम करने और साइज़ बदलने का मकसद अलग-अलग होता है. ज़ूम लेवल बदलने वाला व्यक्ति, पेज के कॉन्टेंट को बड़ा या छोटा करने की कोशिश कर रहा है. हालांकि, ब्राउज़र का साइज़ बदलने वाला व्यक्ति, सिर्फ़ अलग-अलग स्क्रीन पर जगह मैनेज कर रहा है. उपयोगकर्ता की दिलचस्पी अलग-अलग होने के बावजूद, सीएसएस मेज़रमेंट पर नतीजे एक जैसे होते हैं. विंडो छोटी होने या पिक्सल बड़ा होने पर, ब्राउज़र की चौड़ाई में कम पिक्सल होते हैं.
इस वजह से, रिस्पॉन्सिव टाइपोग्राफ़ी भरोसेमंद नहीं होती. अगर आपके टेक्स्ट का साइज़ सिर्फ़ व्यूपोर्ट या कंटेनर के हिसाब से बदलने के लिए सेट किया गया है, तो उपयोगकर्ता के ज़ूम करने से कोई असर नहीं पड़ेगा!
व्यूपोर्ट के हिसाब से यूनिट की वैल्यू को 1vw या 100vw पर बदलने से, फ़ॉन्ट साइज़ और व्यूपोर्ट के बीच का सटीक संबंध बदल जाएगा. 1vw फ़ॉन्ट, व्यूपोर्ट के हर 100px साइज़ के लिए 1px बड़ा होगा. वहीं, 100vw फ़ॉन्ट का साइज़, व्यूपोर्ट के साइज़ के बराबर होगा. इस वैल्यू को बदलकर, फ़ॉन्ट को ब्राउज़र के हिसाब से ज़्यादा धीरे या ज़्यादा तेज़ी से बड़ा किया जा सकता है. हालांकि, व्यूपोर्ट के हिसाब से तय की गई कोई भी वैल्यू, उपयोगकर्ता के ज़ूम इन या ज़ूम आउट करने पर भी एक जैसी रहेगी. यह उपयोगकर्ता के कंट्रोल के हिसाब से नहीं बदलेगी.
इसी तरह, न तो 1vw और न ही 100vw, उपयोगकर्ता के डिफ़ॉल्ट font-size को ध्यान में रखता है.
font-size के लिए, व्यूपोर्ट या कंटेनर के हिसाब से यूनिट का इस्तेमाल करना हमेशा उपयोगकर्ता के लिए नुकसानदेह होता है. जब कोई font-size अपने कंटेनर के हिसाब से पूरी तरह से अडजस्ट हो जाता है, तो वह उपयोगकर्ता की डिफ़ॉल्ट सेटिंग या अडजस्टमेंट के हिसाब से भी अडजस्ट नहीं हो सकता. भले ही, उपयोगकर्ताओं को बेहतर अनुभव देने और उनकी सुरक्षा के लिए सभी ज़रूरी कदम उठाए गए हों, लेकिन उपयोगकर्ताओं से font-size कंट्रोल छीनने से बचना चाहिए. इससे न सिर्फ़ उपयोगकर्ता को खराब अनुभव मिलता है, बल्कि यह ऐक्सेसिबिलिटी से जुड़े उन दिशा-निर्देशों का भी उल्लंघन कर सकता है जिनका पालन करना अक्सर कानून के तहत ज़रूरी होता है. खास तौर पर, वेब कॉन्टेंट ऐक्सेस करने से जुड़े दिशा-निर्देशों के सेक्शन 1.4.4 के मुताबिक, "टेक्स्ट को बिना किसी सहायक टेक्नोलॉजी के 200 प्रतिशत तक बड़ा किया जा सकता है."
यह पक्का करने का तरीका कि font-size वैल्यू, ज़ूम करने पर भी दिखें
यह पक्का करने के लिए कि व्यूपोर्ट के हिसाब से तय की गई font-size, ज़ूम करने पर रिस्पॉन्सिव हो, व्यूपोर्ट के हिसाब से तय की गई वैल्यू को किसी अन्य वैल्यू में बदलाव के तौर पर लागू करना होगा. सीएसएस में, calc() फ़ंक्शन या गणित के किसी अन्य फ़ंक्शन का इस्तेमाल करके ऐसा किया जा सकता है. जैसे, min(), max(), और clamp(). calc(16px + 1vw) का font-size, व्यूपोर्ट के साइज़ और पिक्सल के मौजूदा (ज़ूम के हिसाब से) साइज़, दोनों पर आधारित होता है. ज़ूम करने पर, vw यूनिट पर कोई असर नहीं पड़ेगा. हालांकि, बुनियादी वैल्यू पर असर पड़ेगा.
इससे आपको एक ऐसा font-size मिलता है जो व्यूपोर्ट के साइज़ और उपयोगकर्ता की ज़ूम सेटिंग, दोनों के हिसाब से काम करता है. अगर उपयोगकर्ता 200% पर ज़ूम करता है, तो बेस वैल्यू दोगुनी (32px) हो जाएगी. हालांकि, रिस्पॉन्सिव वैल्यू में कोई बदलाव नहीं होगा. 1000px व्यूपोर्ट में, आपको शुरुआत में 16px + 10px = 26px का font-size मिलेगा. हालांकि, 200% ज़ूम करने पर, फ़ॉन्ट का साइज़ सिर्फ़ 42px तक बढ़ेगा, जो 160% से थोड़ा ज़्यादा है. यह समस्या गंभीर नहीं लग सकती, लेकिन font-size जितना ज़्यादा व्यूपोर्ट पर आधारित होगा, ज़ूम करने की सुविधा उतनी ही कम असरदार होगी.
छोटी स्क्रीन पर, font-size मुख्य रूप से बेस पिक्सल वैल्यू से मिलेगा. साथ ही, यह ज़ूम करने पर अच्छी तरह से काम करेगा. हालांकि, बड़ी स्क्रीन पर व्यू पोर्ट का साइज़, रेंडर किए गए फ़ॉन्ट साइज़ का ज़्यादा हिस्सा हो जाता है. इससे ज़ूम करने की सुविधा कम असरदार हो जाती है. यह तब ज़्यादा खतरनाक हो जाता है, जब 500% ज़ूम (ज़्यादातर ब्राउज़र में ज़्यादा से ज़्यादा ज़ूम) करने पर भी, WCAG 1.4.4 के मुताबिक फ़ॉन्ट साइज़ में 200% की बढ़ोतरी नहीं होती. हालांकि, इससे पहले भी ज़ूम के काम न करने से परेशानी हो सकती है.
0 से 2600px तक चौड़ा होता है. font-size के लिए वर्टिकल ऐक्सिस भी पिक्सल में है. इससे calc(17px + 2.5vw) का नतीजा दिखता है. 500% ज़ूम लाइन, व्यूपोर्ट की चौड़ाई वाले हॉरिज़ॉन्टल ऐक्सिस का इस्तेमाल करती है. हालांकि, वर्टिकल ऐक्सिस को प्रतिशत के तौर पर दिखाती है.
ग्राफ़ के बाईं ओर (0 व्यूपोर्ट की चौड़ाई) पर, 500% ज़ूम का पूरा असर दिखता है. हालांकि, ब्राउज़र का साइज़ बढ़ने पर यह असर कम हो जाता है. साथ ही, (ज़ूम नहीं किए जा सकने वाले) व्यूपोर्ट यूनिट, font-size में ज़्यादा अहम भूमिका निभाती हैं. जब ब्राउज़र की चौड़ाई 2040px होती है, तब ज़्यादा से ज़्यादा 500% ज़ूम करने पर, फ़ॉन्ट के साइज़ में सिर्फ़ 200% की बढ़ोतरी होती है. इसके बाद, 200% फ़ॉन्ट-ज़ूम की सुविधा काम नहीं करती.
इस कैलकुलेशन को clamp() फ़ंक्शन में ले जाकर, कम से कम और ज़्यादा से ज़्यादा वैल्यू सेट की जा सकती हैं. इससे ऐसी सीमाएं तय की जा सकती हैं जिनसे यह पक्का किया जा सकता है कि टेक्स्ट को ज़ूम किया जा सके. मैक्सवेल बारवियन के मुताबिक:
अगर सबसे बड़े फ़ॉन्ट का साइज़, सबसे छोटे फ़ॉन्ट के साइज़ के 2.5 गुना से कम या उसके बराबर है, तो टेक्स्ट हमेशा WCAG SC 1.4.4 के मुताबिक होगा. कम से कम सभी मॉडर्न ब्राउज़र पर ऐसा होगा.
@media और @container क्वेरी, vw और cqw यूनिट के मेज़रमेंट पर आधारित होती हैं. इसलिए, फ़ॉन्ट का साइज़ बदलने के लिए ब्रेकपॉइंट का इस्तेमाल करते समय, यही लॉजिक लागू होता है. ज़ूम करने की सुविधा तब काम नहीं करती, जब इमेज का साइज़ बहुत ज़्यादा बढ़ जाता है. यहां दिए गए विज़ुअलाइज़ेशन में, इन वैल्यू के इंटरैक्ट करने के तरीके को आज़माया जा सकता है:
यह कैसे पक्का करें कि font-size वैल्यू, उपयोगकर्ता की डिफ़ॉल्ट सेटिंग के हिसाब से काम कर रही हैं
हालांकि, calc(16px + 1vw) अब भी उपयोगकर्ता की डिफ़ॉल्ट फ़ॉन्ट सेटिंग के हिसाब से काम नहीं करता है. इसके लिए, px के बजाय em या rem यूनिट का इस्तेमाल करके, आधार या कम से कम और ज़्यादा से ज़्यादा वैल्यू सेट की जा सकती हैं. इन सभी को एक साथ रखने पर, आपको एक ऐसा नतीजा मिलता है जो लिंक किए गए डेमो से मेल खाता है:
html {
font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}
ध्यान दें कि:
- कम से कम और ज़्यादा से ज़्यादा, दोनों के लिए
emयूनिट का इस्तेमाल किया जाता है. ये यूनिट, उपयोगकर्ता की पसंद के हिसाब से तय होती हैं. साथ ही, ज़ूम करने पर ये बदल जाती हैं. - ज़ूम पर ज़्यादा असर न पड़े, इसलिए अतिरिक्त
vwवैल्यू को कम से कम रखा जाता है. - ज़्यादा से ज़्यादा साइज़ (
1.125em), कम से कम साइज़ (1em) के 2.5 गुना से काफ़ी कम है. इससे यह पक्का होता है कि200%की असरदारfont-sizeवैल्यू हमेशा उपलब्ध रहेगी.
pow() के साथ टाइपोग्राफ़िक स्केल
ज़्यादातर डिज़ाइन में, एक से ज़्यादा फ़ॉन्ट साइज़ का इस्तेमाल किया जाता है! टाइपोग्राफ़िक स्केल से, फ़ॉन्ट के अलग-अलग साइज़ के बीच के संबंध के बारे में पता चलता है. इसे बेस साइज़ और मल्टीप्लायर की सीरीज़ के तौर पर दिखाया जा सकता है, ताकि अन्य साइज़ का हिसाब लगाया जा सके. सीएसएस, medium कीवर्ड के हिसाब से टाइपोग्राफ़िक स्केल उपलब्ध कराता है. यह कीवर्ड, उपयोगकर्ता के फ़ॉन्ट साइज़ की प्राथमिकता या 16px के डिफ़ॉल्ट फ़ॉन्ट साइज़ को दिखाता है. कीवर्ड स्केल की पूरी जानकारी यहां दी गई है:
xx-small: 3/5 (0.6)x-small: 3/4 (0.75)small: 8/9 (0.89)medium: 1 (यह बेस साइज़ है, जिससे अन्य साइज़ को गुणा किया जाता है)large: 6/5 (1.2)x-large: 3/2 (1.5)xx-large: 2/1 (2)xxx-large: 3/1 (3)
यह स्केल, रूट font-size के बजाय उपयोगकर्ता के डिफ़ॉल्ट पर आधारित होता है. इसलिए, साइट का रूट font-size बदलने पर यह ठीक से काम नहीं करता. ज़्यादातर लेखक, कस्टम प्रॉपर्टी का इस्तेमाल करके मिलते-जुलते टाइप स्केल को फिर से बनाते हैं. कभी-कभी वे टी-शर्ट के साइज़ के नामों का इस्तेमाल करते हैं, तो कभी-कभी वे गणितीय स्केल के ऊपर और नीचे की सीरीज़ को प्राथमिकता देते हैं. सामान्य अनुपात के आधार पर इन स्केल को जनरेट करने के लिए, तीसरे पक्ष के कई टूल उपलब्ध हैं. इनमें से ज़्यादातर टूल, वेस्टर्न म्यूज़िकल स्केल से लिए गए हैं:
html {
/* musical ratios */
--minor-second: calc(16/15);
--major-second: calc(9/8);
--minor-third: calc(6/5);
--major-third: calc(5/4);
--perfect-fourth: calc(4/3);
--augmented-fourth: sqrt(2);
--perfect-fifth: calc(3/2);
--major-sixth: calc(5/3);
/* the golden ratio*/
--golden-ratio: calc((1 + sqrt(5)) / 2);
}
हालांकि, सीएसएस में अपना स्केल बनाने के लिए, आपको बाहरी टूल की ज़रूरत नहीं है. नया pow() फ़ंक्शन, आपके लिए स्केल जनरेट कर सकता है. इसमें 1rem को आपके बेस साइज़ के तौर पर इस्तेमाल किया जाता है!
html {
/* choose a ratio */
--scale: 1.2;
/* generate the scale using pow() */
--xx-small: calc(1rem * pow(var(--scale), -0.5));
--x-small: calc(1rem * pow(var(--scale), -0.25));
--small: calc(1rem * pow(var(--scale), -0.125));
--medium: 1rem;
--large: calc(1rem * pow(var(--scale), 1));
--x-large: calc(1rem * pow(var(--scale), 2));
--xx-large: calc(1rem * pow(var(--scale), 3));
--xxx-large: calc(1rem * pow(var(--scale), 4));
/* change the ratio for different viewport sizes */
@media (width > 50em) {
--scale: var(--perfect-fourth);
}
}
स्केल को एक जैसा रखने के लिए, आपको पूरे चरणों का इस्तेमाल करने की ज़रूरत नहीं है. दरअसल, सामान्य 12pt टाइपोग्राफ़ी स्केल में हर चरण के लिए, करीब पांच फ़्रैक्शन का इस्तेमाल किया जाता है. यहां बड़े साइज़ में स्केल के पूरे चरणों का इस्तेमाल किया जाता है, जबकि छोटे साइज़ में स्केल को धीरे-धीरे बढ़ाने के लिए फ़्रैक्शन का इस्तेमाल किया जाता है.
सीएसएस मिक्सइन और फ़ंक्शन की मदद से, उस लॉजिक को और भी छोटा किया जा सकता है. वहीं, progress() जैसे अन्य बिल्ट-इन टूल की मदद से, ऐसे स्केल बनाना आसान हो जाता है जो एक वैल्यू से दूसरी वैल्यू में आसानी से अडजस्ट हो जाते हैं. हालांकि, इस डेमो में उन सुविधाओं के बारे में नहीं बताया गया है.
पेज पर मौजूद कंटेनर के साइज़ के हिसाब से जवाब देना
vw या vi की जगह cqi यूनिट का इस्तेमाल करके, इन सभी कैलकुलेशन को कंटेनर क्वेरी में इस्तेमाल किया जा सकता है. हालांकि, इससे उपयोगकर्ता की font-size को html एलिमेंट पर रखने में भी मदद मिलती है, ताकि टाइप-सेटिंग वाला हर कंटेनर, उपयोगकर्ता की पसंद को 1rem के तौर पर वापस देख सके. डेमो में, आपको दिखेगा कि पूरे टाइप स्केल को ग्लोबल टाइप के लिए, रूट html एलिमेंट के बजाय body पर लागू किया गया है. इसके बाद, type-set एट्रिब्यूट वाले हर एलिमेंट के लिए, कंटेनर के साइज़ के हिसाब से रीसेट किया गया है.
कंटेनर के हिसाब से फ़ॉन्ट के साइज़ तय करने पर, हमेशा इस तरह की समस्या आती है. इससे आपको कॉन्टेक्स्ट में मौजूद हर एलिमेंट के लिए, फ़ॉन्ट के साइज़ को ज़्यादा आसानी से सेट करने में मदद मिलती है. हालांकि, इससे पूरे पेज पर फ़ॉन्ट के साइज़ में एकरूपता नहीं रहती. आपके लिए कौनसी सुविधा ज़्यादा ज़रूरी है, यह इस बात पर निर्भर करेगा कि आपको किस तरह की समस्या हल करनी है. यह भी ध्यान रखें कि फ़्लूड टाइपोग्राफ़ी एक तरह का समझौता है. इससे ज़ूम जैसे उपयोगकर्ता कंट्रोल कम असरदार हो जाते हैं!
रिस्पॉन्सिव टाइपोग्राफ़ी और टाइपोग्राफ़िक स्केल, डिज़ाइनर के लिए बेहतरीन टूल हैं. हालांकि, अगर आपको इनकी ज़रूरत नहीं है, तो चीज़ों को ज़्यादा मुश्किल बनाने की कोई ज़रूरत नहीं है. उपयोगकर्ता के लिए डिफ़ॉल्ट और पहले से मौजूद टाइप स्केल भी एक बेहतरीन विकल्प है! हालांकि, अगर आपने रिस्पॉन्सिव (या फ़्लूड) टाइपोग्राफ़ी चुनी है, तो यह ज़रूर देख लें कि उपयोगकर्ता की डिफ़ॉल्ट सेटिंग और ज़ूम सेटिंग के हिसाब से नतीजे कैसे दिखते हैं. आनंद लें!