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