इस बारे में जानें कि आपको अपने अपरकेस टेक्स्ट एलिमेंट पर थोड़े से अक्षरों के स्थान का उपयोग करने से अक्सर लाभ क्यों होगा — और इसे CSS के साथ कैसे करें।
टाइपोग्राफी में, जब आप टेक्स्ट तत्वों पर अपरकेस/सभी कैप्स (कैपिटल लेटर्स) का उपयोग करते हैं, तो आपको आमतौर पर अक्षरों के बीच थोड़ा सा ब्रीदिंग रूम जोड़ने की आवश्यकता होती है, अन्यथा, वे आराम से पढ़ने के लिए बहुत तंग हो जाते हैं।
<ब्लॉककोट>लेटरस्पेसिंग इसे ट्रैकिंग . के रूप में भी जाना जाता है वे समानार्थी हैं। दोनों अक्षरों (शब्दों) के समूह के बीच की जगह की मात्रा को संदर्भित करते हैं। संचार में, वेब पर लेटरस्पेसिंग शब्द का अधिक उपयोग किया जाता है, जबकि ट्रैकिंग का उपयोग प्रिंट टाइपोग्राफी में अधिक किया जाता है।
आइए कुछ उदाहरण देखें।
सामान्य बनाम अपरकेस
निम्नलिखित टेक्स्ट तत्वों, सामान्य केस और सभी बड़े अक्षरों/अपरकेस की तुलना करें:
टाइपोग्राफी
टाइपोग्राफी
क्या आपको कोई समस्या दिखाई दे रही है?
यदि आप नहीं करते हैं तो ठीक है। सामान्य/डिफ़ॉल्ट फ़ॉन्ट-वेट का उपयोग करते समय यह अक्सर कोई समस्या नहीं होती है। यह टाइपफेस डिज़ाइन पर निर्भर करता है, और इसका उपयोग कैसे किया जाता है।
CSS में, एक सामान्य फॉन्ट-वेट को font-weight: normal; . का उपयोग करके घोषित किया जा सकता है या font-weight: 400; — यह वही है।
सामान्य मामला बनाम अपरकेस (बोल्ड)
अब उन्हीं उदाहरणों की तुलना करते हैं, लेकिन इस बार हम एक बोल्ड फॉन्ट-वेट जोड़ते हैं:
टाइपोग्राफी
टाइपोग्राफी
क्या आप देखते हैं कि जब हम मोटे अक्षर स्ट्रोक (बोल्ड) का उपयोग करते हैं तो सभी कैप टेक्स्ट अब कितना कड़ा दिखता है? अब आप देख सकते हैं कि कुछ अक्षर एक दूसरे को छू रहे हैं।
<ब्लॉककोट>
CSS में, font-weight: bold; . का उपयोग करके एक बोल्ड फॉन्ट-वेट घोषित किया जा सकता है . आप संख्यात्मक मानों का भी उपयोग कर सकते हैं, लेकिन सुनिश्चित करें कि आप जानते हैं कि आपकी पसंद के फ़ॉन्ट-फ़ैमिली से कितने फ़ॉन्ट वज़न विकल्प उपलब्ध हैं। 700 आमतौर पर बोल्ड के बराबर होता है — लेकिन हमेशा नहीं।
लेटरस्पेसिंग (उर्फ ट्रैकिंग)
आइए पहले से अपरकेस टेक्स्ट एलिमेंट उदाहरण की एक कॉपी बनाएं और इसे 4px लेटरस्पेसिंग दें, और देखें कि दोनों की तुलना कैसे होती है:
टाइपोग्राफी
टाइपोग्राफी
वाह, क्या फर्क है! पहला उदाहरण लगभग एक क्लस्ट्रोफोबिक प्रतिक्रिया उत्पन्न करता है, जबकि दूसरा एक विपरीत प्रभाव देता है।
<ब्लॉककोट>
CSS में, लेटरस्पेसिंग को letter-spacing . के साथ घोषित किया जाता है संपत्ति, उदा.:letter-spacing: 4px; इसे हाइफ़न के साथ या उसके बिना लिखा जा सकता है (- ) नियमित भाषा में, लेकिन CSS में यह हमेशा साथ . होता है एक हाइफ़न।
मुझे स्पष्ट होने दो। मैं यह सुझाव नहीं दे रहा हूं कि अतिरिक्त लेटरस्पेसिंग के साथ दूसरा टेक्स्ट एलिमेंट उदाहरण हमेशा बेहतर विकल्प होता है। यह उस वातावरण/मनोदशा पर निर्भर करता है जिसे आप अपने विशिष्ट उपयोग के मामले में स्थापित करने का प्रयास कर रहे हैं।
एक पोस्टर पर फिल्म के विषय को व्यक्त करने और सुदृढ़ करने के लिए सबसे शक्तिशाली उपकरणों में से एक टाइपोग्राफी है। एक कुशल टाइपोग्राफर निम्नलिखित के बारे में सावधानीपूर्वक निर्णय लेगा:
- टाइपफेस/फ़ॉन्ट-फ़ैमिली
- टाइपफेस वर्गीकरण (सेरिफ़, सेन्स-सेरिफ़, आदि)
- फ़ॉन्ट-आकार
- अक्षर आवरण (अपरकेस, लोअरकेस, आदि)***
- फ़ॉन्ट-वेट (सामान्य, बोल्ड, आदि)
- फ़ॉन्ट शैली (नियमित/सामान्य/इटैलिक)
चाहे आप मूवी पोस्टर, बुक कवर, फ़ूड लेबल, या कुछ और पर काम कर रहे हों, आपके टाइपोग्राफ़िक फ़ॉर्मेटिंग निर्णय कार्य के संदर्भ पर आधारित होने चाहिए।
लेटरस्पेसिंग सिर्फ एक है, लेकिन टाइपोग्राफी का एक शक्तिशाली तत्व है:
कैपटिविटी
स्वतंत्रता
क्या आप अंतर महसूस कर सकते हैं?
भावनाओं को छोड़कर, इस पर विचार करें: अपरकेस टेक्स्ट, सामान्य तौर पर, सामान्य केस टेक्स्ट की तुलना में पहले से ही पढ़ना कठिन होता है, क्योंकि सममित और आनुपातिक संरचना जो अक्षरों को इस अक्षर केस प्रकार का उपयोग करने से मिलती है, एक शब्द में अलग-अलग अक्षरों को अलग करना मुश्किल बनाती है - विशेष रूप से एक वाक्य या पैराग्राफ में।
संक्षेप में:
- पाठक-मित्रता के लिए अपरकेस टेक्स्ट का संयम से उपयोग करें। यह शीर्षकों या छोटे शीर्षकों के लिए अच्छा काम कर सकता है, लेकिन पूरे वाक्यों या अनुच्छेदों के लिए नहीं।
- अंगूठे के अपरकेस/सभी कैप्स के नियम के रूप में पाठ को पचाने में आसान बनाने के लिए अक्षरों के बीच थोड़ा, कभी-कभी बहुत कुछ प्राप्त करने से लाभ होता है।
- पाठ तब अधिक सौंदर्यपूर्ण रूप से प्रसन्न होता है जब ऐसा नहीं लगता कि आपने अक्षरों को एक साथ चिपका दिया है। दृश्य मायने रखते हैं।
- कभी-कभी टाइट ट्रैकिंग/लेटर स्पेसिंग बिल्कुल सही फिट होती है।
यह ब्लैक एंड व्हाइट नहीं है। प्रसंग महत्वपूर्ण है।