टाइपाेग्राफ़ी

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

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

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

ध्यान दें: यह भी हो सकता है कि आपको उपयोगकर्ता की मुख्य भाषा का इस्तेमाल करना पड़े, क्योंकि ऐसा हो सकता है कि आपको बोलने के लहजे और दूसरे खास वर्णों के लिए, जगह खाली करनी पड़े. इस बारे में ज़्यादा जानने के लिए, अंतरराष्ट्रीय स्तर पर उपलब्ध कराना मॉड्यूल देखें.

लेख का आकार

यह पता लगाना मुश्किल है कि वेब पर टेक्स्ट का साइज़ कितना होना चाहिए.

अगर कोई व्यक्ति छोटी स्क्रीन का इस्तेमाल कर रहा है, तो हो सकता है कि उसकी स्क्रीन उसकी आंखों के बहुत करीब हो. जैसे, हाथ की लंबाई के बराबर दूरी पर.

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

हालांकि, यह पक्का नहीं किया जा सकता कि कोई व्यक्ति स्क्रीन से कितनी दूर है, लेकिन टेक्स्ट के ऐसे साइज़ का इस्तेमाल किया जा सकता है जो सही साबित हो. छोटी स्क्रीन के लिए टेक्स्ट के छोटे साइज़ और बड़ी स्क्रीन के लिए टेक्स्ट के बड़े साइज़ का इस्तेमाल करें.

स्क्रीन के साइज़ के बड़े होने पर, font-size प्रॉपर्टी को बदलने के लिए मीडिया क्वेरी का इस्तेमाल किया जा सकता है.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

टेक्स्ट को स्केल करना

खास ब्रेकपॉइंट पर, टेक्स्ट के तय साइज़ के बीच स्विच करने पर, टेक्स्ट का साइज़ अचानक बदल जाता है. उपयोगकर्ता के डिवाइस की चौड़ाई के हिसाब से टेक्स्ट का साइज़ तय करना, रिस्पॉन्सिव डिज़ाइन का एक बेहतर तरीका है.

सीएसएस में vw यूनिट का मतलब “व्यूपोर्ट की चौड़ाई” होता है. फ़ॉन्ट साइज़ को व्यूपोर्ट की चौड़ाई से जोड़ने का मतलब है कि टेक्स्ट, ब्राउज़र की चौड़ाई के हिसाब से बड़ा और छोटा होगा. इससे यह अनुमान लगाना मुश्किल हो जाता है कि किसी खास चौड़ाई पर टेक्स्ट का साइज़ क्या होगा. हालांकि, आपको पता है कि टेक्स्ट का साइज़, उपयोगकर्ता के ब्राउज़र की चौड़ाई के हिसाब से सही होगा.

यह ज़रूरी है कि फ़ॉन्ट साइज़ के एलान में, vw का इस्तेमाल न किया जाए.

यह न करें

html {
  font-size: 2.5vw;
}

ऐसा करने पर, उपयोगकर्ता टेक्स्ट का साइज़ नहीं बदल पाएगा. अगर आपने टेक्स्ट में em, rem या ch जैसी रिलेटिव यूनिट का इस्तेमाल किया है, तो टेक्स्ट का साइज़ बदला जा सकता है. इसके लिए, सीएसएस calc() फ़ंक्शन का इस्तेमाल किया जा सकता है.

यह करें

html {
  font-size: calc(0.75rem + 1.5vw);
}

ब्राउज़र को हिसाब लगाने दें. इससे यह अनुमान लगाना मुश्किल हो जाता है कि किसी खास चौड़ाई पर टेक्स्ट का साइज़ क्या होगा. हालांकि, आपको पता है कि टेक्स्ट का साइज़ सही रेंज में होगा. उपयोगकर्ता का ब्राउज़र, टेक्स्ट के साइज़ का सटीक हिसाब लगाता है.

लेकिन अब ऐसी संभावना है कि छोटी स्क्रीन पर टेक्स्ट बहुत छोटा और चौड़ी स्क्रीन पर बहुत बड़ा हो.

टेक्स्ट को क्लैंप करना

शायद आपको अपने टेक्स्ट को बहुत छोटा या बहुत बड़ा नहीं करना है. सीएसएस clamp() फ़ंक्शन का इस्तेमाल करके, यह कंट्रोल किया जा सकता है कि स्केलिंग कहां से शुरू और कहां खत्म हो. इससे स्केलिंग को किसी खास रेंज में “क्लैंप” किया जाता है.

