मुद्रण कला

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

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

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

लेख का आकार

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

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

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

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

स्क्रीन का साइज़ बढ़ने पर, 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 से बड़ा नहीं होगा.

लाइन की लंबाई

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

रॉबर्ट ब्रिंगहर्स्ट ने अपनी क्लासिक किताब The Elements of Typographic Style में, लाइन की लंबाई (या मेज़र) के बारे में यह कहा है:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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