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

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

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

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

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

इस मॉड्यूल में, हम पहले font-family, font-style, font-weight, और font-size जैसी कुछ बुनियादी सीएसएस फ़ॉन्ट प्रॉपर्टी पर नज़र डालेंगे. इसके बाद, हम उन प्रॉपर्टी के बारे में जानेंगे जिनसे टेक्स्ट के पैराग्राफ़ पर असर पड़ता है. जैसे, text-indent और word-spacing. यह मॉड्यूल, बदलने वाले फ़ॉन्ट और काल्पनिक एलिमेंट जैसे कुछ ज़्यादा बेहतर विषयों के साथ खत्म होता है.

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

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

font-family प्रॉपर्टी, स्ट्रिंग की कॉमा-सेपरेटेड लिस्ट स्वीकार करती है. भले ही, ये खास या सामान्य फ़ॉन्ट फ़ैमिली से जुड़ी हों. खास फ़ॉन्ट फ़ैमिली, कोट की हुई स्ट्रिंग होती हैं, जैसे कि “Hello”, “EB Garamond” या “Times New Clinic”. सामान्य फ़ॉन्ट फ़ैमिली, serif, sans-serif, और monospace जैसे कीवर्ड होते हैं. एमडीएन पर विकल्पों की पूरी सूची देखें. ब्राउज़र, दी गई सूची में से पहला उपलब्ध टाइपफ़ेस दिखाएगा.

font-family का इस्तेमाल करते समय, आपको कम से कम एक सामान्य फ़ॉन्ट फ़ैमिली तय करनी चाहिए. ऐसा इसलिए, ताकि उपयोगकर्ता के ब्राउज़र में आपके पसंदीदा फ़ॉन्ट न हों. आम तौर पर, फ़ॉलबैक जेनरिक फ़ॉन्ट फ़ैमिली आपके पसंदीदा फ़ॉन्ट से मिलती-जुलती होनी चाहिए: अगर font-family: "Helvetica" (सैन-सेरिफ़ फ़ॉन्ट फ़ैमिली) का इस्तेमाल किया जा रहा है, तो इससे मेल खाने के लिए आपका फ़ॉलबैक 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.

इन प्रॉपर्टी को क्रम से लगाने के तरीके के बारे में जानने के लिए, MDN का 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 हैं. हर प्रॉपर्टी के इस्तेमाल के बारे में ज़्यादा जानकारी के लिए, उस पर दिए गए लिंक देखें.

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

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

रिसॉर्स

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