clamp() फ़ंक्शन, calc() फ़ंक्शन की तरह ही काम करता है. हालांकि, इसमें तीन वैल्यू डाली जा सकती हैं. बीच की वैल्यू वही होती है जो calc() को पास की जाती है. शुरुआती वैल्यू से, फ़ॉन्ट के कम से कम साइज़ का पता चलता है. इस मामले में, यह वैल्यू 1rem है, ताकि फ़ॉन्ट का साइज़, उपयोगकर्ता के पसंदीदा साइज़ से कम न हो. क्लोज़िंग वैल्यू से, फ़ाइल का ज़्यादा से ज़्यादा साइज़ पता चलता है.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

अब टेक्स्ट का साइज़, उपयोगकर्ता की स्क्रीन के हिसाब से छोटा या बड़ा हो जाता है. हालांकि, टेक्स्ट का साइज़ कभी भी 1rem से कम या 2rem से ज़्यादा नहीं होगा.

लाइन की लंबाई

वेब प्रिंट नहीं है, लेकिन हम प्रिंट की दुनिया से सबक सीख सकते हैं और उन्हें वेब पर लागू कर सकते हैं.

रॉबर्ट ब्रिंगहर्स्ट ने अपनी क्लासिक किताब टाइपोग्राफ़िक स्टाइल के एलिमेंट में, लाइन की लंबाई (या मेज़र) के बारे में यह कहा है:

आम तौर पर, 45 से 75 वर्णों को एक कॉलम वाले पेज के लिए, टेक्स्ट साइज़ में सेरिफ़ टेक्स्ट फ़ेस में सेट की गई लाइन की लंबाई के तौर पर माना जाता है. 66 वर्णों की इस लाइन को बेहतर माना जाता है. इसमें अक्षरों और स्पेस, दोनों को शामिल किया जाता है. एक से ज़्यादा कॉलम के लिए, 40 से 50 वर्ण का औसत बेहतर होता है.

सीएसएस में सीधे तौर पर लाइन की लंबाई सेट नहीं की जा सकती. कोई line-length प्रॉपर्टी नहीं है. हालांकि, कंटेनर की चौड़ाई को सीमित करके, टेक्स्ट को बहुत चौड़ा होने से रोका जा सकता है. इसके लिए, max-inline-size प्रॉपर्टी का इस्तेमाल करें.

लाइन की लंबाई को px जैसी किसी तय इकाई के साथ सेट न करें. उपयोगकर्ता अपने फ़ॉन्ट का साइज़ बढ़ा सकते हैं और उसे छोटा कर सकते हैं. साथ ही, लाइन की लंबाई उसी हिसाब से अडजस्ट होनी चाहिए. rem या ch जैसी रिलेटिव यूनिट का इस्तेमाल करें.

यह न करें

article {
  max-inline-size: 700px;
}

यह करें

article {
  max-inline-size: 66ch;
}

चौड़ाई के लिए ch यूनिट का इस्तेमाल करने से, नई लाइनें उस फ़ॉन्ट साइज़ के 66वें वर्ण पर रैप हो जाएंगी.

लाइन की ऊंचाई

सीएसएस में line-length प्रॉपर्टी नहीं है, लेकिन line-height प्रॉपर्टी है.

टेक्स्ट की छोटी लाइनों में line-height की बड़ी वैल्यू हो सकती हैं. हालांकि, अगर टेक्स्ट की लंबी लाइनों के लिए बड़ी line-height वैल्यू का इस्तेमाल किया जाता है, तो पाठक की आंखों को एक लाइन के आखिर से अगली लाइन की शुरुआत तक जाने में मुश्किल होती है.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

अपने line-height एलान के लिए, यूनिट के बिना वैल्यू का इस्तेमाल करें. इससे यह पक्का होता है कि लाइन की ऊंचाई, font-size के हिसाब से हो.

यह न करें

line-height: 24px;

यह करें

line-height: 1.5;

कॉम्बिनेशन और स्केल

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

वेब फ़ॉन्ट

