वेब टाइपोग्राफी

टिम बर्नर-ली ने 1991 में स्विच को हिट करने के बाद से वेब टाइपोग्राफी एक लंबा सफर तय किया है। एक बार IE 1.0 के दिनों में, अभिव्यक्ति "वेब पर अच्छी टाइपोग्राफी" बल्कि एक ऑक्सीमोरोन ( शब्दों का संयोजन जो अर्थ में विपरीत हैं )। बहुत कुछ बदल गया है। हमारे पास न केवल ब्राउज़र हैं जो चित्रों को प्रदर्शित कर सकते हैं (आह!); हमारे पास महान टाइपोग्राफी का उपयोग करके हमारे वेब पृष्ठों को चेतन करने का अवसर है।




सबसे पहले, यह ध्यान दिया जाना चाहिए कि टाइपोग्राफी केवल एक फ़ॉन्ट चुनने या एक हेडसेट को दूसरे से अलग करने की क्षमता नहीं है। जैसा कि हाल के प्रयोगों से पता चला है, प्रशिक्षित बंदर 90% मामलों में असहाय रूप से हेल्वेटिका को पहचानते हैं।



आइए चार सबसे महत्वपूर्ण सामग्री के एक नुस्खा के रूप में टाइपोग्राफी के बारे में बात करने की कोशिश करते हैं। यदि आपने कभी एक सूप बनाने की कोशिश की है, तो आपको पता है कि नुस्खा कितना महत्वपूर्ण है। इस नुस्खा का पालन करें और आपकी टाइपोग्राफी बढ़ेगी ... हालांकि, पर्याप्त पाक रूपक, चलो खाना बनाते हैं।

इसके विपरीत

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



व्यक्तिगत रूप से, मुझे उल्टे पाठ के लंबे टुकड़े (उदाहरण के लिए, एक अंधेरे पृष्ठभूमि के खिलाफ प्रकाश पाठ) पढ़ना पसंद नहीं है; हम कितनी बार पुस्तकों को इस तरह आकार देते हुए देखते हैं? पाठ के छोटे मार्ग के लिए ऐसा दृष्टिकोण बहुत उपयुक्त हो सकता है, लेकिन मुझे ऐसा लगता है कि ऐसा पाठ पढ़ना बहुत मुश्किल है, यहां तक ​​कि एक मिनट से भी कम।

आकार

वेब 2.0 के जन्म के साथ, मैंने एक बल्कि परेशान प्रवृत्ति पर ध्यान दिया: छोटा प्रिंट। मैंने साइटों के रचनाकारों को भी लिखा और कृपया उन्हें डिफ़ॉल्ट फ़ॉन्ट आकार बढ़ाने के लिए आमंत्रित किया। मुझे विभिन्न उत्तर मिले - "आदमी से, चश्मा खरीदो" जो आभारी थे "धन्यवाद, मैंने कभी सोचा भी नहीं था कि मेरी साइट पर फ़ॉन्ट पाठकों के लिए बहुत छोटा हो सकता है।" मैंने छोटे पाठ की रक्षा में निम्नलिखित तर्क भी सुना: "यह मेरे न्यूनतावादी डिजाइन के अनुकूल है।" यह बहुत अधिक संभावना है कि यह कुछ और को दर्शाता है। यदि सुपरमैन और विजिलेंट फाल्कन आपके केवल पाठक नहीं हैं, तो एक छोटा फ़ॉन्ट केवल फिट नहीं होता है।



मुख्य पाठ को 12 px से कम न करें; यदि संभव हो, तो इसे बढ़ाएं। याद रखें: 65 '' पर जो दिखता है वह HD 'प्लाज्मा' 13 'स्क्रीन वाली लैपटॉप पर उतना अच्छा नहीं लग सकता है। यदि संदेह है, तो पाठ को बड़ा करें। ILT पर, मुख्य पाठ का आकार 16 px है।

अनुक्रम

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



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

अंतरिक्ष

फ़ॉन्ट को सांस लेने दें। पन्नों पर एक खाली जगह छोड़ने से डरो मत। यह मुफ्त स्थान ( सफेद स्थान ) पाठ पर ध्यान केंद्रित करने में मदद करेगा - यह वह पाठ है जो सबसे जोर से बोलता है, इसलिए उन्हें इसे सुनने दें। अगला, लाइन-ऊंचाई की सीएसएस संपत्ति को याद रखें; एक अच्छा और सिद्ध नियम यह है कि लाइन रिक्ति को कम से कम 140% पाठ आकार में सेट करें (याद रखें कि मैं वेब पर टाइपोग्राफी के बारे में लिखता हूं)। अच्छे फ़ॉन्ट डिजाइनर एक छोटे ( माइक्रो ) मुक्त स्थान बनाने के लिए अविश्वसनीय प्रयास कर रहे हैं जो फ़ॉन्ट में ही रहता है। वे फ़ॉन्ट के कालेपन और उसके चारों ओर खाली जगह के बीच संतुलन बनाने की कोशिश में अनगिनत घंटे बिताते हैं। उसी तरह, हमें समय बिताना चाहिए और एक बड़े ( स्थूल ) खाली स्थान पर सोचना चाहिए - "voids" जो पाठ के ब्लॉक को आकार देते हैं।

निष्कर्ष

याद रखें: ये नियम नहीं हैं, लेकिन सिफारिशें हैं। हालाँकि, उनका अनुसरण करें - इसके विपरीत , आकार , पदानुक्रम , और स्थान - और आपकी टाइपोग्राफी की गुणवत्ता एक गॉर्डन रेम्से सौफ़ल की तरह बढ़ेगी। वैसे, मैंने बंदरों के बारे में मजाक किया था।

अनुवादक शब्द
लेख पहले से ही तीन साल पुराना है, और यह वेब पर टाइपोग्राफी के सबसे बुनियादी पहलुओं को शामिल करता है। हालाँकि, कई लोगों द्वारा इन सरल नियमों का सम्मान नहीं किया जाता है, और मैं उन लोगों को याद दिलाना अनावश्यक नहीं समझता जो आज वेब बनाते हैं।

मैं आपको मूल देखने की सलाह देता हूं: टिप्पणियों में एक दिलचस्प चर्चा शुरू हुई।