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

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

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

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

लेख का आकार

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

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

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

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

स्क्रीन का साइज़ बढ़ने पर, 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 एलिमेंट जोड़ें जो आपकी वेब फ़ॉन्ट फ़ाइल का रेफ़रंस देता हो. preload की वैल्यू वाला rel एट्रिब्यूट, ब्राउज़र को उस फ़ाइल को प्राथमिकता देने के लिए कहता है. font वैल्यू वाली as एट्रिब्यूट से, ब्राउज़र को पता चलता है कि यह किस तरह की फ़ाइल है. type एट्रिब्यूट का इस्तेमाल करके, ज़्यादा सटीक जानकारी दी जा सकती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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