टाइपफ़ेस आपके शब्दों को बोलने की आवाज़ की तरह होता है. वेब पर सबसे ज़्यादा समय तक फ़ॉन्ट के बहुत कम विकल्प उपलब्ध थे. सिर्फ़ सिस्टम फ़ॉन्ट इस्तेमाल किए जा सकते थे. हालांकि, अब ऐसा वेब फ़ॉन्ट चुना जा सकता है जो आपके कॉन्टेंट के टेक्स्ट से मेल खाता हो.

ब्राउज़र को यह बताने के लिए कि वे आपकी वेब फ़ॉन्ट फ़ाइलें कहां ढूंढें, @font-face का इस्तेमाल करें. वेब फ़ॉन्ट फ़ॉर्मैट के तौर पर woff2 का इस्तेमाल करें. यह सुविधा अच्छी तरह से काम करती है और इससे परफ़ॉर्मेंस में काफ़ी सुधार होता है.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

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

फ़ॉन्ट लोड हो रहा है

आपके पास यह अनुरोध करने का विकल्प होता है कि ब्राउज़र, फ़ॉन्ट फ़ाइल को जल्द से जल्द डाउनलोड करना शुरू कर दें. अपने दस्तावेज़ के head में ऐसा link एलिमेंट जोड़ें जो आपकी वेब फ़ॉन्ट फ़ाइल का रेफ़रंस देता हो. rel एट्रिब्यूट की वैल्यू preload होने पर, ब्राउज़र उस फ़ाइल को प्राथमिकता देता है. font वैल्यू वाला as एट्रिब्यूट, ब्राउज़र को बताता है कि यह किस तरह की फ़ाइल है. type एट्रिब्यूट की मदद से, ज़्यादा जानकारी दी जा सकती है.

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

फ़ॉन्ट फ़ाइलों को खुद होस्ट करने पर भी, आपको crossorigin एट्रिब्यूट शामिल करना होगा.

ब्राउज़र को सिस्टम फ़ॉन्ट से वेब फ़ॉन्ट पर स्विच करने का तरीका बताने के लिए, सीएसएस font-display प्रॉपर्टी का इस्तेमाल करें. आपके पास यह चुनने का विकल्प होता है कि वेब फ़ॉन्ट लोड होने तक कोई टेक्स्ट न दिखाया जाए. आपके पास सिस्टम फ़ॉन्ट को तुरंत दिखाने का विकल्प है. इसके बाद, वेब फ़ॉन्ट लोड होने के बाद उस पर स्विच किया जा सकता है. दोनों रणनीतियों के अपने नुकसान हैं. अगर कोई टेक्स्ट दिखाने से पहले, वेब फ़ॉन्ट के लोड होने का इंतज़ार किया जाता है, तो हो सकता है कि उपयोगकर्ताओं को खाली पेज पर बहुत देर तक इंतज़ार करना पड़े. अगर टेक्स्ट को पहले सिस्टम फ़ॉन्ट में दिखाया जाता है और फिर वेब फ़ॉन्ट पर स्विच किया जाता है, तो उपयोगकर्ताओं को पेज पर कॉन्टेंट में अचानक बदलाव दिख सकता है.

ध्यान दें: @font-face नियम में size-adjust का इस्तेमाल करके, टेक्स्ट के एक जगह से दूसरी जगह जाने पर होने वाले असर को कम किया जा सकता है.

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

अगर आपको वेब फ़ॉन्ट के लोड होने के बाद भी, सिस्टम फ़ॉन्ट को वेब फ़ॉन्ट से बदलना है, तो font-display की वैल्यू के तौर पर swap का इस्तेमाल करें.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

अगर आपको टेक्स्ट रेंडर होने के बाद भी सिस्टम फ़ॉन्ट का इस्तेमाल करना है, तो fallback की font-display वैल्यू का इस्तेमाल करें.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

वैरिएबल फ़ॉन्ट

अगर एक ही टाइपफ़ेस के कई अलग-अलग वेट या स्टाइल का इस्तेमाल किया जा रहा है, तो हो सकता है कि आपको अलग-अलग फ़ॉन्ट फ़ाइलों का इस्तेमाल करना पड़े. जैसे, हर वेट या स्टाइल के लिए एक अलग फ़ॉन्ट फ़ाइल.

