टेक्स्ट और टाइपोग्राफ़ी

द सीएसएस पॉडकास्ट - 036: टेक्स्ट और टाइपोग्राफ़ी

टेक्स्ट, वेब के अहम हिस्सों में से एक है.

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

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

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

इसके बाद, हम font-family, font-style, font-weight, और font-size जैसी ज़रूरी सीएसएस फ़ॉन्ट प्रॉपर्टी के बारे में जानकारी देंगे. इन बुनियादी बातों से, टेक्स्ट के स्टाइल में बदलाव करने और उसे आसानी से पढ़ने लायक बनाने में मदद मिलती है.

हम वैरिएबल फ़ॉन्ट और स्यूडो-एलिमेंट जैसे बेहतर विषयों पर आखिरी फ़ैसला लेने से पहले, text-indent और word-spacing जैसी पैराग्राफ़ की प्रॉपर्टी के बारे में भी बताएंगे. इन विषयों से टाइपोग्राफ़ी कंट्रोल को बेहतर बनाया जा सकता है.

यहां काम के उदाहरण और सलाह दी जाएंगी, ताकि आप सीएसएस की तकनीकों को बेहतर तरीके से समझ सकें और उन्हें अपना सकें.

@font-face नियम

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

सिंटैक्स

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

जानकारी

ascent-override

बेसलाइन के ऊपर मौजूद स्पेस को प्रभावित करते हुए, एसेंट मेट्रिक को ज़रूरत के मुताबिक बनाता है.

descent-override

बेसलाइन के नीचे के स्पेस पर असर डालते हुए, डिसेंट मेट्रिक को अडजस्ट करता है.

font-display

डाउनलोड की स्थिति के आधार पर फ़ॉन्ट के डिसप्ले व्यवहार को कंट्रोल करता है.

font-family

फ़ॉन्ट से जुड़ी प्रॉपर्टी में इस्तेमाल के लिए फ़ॉन्ट को नाम देता है.

font-stretch

��्वीकार की जाने वाली हॉरिज़ॉन्टल स्केलिंग सेट करता है, जिसे सिंगल वैल्यू या रेंज के तौर पर सेट किया जाता है.

font-style

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

font-weight

फ़ॉन्ट की मोटाई या उपलब्ध वेट की सीमा को तय करता है.

font-feature-settings

OpenType फ़ॉन्ट सुविधाओं का ऐक्सेस देता है.

font-variation-settings

वैरिएबल फ़ॉन्ट सेटिंग पर बेहतर कंट्रोल देता है.

line-gap-override

फ़ॉन्ट के डिफ़ॉल्ट लाइन गैप को बदल देता है.

size-adjust

फ़ॉन्ट की आउटलाइन और मेट्रिक पर स्केलिंग फ़ैक्टर लागू करता है.

src

फ़ॉन्ट सोर्स के बारे में बताता है, चाहे वह लोकल हो या रिमोट. @font-face नियम के लिए यह ज़रूरी है. src में url() और local() को जोड़ना एक सामान्य रणनीति है. यह स्थानीय फ़ॉन्ट उपलब्ध होने पर उसका इस्तेमाल करती है. इसके लिए, रिमोट फ़ॉन्ट फ़ाइल को फ़ॉलबैक के तौर पर वापस लाया जाता है. ब्राउज़र, एलान के क्रम के आधार पर संसाधनों को प्राथमिकता देते हैं. इसलिए, आम तौर पर local(), url() से पहले होता है.

unicode-range

उन वर्णों की सीमा तय करता है जिनके लिए इस फ़ॉन्ट का इस्तेमाल किया जाना चाहिए.

कंपनी का ब्यौरा

@font-face, डिज़ाइनर को पसंद के मुताबिक टाइपोग्राफ़ी इस्तेमाल करने की अनुमति देकर, उन्हें "वेब के लिए सुरक्षित" फ़ॉन्ट की सीमाओं से बचाता है. उपयोगकर्ता के डिवाइस पर फ़ॉन्ट खोजने की local() फ़ंक्शन की सुविधा से, उपयोगकर्ताओं को बेहतरीन अनुभव मिलता है. इसके लिए, इंटरनेट कनेक्शन की ज़रूरत नहीं होती.

