वेब के लिए टाइपोग्राफी लेखन को समझना

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

इस लेख में मैं वेब टाइपोग्राफी के दायरे में तल्लीन करना चाहूंगा। हम देखेंगे विश्वसनीय वेबपेज ग्रंथों के डिजाइन के पीछे लोकप्रिय विचार. जिस तरह से मैं कुछ परिचय देंगे सहायक CSS3 गुण कौन से डिजाइनर अक्सर भूल जाते हैं.

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

अपने पैराग्राफ को मापें

इस तरह के माप के लिए आपको यार्ड स्टिक को बाहर करने की आवश्यकता नहीं होगी। वास्तव में टाइपोग्राफी के संबंध में माप आपके पृष्ठ पर किसी भी दिए गए पैराग्राफ की चौड़ाई (क्षैतिज रूप से) को संदर्भित करता है। यह हमेशा चर्चा का विषय नहीं है, लेकिन यह आपकी सामग्री की पठनीयता को प्रभावित करता है। अंगूठे के एक सामान्य नियम के रूप में आप किसी भी एक लाइन को 75-85 वर्णों तक सीमित रखना चाहते हैं (जरूरी नहीं कि इसमें रिक्त स्थान भी शामिल हों).

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

इस बारे में सावधान रहने की कोई अधिकतम इकाई नहीं है। आप सामग्री कैसे लिखते हैं और शब्दों को वाक्य में बनाते हैं, प्रत्येक पंक्ति की चौड़ाई से बहुत अधिक महत्वपूर्ण है। लेकिन ध्यान रखें कि छोटे, संक्षिप्त बयानों की तुलना में लंबे वाक्यों को पढ़ना अधिक कठिन होता है.

अग्रणी समझाया

डिजाइनिंग में, अपने पैराग्राफ उपाय के साथ, आपको इस पर भी विचार करना चाहिए प्रमुख. शब्द का उच्चारण होता है “ledd-इंग”, जैसे कि पेंसिल में प्रयुक्त सीसा। यह नाम यांत्रिक टाइपसेटिंग के पुराने दिनों से उत्पन्न होता है जहां पाठ की पंक्तियों के बीच सीसे के स्ट्रिप्स रखे गए थे.

अग्रणी अभी भी वेब डिजाइन में एक बहुत ही महत्वपूर्ण अवधारणा है और पैराग्राफ उपायों के साथ हाथ से जाता है। जैसे-जैसे आपकी पैराग्राफ की चौड़ाई बढ़ती है, आपको अग्रणी की मात्रा के बराबर वृद्धि लागू करनी चाहिए, या पाठ की पंक्तियों के बीच का स्थान. यह अतिरिक्त स्थान आपकी आंखों पर पढ़ने को बहुत आसान बनाता है.

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

एक ठोस तकनीक मूल रूप से आवश्यकता से अधिक स्थान लागू करना और यदि आवश्यक हो तो इसे कम करना है। सभी पाठ समान नहीं बनाए गए हैं और आपको निश्चित रूप से विभिन्न आंतरिक स्वरूपण जैसे पैराग्राफ की आवश्यकता होगी जैसे कि बोल्ड शब्द, एंकर लिंक, अंडरलाइन्स, आदि। कुछ अतिरिक्त अग्रणी के साथ ये परिवर्तन अन्य पाठ की तुलना में संतुलन से बाहर महसूस नहीं करेंगे।.

प्राकृतिक फ़ॉन्ट आकार का उपयोग करें

अभी भी मुट्ठी भर वेबसाइटों को छोटे-से-औसत फ़ॉन्ट आकार के साथ चुनने का विकल्प है। 11px-12px बहुत अधिक प्रतीत हो सकता है “मानक पेशेवर” व्यापार लेआउट के लिए। लेकिन ये आकार उन अधिकांश आगंतुकों की मदद नहीं करते हैं, जो विशिष्ट जानकारी की तलाश में हैं.

