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

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

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

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

टेक्स्ट का साइज़

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

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

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

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

स्क्रीन का साइज़ बढ़ने पर, मीडिया क्वेरी का इस्तेमाल करके 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;
}

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

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

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

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

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

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

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

रिस्पॉन्सिव टेक्स्ट (स्क्रीन के हिसाब से साइज़ बदलने वाले टेक्स्ट) में महारत हासिल करने के बाद, रिस्पॉन्सिव इमेज के बारे में ज़्यादा जानें.

आपने जो सीखा है उसकी जांच करें

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