फ़ॉन्ट MIME प्रकार

फ़ॉर्मैट	MIME टाइप
TrueType	font/ttf
OpenType	font/otf
वेब ओपन फ़ॉन्ट फ़ॉर्मैट	font/woff
वेब ओपन फ़ॉन्ट फ़ॉर्मैट 2	font/woff2

@font-face और फ़ॉन्ट-फ़ैमिली में फ़र्क़

सीएसएस में, @font-face और font-family को अक्सर उलझन होती है. हालांकि, इनका मकसद अलग-अलग होता है.

जैसा कि हमने चर्चा की है, @font-face एक नियम है, जो ऐसे कस्टम फ़ॉन्ट को तय करता है जिन्हें आपको वेब ऐप्लिकेशन में इस्तेमाल करना है. यह ब्राउज़र को बताता है कि फ़ॉन्ट कहां डाउनलोड करना है, लोड होने के दौरान उसे कैसे दिखाना है (font-display प्रॉपर्टी के साथ), और यह तय करता है कि वर्णों का कौनसा सबसेट डाउनलोड करना है (unicode-range के साथ).

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

खास जानकारी देने के लिए, @font-face एक फ़ॉन्ट की जानकारी देता है और उसे एक नाम देता है. साथ ही, font-family, एलान किए गए इस फ़���न्ट को एचटीएमएल एलिमेंट पर लागू करता है.

यहां दोनों के इस्तेमाल का उदाहरण दिया गया है:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

इस उदाहरण में, @font-face में "CustomFont" के बारे में ��ताया गया है और ब्राउज़र को बताया गया है कि इसे कहां खोजना है. इसके बाद, font-family प्रॉपर्टी उसे बॉडी एलिमेंट पर लागू करती है. साथ ही, "CustomFont" के उपलब्ध न होने पर, एरियल को फ़ॉलबैक के तौर पर इस्तेमाल किया जा सकता है.

टाइपफ़ेस बदलना

अपने टेक्स्ट का टाइपफ़ेस बदलने के लिए, font-family का इस्तेमाल करें.

font-family प्रॉपर्टी, स्ट्रिंग की ऐसी सूची स्वीकार करती है जिसे कॉमा लगाकर अलग किया गया हो. भले ही, वह खास या सामान्य फ़ॉन्ट फ़ैमिली के बारे में बताता हो. खास फ़ॉन्ट फ़ैमिली, कोट की गई स्ट्रिंग होती हैं, जैसे कि "ढूढरी", "ईबी गारमंड" या "टाइम्स न्यू रोमन". जेनरिक फ़ॉन्ट फ़ैमिली serif, sans-serif, और monospace जैसे कीवर्ड होते हैं (एमडीएन पर विकल्पों की पूरी सूची देखें). ब्राउज़र, दी गई सूची में से पहला उपलब्ध टाइपफ़ेस दिखाएगा.

font-family का इस्तेमाल करते समय, आपको कम से कम एक सामान्य फ़ॉन्ट फ़ैमिली तय करनी चाहिए. ऐसा इसलिए ज़रूरी है, ताकि अगर उपयोगकर्ता के ब्राउज़र में आपके पसंदीदा फ़ॉन्ट न मिलें, तो ऐसा किया जा सकता है. आम तौर पर, फ़ॉलबैक जेनरिक फ़ॉन्ट फ़ैमिली आपके पसंदीदा फ़ॉन्ट की तरह होनी चाहिए: अगर font-family: "Helvetica" (a San-Serif फ़ॉन्ट फ़ैमिली) का इस���तेमाल किया जा रहा है, तो आपका फ़ॉलबैक sans-serif होना चाहिए.

इटैलिक और तिरछे फ़ॉन्ट इस्तेमाल करें

टेक्स्ट को इटैलिक करें या नहीं, यह तय करने के लिए font-style का इस्तेमाल करें. font-style इनमें से कोई एक कीवर्ड स्वीकार करता है: normal, italic, और oblique.