यदि आप कोई सीएसएस नियम लागू नहीं करते हैं तो आमतौर पर वेब ब्राउजर डिफ़ॉल्ट रूप से 16px तक होता है। यहां तक ​​कि यह थोड़ा छोटा माना जा सकता है यदि आपके पास बड़े पाठ के लिए समायोजित करने के लिए आपके लेआउट में अतिरिक्त कमरा है। बड़े फ़ॉन्ट आकार केवल अच्छे दिखते हैं और रिश्तेदार खोजशब्दों के लिए स्किम करना ज्यादा आसान है। सेरिफ़ फोंट को अक्सर पैराग्राफ सामग्री के रूप में नहीं चुना जाता है, लेकिन आप अभी भी उनसे दूर हो सकते हैं। मेरा सुझाव है कि पठनीयता में सुधार लाने और ध्यान आकर्षित करने के लिए सेरिफ़-आधारित फोंट के लिए बहुत बड़े पाठ आकारों का उपयोग किया जाए.

उपयोगकर्ता के पर्यावरण पर प्रतिक्रिया दें

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

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

याद रखें कि निश्चित चौड़ाई और पैराग्राफ आकार आपके डिज़ाइन में बहुत सारी सेटिंग्स में लॉक होंगे। यह सामग्री के लिए बहुत अच्छा है जिसमें बहुत सारे स्थिर सौंदर्य प्रभाव शामिल हैं - पृष्ठभूमि की छवियां या बहुत सारे फिटेड साइडबार विजेट। दाहिने साइडबार के साथ बाएं स्तंभ में एक द्रव सामग्री क्षेत्र का निर्माण करना भी एक सरल प्रक्रिया है.

शैली प्रसंग पर आधारित

कुछ अन्य बहुत साफ सीएसएस ट्रिक्स मुख्यधारा के डिजाइन से छिपी हुई हैं। विशेष रूप से प्रिंट कार्य से अधिक रुझानों की नकल की जाती है जिसे उचित संदर्भ में लागू किया जा सकता है.

कई वेब डिज़ाइनरों ने कभी भी टेक्स्ट-इंडेंट सीएसएस संपत्ति का उपयोग नहीं किया है। आप इस नियम द्वारा लक्षित किसी भी अनुच्छेद की पहली पंक्ति को इंडेंट करने के लिए एक मूल्य प्रदान करते हैं। इकाइयाँ मानक पाठ विकल्पों का अनुसरण करती हैं, जैसे कि पिक्सेल, पॉइंट्स, ईएमएस, प्रतिशत ... यह निश्चित रूप से एक प्रवृत्ति नहीं है जो आप अधिकांश ब्लॉगों में पाएंगे। लेकिन यह पाठ के बड़े ब्लॉक के माध्यम से पढ़ते हुए एक अच्छा पृष्ठ लय प्रदान करता है.

एक अन्य प्रकार का CSS चयनकर्ता है जिसे a के रूप में जाना जाता है छद्म तत्व. यह किसी भी सामग्री चयनकर्ता के विशिष्ट भाग को लक्षित कर सकता है। CSS3: पहले अक्षर का छद्म चयनकर्ता महत्वपूर्ण अनुच्छेदों पर फैंसी शैली बनाने के लिए एकदम सही है। आप प्रत्येक पैराग्राफ के शुरुआती अक्षर को जाज कर सकते हैं - एक काफी हद तक कहानी की तरह - बोल्ड, इटैलिक्स या टाइपफेस को बदलते हुए। ड्रॉप कैप के इस सुंदर उदाहरण को देखें जिसमें कुछ अतिरिक्त सीएसएस कोड शामिल हैं जिनका आप उपयोग कर सकते हैं.

लेटर स्पेस के साथ खेलना

मुझे यकीन है कि हममें से कई लोगों ने ट्रैकिंग शब्द को पहले कभी नहीं सुना होगा कि यह सीएसएस पत्र-रिक्ति संपत्ति के समान विचार नहीं है। ये दो अवधारणाएं एक ही हैं, प्रिंट और डिजिटल टाइपोग्राफी के बीच संबंधित हैं। इकाई पाठ की किसी एक पंक्ति के भीतर अक्षरों के बीच के स्थान से संबंधित है। यह आपकी साइट के भीतर हेडर और यहां तक ​​कि कुछ छोटी सामग्री ब्लॉक पर लागू करने के लिए वास्तव में साफ प्रभाव है.

यह महत्वपूर्ण है कि शब्द अक्षर-रिक्ति को कर्निंग के साथ भ्रमित न करें। दोनों टाइपोग्राफी और अक्षरों के बीच की दूरी से संबंधित हैं। हालांकि कर्निंग विशेष रूप से एक शब्द में 2 व्यक्तिगत अक्षरों के बीच की दूरी को संदर्भित करता है। पत्र रिक्ति संपत्ति पर लागू होगा एक संपूर्ण तत्व पाठ का, यह एक शब्द या पैराग्राफ या हेडर या एंकर लिंक हो। इसे ध्यान में रखें जब आप शैलियों के लिए नए विचारों के साथ खेल रहे हों.