वैरिएबल फ़ॉन्ट, एक फ़ाइल का इस्तेमाल करके इस समस्या को हल करते हैं. वैरिएबल फ़ॉन्ट फ़ाइल, सामान्य, बोल्ड, एक्स्ट्रा बोल्ड वगैरह के लिए अलग-अलग फ़ाइलों के बजाय, रिस्पॉन्सिव होती है. इसमें वह सारी जानकारी होती है जो अलग-अलग वेट या स्टाइल में दिखाने के लिए ज़रूरी होती है.

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

ध्यान दें: अगर font-face प्रॉपर्टी के लिए system-ui वैल्यू का इस्तेमाल करके एलिमेंट को स्टाइल किया जा रहा है, तो आपको किसी भी फ़ॉन्ट फ़ाइल को डाउनलोड किए बिना, वैरिएबल फ़ॉन्ट के सभी फ़ायदे मिल सकते हैं. अब ज़्यादा से ज़्यादा सिस्टम फ़ॉन्ट, वैरिएबल फ़ॉन्ट हैं.

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

अब आपने रिस्पॉन्सिव टेक्स्ट के बारे में पूरी जानकारी हासिल कर ली है. अब रिस्पॉन्सिव इमेज के बारे में जानने का समय आ गया है.

देखें कि आपको कितना समझ आया है

टाइपोग्राफ़ी के बारे में अपनी जानकारी की जांच करें

व्यूपोर्ट में टेक्स्ट को रैप करने के लिए, स्टाइल जोड़ना ज़रूरी है.

सही

स्टाइल जोड़ना ज़रूरी नहीं है.

गलत

टेक्स्ट, डिफ़ॉल्ट रूप से किसी अन्य स्टाइल के बिना रैप हो जाएगा.

clamp(), फ़्लूइड टाइपोग्राफ़ी के लिए काम का है, क्योंकि

इससे calc() फ़ंक्शन को आसानी से एम्बेड किया जा सकता है

यह सही है, लेकिन टाईपोग्राफ़ी के लिए clamp() का इस्तेमाल करना सही नहीं है.

यह ब्राउज़र के साथ बेहतर तरीके से काम करता है.

यह सही है, लेकिन टाईपोग्राफ़ी के लिए clamp() का इस्तेमाल करना सही नहीं है.

इसकी मदद से, फ़ॉन्ट साइज़ को कम से कम और ज़्यादा से ज़्यादा वैल्यू के बीच लॉक किया जा सकता है. साथ ही, इसमें स्केलबिल मीडियम वैल्यू भी दी जाती है.

टेक्स्ट का साइज़ बहुत छोटा या बहुत बड़ा न रखें. साथ ही, फ़ॉन्ट साइज़ को आसानी से स्केल करने की सुविधा दें.

इससे गणित आसान हो जाता है.

फिर से कोशिश करें.

इस गाइड में किस तरह की line-height वैल्यू का सुझाव दिया गया था?

24px

पोस्ट में साफ़ तौर पर बताया गया है कि line-height के लिए पिक्सल वैल्यू का इस्तेमाल न करें.

2rem

रेम रिलेटिव वैल्यू होती हैं, लेकिन फिर भी इनसे बहुत छोटी या बहुत बड़ी लाइन-हाइट बन सकती है.

1.5

बिना यूनिट वाली मिलती-जुलती वैल्यू इस्तेमाल करने का सुझाव दिया जाता है.

2vw

line-height के तौर पर व्यूपोर्ट यूनिट से समस्याएं हो सकती हैं.

font-display क्या करता है?

ब्राउज़र को सिस्टम फ़ॉन्ट से वेब फ़ॉन्ट पर स्विच करने का तरीका बताता है.

कस्टम फ़ॉन्ट पर ट्रांज़िशन करने में मदद करता है.

फ़ॉन्ट को block या inline-block पर सेट करने की अनुमति देता है.

फ़ॉन्ट में डिसप्ले टाइप नहीं होते.

फ़ॉन्ट छिपा है या नहीं, इससे जुड़े बदलाव.

फ़ॉन्ट छिपाए नहीं जा सकते.

रिमोट फ़ॉन्ट लोड करने के दौरान, उपयोगकर्ता अनुभव को कंट्रोल करने की सुविधा देता है.

इससे लेखकों को उनकी पसंद के मुताबिक फ़ॉन्ट लोड करने का अनुभव मिलता है.