टेक्स्ट को बोल्ड करें

टेक्स्ट को "बोल्डनेस" सेट करने के लिए, font-weight का इस्तेमाल करें. इस प्रॉपर्टी में कीवर्ड वैल्यू (normal, bold), मिलती-जुलती कीवर्ड वैल्यू (lighter, bolder), और न्यूमेरिक वैल्यू (100 से 900) को स्वीकार किया जाता है.

कीवर्ड normal और bold, क्रम से अंकीय मानों 400 और 700 के बराबर हैं.

कीवर्ड lighter और bolder को पैरंट एलिमेंट के आधार पर कैलकुलेट किया जाता है. इस वैल्यू को तय करने का तरीका दिखाने वाले आसान चार्ट के लिए, एमडीएन के रिलेटिव वेट का मतलब देखें.

टेक्स्ट का साइज़ बदलना

अपने टेक्स्ट एलिमेंट का साइज़ कंट्रोल करने के लिए, font-size का इस्तेमाल करें. इस प्रॉपर्टी में लंबाई की वैल्यू, प्रतिशत, और कुछ कीवर्ड वैल्यू डाली जा सकती हैं.

लंबाई और प्रतिशत मानों के अलावा, font-size कुछ पूरी तरह कीवर्ड मान (xx-small, x-small, small, medium, large, x-large, xx-large) और कुछ मिलते-जुलते कीवर्ड मान (smaller, larger) स्वीकार करता है. मिलते-जुलते मान पैरंट एलिमेंट के font-size के मुताबिक होते हैं.

लाइनों के बीच के स्पेस में बदलाव करना

किसी एलिमेंट की हर लाइन की ऊंचाई बताने के लिए, line-height का इस्तेमाल करें. इस प्रॉपर्टी में संख्या, लंबाई, प्रतिशत या कीवर्ड normal डाला जा सकता है. आम तौर पर, यह सलाह दी जाती है कि इनहेरिटेंस से जुड़ी समस्याओं से बचने के लिए, लंबाई या प्रतिशत के बजाय किसी संख्या का इस्तेमाल करें.

वर्णों के बीच के स्पेस में बदलाव करें

अपने टेक्स्ट में वर्णों के बीच का हॉरिज़ॉन्टल स्पेस, कंट्रोल करने के लिए letter-spacing का इस्तेमाल करें. यह प्रॉपर्टी, em, px, और rem जैसी लंबाई वाली वैल्यू स्वीकार करती है.

ध्यान दें कि तय की गई वैल्यू, वर्णों के बीच नैचुरल स्पेस को बढ़ाती है. नीचे दिए गए डेमो में, किसी एक अक्षर को चुनकर देखें कि उसके लेटरबॉक्स का साइज़ क्या है. साथ ही, यह भी देखें कि letter-spacing से अक्षर कैसे बदलता है.

शब्दों के बीच स्पेस बदलना

अपने टेक्स्ट के हर शब्द के बीच के स्पेस को बढ़ाने या घटाने के लिए, word-spacing का इस्तेमाल करें. यह प्रॉपर्टी, em, px, और rem जैसी लंबाई वाली वैल्यू स्वीकार करती है. ध्यान दें कि आपकी तय की गई लंबाई, सामान्य स्पेस के अलावा अतिरिक्त स्पेस के लिए है. इसका मतलब है कि word-spacing: 0, word-spacing: normal के बराबर है.

font शॉर्टहैंड

फ़ॉन्ट से जुड़ी कई प्रॉपर्टी एक साथ सेट करने के लिए, शॉर्टहैंड font प्रॉपर्टी का इस्तेमाल किया जा सकता है. संभावित प्रॉपर्टी की सूची ये हैं: font-family, font-size, font-stretch, font-style, font-variant, font-weight, और line-height.

इन प्रॉपर्टी को ऑर्डर करने के तरीके के बारे में जानने के लिए, एमडीएन का font लेख पढ़ें.

टेक्स्ट का केस बदलना