मैं प्रायः सभी राजधानियों के साथ हेडर में अक्षर के कुछ पिक्सल / बिंदुओं का उपयोग करता हूं। यह कुछ अतिरिक्त स्थान के साथ अलग-अलग पात्रों को तोड़ता है और बहुत परिभाषित के रूप में भी दिखाई देता है “शीर्षक” देखो। नेगेटिव लेटर स्पेसिंग भी सही संदर्भ में बढ़िया काम करती है। मैं आमतौर पर छोटी इकाइयों से चिपकता हूं, शायद -0.03em या -0.1em सबसे अधिक.

संयोजन और मिलान प्रकार

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

अब तक टाइपफेस के सबसे लोकप्रिय संयोजन में हेडर और पैराग्राफ सामग्री के लिए एक सेरिफ़ / सेन्स-सेरिफ़ विभाजन शामिल है। मैं दोनों को स्विच करना पसंद करता हूं, लेकिन अधिक बार मैं हेडर अनुभागों में सेरिफ़ फोंट का उपयोग करूंगा। प्रत्येक पत्र पर अतिरिक्त अंकन और स्ट्रोक उन्हें प्रमुख पृष्ठ पाठ के रूप में अधिक चापलूसी दिखाई देते हैं.

इसके अलावा सैंस-सेरिफ़ फोंट क्लीनर और वाक्यों में एक साथ स्क्रब करने के लिए आसान हैं। यह कहना नहीं है कि सेरिफ़ फोंट पैराग्राफ में काम नहीं करेंगे। वास्तव में बहुत सारे महान उदाहरण हैं! लेकिन एक्स-ऊंचाई नामक एक छोटी-सी अवधारणा एक टाइपफेस की जटिलता को भेद करने के लिए महत्वपूर्ण रूप से महत्वपूर्ण है। एक जोड़े शब्दों की आधार रेखा को देखने से आप इस तरह के फोंट कैसे उठाएंगे “में फिट” एक दूसरे के साथ.

यह इन विभिन्न तत्वों के बीच अंतरिक्ष के महत्व को भी ध्यान देने योग्य है। आप संभवतः 2 या 3 अलग हेडर शैलियों का उपयोग कर रहे हैं, इसलिए इनमें से प्रत्येक एक अंतर उपस्थिति के साथ बंद हो जाएगा। मैं अपने h2 / h3 तत्वों को निम्न पैराग्राफ ब्लॉक के थोड़ा सा पास रखता हूं, क्योंकि इसका तात्पर्य है कि सामग्री के बीच एक सहसंबंध है.

यह सहसंबंध विशेष रूप से तब उपयोगी होता है जब आप एक दूसरे के ठीक बगल में दो पूरी तरह से भिन्न प्रकार का उपयोग कर रहे हों। मैं सामग्री के सेट के अनुसार 3 से अधिक भिन्न फ़ॉन्ट परिवारों की सलाह नहीं देता। बहुत से अनुकूलन के बाद आपके शब्द एक साथ उछलते हुए दिखाई देते हैं और पूरा पृष्ठ गलतफहमी फोंट के एक शौकीन की तरह लग रहा है.

निष्कर्ष

यह मेरी आशा है कि ये अवधारणाएं डिजिटल टाइपोग्राफी के जटिल विषय पर कुछ प्रकाश डालेंगे। एक डिजाइनर के रूप में काम करना वास्तव में मुश्किल हो सकता है, खासकर अगर पूरा विषय आपके लिए विदेशी हो। लेकिन अध्ययन जारी रखें और पूरे गुच्छा का अभ्यास करना सुनिश्चित करें!

अगले सप्ताह: देखते रहिए क्योंकि हम कुछ में देखेंगे सहायक उपकरण और संसाधन बेहतर वेब टाइपोग्राफी के लिए.

अधिक…

यहां अधिक टाइपोग्राफी संबंधित पोस्ट हैं:

• सुंदर टाइपोग्राफी के साथ वेब डिजाइन का प्रदर्शन
• आधुनिक वेबसाइटों के लिए बेहतर टाइपोग्राफी
• टाइपोग्राफी के लिए त्वरित गाइड: जानें और प्रेरित रहें