मौजूदा एचटीएमएल को बदले बिना, अपने टेक्स्ट के कैपिटल लेटर में बदलाव करने के लिए text-transform का इस्तेमाल करें. इस प्रॉपर्टी में ये कीवर्ड वैल्यू स्वीकार की जाती हैं: uppercase, lowercase, और capitalize.

टेक्स्ट में अंडरलाइन, ओवरलाइन, और थ्रू-लाइन जोड़ें

अपने टेक्स्ट में लाइनें जोड़ने के लिए, text-decoration का इस्तेमाल करें. आम तौर पर, अंडरलाइन का इस्तेमाल किया जाता है. हालांकि, टेक्स्ट के ऊपर या सीधे इसके ऊपर लाइनें जोड़ी जा सकती हैं!

text-decoration प्रॉपर्टी, नीचे दी गई ज़्यादा खास प्रॉपर्टी का शॉर्टहैंड है.

text-decoration-line प्रॉपर्टी में underline, overline, और line-through कीवर्ड इस्तेमाल किए जा सकते हैं. आप एक से ज़्यादा पंक्तियों के लिए एक से ज़्यादा कीवर्ड भी तय कर सकते हैं.

text-decoration-color प्रॉपर्टी, text-decoration-line की सभी सजावटों के लिए रंग सेट करती है.

text-decoration-style प्रॉपर्टी में solid, double, dotted, dashed, और wavy कीवर्ड इस्तेमाल किए जा सकते हैं.

text-decoration-thickness प्रॉपर्टी, किसी भी लंबाई की वैल्यू को स्वीकार करती है. साथ ही, text-decoration-line से सभी डेकोरेशन के लिए स्ट्रोक की चौड़ाई सेट करती है.

text-decoration प्रॉपर्टी, ऊपर दी गई सभी प्रॉपर्टी का शॉर्टहैंड है.

अपने टेक्स्ट में इंडेंट जोड़ना

अपने टेक्स्ट के ब्लॉक में इंडेंट जोड़ने के लिए, text-indent का इस्तेमाल करें. इस प्रॉपर्टी में शामिल ब्लॉक की चौड़ाई (जैसे, 10px, 2em) या उसका कुछ प्रतिशत हिस्सा होता है.

सीमा से ज़्यादा या छिपे हुए कॉन्टेंट से जुड़ी समस्या को हल करना

छिपा हुआ कॉन्टेंट कैसे दिखाया जाता है, यह बताने के लिए text-overflow का इस्तेमाल करें. इसके दो विकल्प हैं: clip (डिफ़ॉल्ट), जो ओवरफ़्लो होने पर टेक्स्ट को छोटा करता है; और ellipsis, जो ओवरफ़्लो के पॉइंट पर इलिप्सिस (...) दिखाता है.

व्हाइट स्पेस कंट्रोल करें

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

ASCII आर्ट या सावधानी से इंडेंट किए गए कोड ब्लॉक को रेंडर करने के लिए, white-space: pre का इस्तेमाल किया जा सकता है.

शब्दों को ब्रेक करने का तरीका कंट्रोल करें

word-break का इस्तेमाल करके, तय करें कि जब शब्द लाइन से बाहर चले जाएं, तब वे किस तरह "अलग-अलग" होने चाहिए. डिफ़ॉल्ट रूप से, ब्राउज़र शब्दों को विभाजित नहीं करेगा. word-break के लिए कीवर्ड वैल्यू break-all का इस्तेमाल करने पर, ब्राउज़र ज़रूरत पड़ने पर अलग-अलग वर्णों के हि��ाब से शब्दों को बांट देगा.

टेक्स्ट अलाइनमेंट बदलें

किसी ब्लॉक या टेबल-सेल एलिमेंट में, टेक्स्ट का हॉरिज़ॉन्टल अलाइनमेंट तय करने के लिए, text-align का इस्तेमाल करें. इस प्रॉपर्टी में left, right, start, end, center, justify, और match-parent कीवर्ड वैल्यू स्वीकार की जाती हैं.

वैल्यू left और right, टेक्स्ट को ब्लॉक के बाईं और दाईं ओर अलाइन करती हैं.

मौजूदा राइटिंग मोड में टेक्स्ट की शुरू और खत्म होने की जगह दिखाने के लिए, start और end का इस्तेमाल करें. इसलिए, start अंग्रेज़ी में left को मैप करता है और अरबी स्क्रिप्ट में right को मैप करता है, जो दाईं से बाईं ओर लिखा होता है (RTL). ये लॉजिकल अलाइनमेंट हैं. हमारे लॉजिकल प्रॉपर्टी मॉड्यूल में ज़्यादा जानें.

टेक्स्ट को ब्लॉक के बीच में अलाइन करने के लिए, center का इस्तेमाल करें.

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

टेक्स्ट की दिशा बदलना

अपने टेक्स्ट की दिशा सेट करने के लिए, direction का इस्तेमाल करें. इसके लिए, ltr (बाएं से दाएं, डिफ़ॉल्ट) या rtl (दाएं से बाएं) में से किसी एक को चुनें. अरबी, हिब्रू या फ़ारसी जैसी कुछ भाषाएं दाईं ओर बाईं ओर लिखी जाती हैं, इसलिए direction: rtl का इस्तेमाल किया जाना चाहिए. अंग्रेज़ी और बाएं से दाएं की अन्य सभी भाषाओं के लिए, direction: ltr का इस्तेमाल करें.

टेक्स्ट का फ़्लो बदलना

टेक्स्ट के फ़्लो और उसे व्यवस्थित करने का तरीका बदलने के लिए, writing-mode का इस्तेमाल करें. horizontal-tb डिफ़ॉल्ट होता है, लेकिन टेक्स्ट के लिए writing-mode को vertical-lr या vertical-rl पर भी सेट किया जा सकता है.

टेक्स्ट का ओरिएंटेशन बदलें

अपने टेक्स्ट में वर्णों का ओरिएंटेशन बताने के लिए, text-orientation का इस्तेमाल करें. इस प्रॉपर्टी के लिए मान्य वैल्यू, mixed और upright हैं. यह प्रॉपर्टी सिर्फ़ तब काम करती है, जब writing-mode को horizontal-tb के बजाय किसी अन्य पर सेट किया गया हो.

टेक्स्ट के गहरे हिस्सों को हल्का करना

अपने टेक्स्ट के गहरे हिस्सों को हल्का करने के लिए, text-shadow का इस्तेमाल करें. इस प्रॉपर्टी के लिए तीन लंबाई (x-offset, y-offset, और blur-radius) और एक रंग होना चाहिए.

ज़्यादा जानने के लिए, Shadows के बारे में हमारे मॉड्यूल का text-shadow सेक्शन देखें.

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

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

ज़्यादा जानकारी के लिए, वैरिएबल फ़ॉन्ट के बारे में हमारा लेख देखें.

बदली हुई पहचान वाले एलिमेंट

::first-letter और ::first-line स्यूडो-एलिमेंट

::first-letter और ::first-line सूडो एलिमेंट, टेक्स्ट एलिमेंट के पहले अक्षर और पहली लाइन को टारगेट करते हैं.

::selection स्यूडो-एलिमेंट

उपयोगकर्ता के चुने गए टेक्स्ट का रंग-रूप बदलने के लिए, ::selection स्यूडो-एलिमेंट का इस्तेमाल करें.

इस फ़र्ज़ी एलिमेंट का इस्तेमाल करते समय, सिर्फ़ कुछ सीएसएस प्रॉपर्टी का इस्तेमाल किया जा सकता है: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

font-variant प्रॉपर्टी, कई सीएसएस प्रॉपर्टी का शॉर्टहैंड है. इसकी मदद से, small-caps और slashed-zero जैसे फ़ॉन्ट के वैरिएंट चुने जा सकते हैं. इस शॉर्टहैंड में शामिल सीएसएस प्रॉपर्टी, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, और font-variant-numeric हैं. हर प्रॉपर्टी के इस्तेमाल से जुड़ी ज़्यादा जानकारी के लिए, उसके ��ि���� प�� ��ा����.

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

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

संसाधन

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