चर फोंट के साथ टाइपोग्राफी का विकास: एक परिचय

पतले, मोटे और बीच में सब कुछ: एफएफ मेटा वैरिएबल से मोनोटाइप

शब्दों में शक्ति है, और टाइपोग्राफी उनकी आवाज है

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

कई से, एक (प्रतिमान: स्थानांतरित)

एक चर फ़ॉन्ट एक एकल फ़ॉन्ट है जो कई कार्य करता है
- जॉन हडसन

वैरिएबल फ़ॉन्ट्स के आगमन से पूरे गतिशील परिवर्तन होते हैं। जॉन हडसन द्वारा वर्णित के रूप में, एक वैरिएबल फ़ॉन्ट एक एकल फ़ॉन्ट है जो कई कार्य करता है: चौड़ाई और वजन, तिरछा, और यहां तक ​​कि इटैलिक के सभी रूपांतर एक एकल, अत्यधिक कुशल और संकुचित फ़ॉन्ट फ़ाइल में निहित हो सकते हैं। क्या अधिक है: प्रारूप (जो तकनीकी रूप से ओपन टाइप 1.8 विनिर्देश का हिस्सा है) पूरी तरह से एक्स्टेंसिबल है। किस प्रकार के कुल्हाड़ियों का उपयोग किया जाता है, उनकी सीमाओं और यहां तक ​​कि नई कुल्हाड़ियों की परिभाषा पर भी डिजाइनर का पूरा नियंत्रण होता है। वर्तमान में 5 ’पंजीकृत 'कुल्हाड़ी (चौड़ाई, वजन, तिरछा, तिरछा और ऑप्टिकल आकार) हैं, लेकिन डिजाइनर किसी भी अक्ष को चुन सकते हैं। कुछ उदाहरणों में एस्केंडर्स और डेसेंडर्स की ऊंचाई, टेक्स्ट ग्रेड, यहां तक ​​कि सेरिफ़ आकार शामिल हैं। संभावनाएं लगभग असीम हैं। प्रदर्शन की बाधा को दूर करके, हम अधिक रोचक और गतिशील डिजाइन के लिए दरवाजा खोलते हैं और ब्रांड की असली आवाज को व्यक्त करने की अधिक से अधिक क्षमता है। यह सब केवल टाइपफेस के प्रति निष्ठा बनाए रखते हुए: केवल डिजाइनर द्वारा उजागर की गई कुल्हाड़ियों में विविधता हो सकती है। कोई कृत्रिम विकृति की अनुमति नहीं है।

वेब डिजाइन, प्रबलित

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

100 से 900 वज़न तक एम्पर्सेंड करता है

शीर्षकों के लिए या सूचना के डेटा-सघन प्रदर्शनों पर थोड़ा संकरा वर्ण चौड़ाई का भी उपयोग किया जा सकता है। वास्तव में पूरे टाइपोग्राफिक सिस्टम को आनुपातिक रूप से डिजाइन किया जा सकता है: वजन और चौड़ाई मानक बॉडी कॉपी सेटिंग्स पर गुणक बन सकते हैं। ऐसा करने से उन पहलुओं को आसानी से पैमाना बनाया जा सकेगा जब बॉडी कॉपी के साथ स्क्रीन साइज या उपयोगकर्ता वरीयता के आधार पर इसकी सेटिंग्स बदलनी चाहिए। कम HTTP अनुरोधों (कम फ़ॉन्ट फ़ाइलें) और डाउनलोड करने के लिए डेटा की समग्र बचत (हालांकि इसका उपयोग फ़ॉन्ट और संपीड़न द्वारा भिन्न होगा) के कारण प्रदर्शन में वृद्धि के साथ यह सब।

लेकिन जब ये स्वतंत्रताएं हमें अधिक अभिव्यंजक होने की अनुमति देती हैं, तो वास्तव में कुछ दिलचस्प क्षमताएं पढ़ने के अनुभव को बदलने में मदद करेंगी। यह पृष्ठ (ठीक है, वास्तविक डेमो पेज ही) एफएफ मेटा के एक नए चर फ़ॉन्ट संस्करण के साथ सेट किया गया है, एरिक स्पिएकरमैन द्वारा क्लासिक सैंस-सेरिफ़ डिज़ाइन पहली बार 1991 में जारी किया गया था। यहां तक ​​कि दोनों की केवल एक धुरी भिन्नता (वजन) के साथ रोमन और इटैलिक वेरिएंट, आवाज की एक अद्भुत श्रृंखला को प्रदर्शन में बड़े पैमाने पर लाभ के साथ प्राप्त किया जा सकता है: 18 फाइलें और 288k से अधिक केवल 84k की एकल फाइल के साथ प्रतिस्थापित किया गया।

स्क्रीन पर रीडिन्वेंट किया गया

[मेटा] को सुंदर दिखने की तुलना में अधिक करना पड़ता है: इसके लिए बहुत मेहनत करनी पड़ती है
- एरिक स्पीकरमैन

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

क्लोज-अप के लिए तैयार

ऑप्टिकल साइज में गारमोंड की 18 वीं शताब्दी में कटौती। पहली छवि 6 आकार में है, दूसरी 72 पर है। स्ट्रोक विपरीत में अंतर पर ध्यान दें। यह बड़े आकार में बहुत अधिक परिष्कृत है।

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

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

पोलिश और कविता

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

हम अभी भी इस नए युग के भोर में हो सकते हैं, लेकिन यह निश्चित रूप से उज्ज्वल है

मई 2018 तक, 4 प्रमुख वेब ब्राउज़र में से 3 पहले से ही प्रमुख मोबाइल प्लेटफॉर्म (caniuse.com पर चेक समर्थन) के अलावा, वैरिएबल फोंट का समर्थन करते हैं। इसे ध्यान में रखते हुए, हम आज वेब पर प्रकाश डालना शुरू करने के लिए तैयार हैं।

यहाँ CodePen पर पूरा पृष्ठ है। एक साथ पूरी चीज़ पर नज़र डालें, और इसे चलाने वाले CSS पर एक नज़र डालें। इसमें स्केलिंग टाइपोग्राफिक प्रणाली शामिल है जो मैंने जेन सिमंस और टिम ब्राउन से सीखे गए कुछ विचारों के आधार पर बनाई थी, जो व्यूपोर्ट यूनिट, सीएसएस कस्टम गुण (उर्फ चर), और बहुत सारी गणनाओं का उपयोग कर रहे थे। आप इसे सीधे CodePen पर देख सकते हैं या वास्तव में नीचे एम्बेडेड की जाँच कर सकते हैं।

टाइपफेस और प्रोजेक्ट पर कुछ विचार

मैं हमेशा एरिक स्पीकमैन के काम का प्रशंसक रहा हूं, और मुझे लगता है कि पिछले 25 वर्षों में मेरे लिए कालक्रम और मेटा, ऑफ़िसिना और फ़िरा का कालक्रम और इतिहास बहुत दिलचस्प है, और मेरे लिए डिजिटल डिज़ाइन के कपड़े का बहुत हिस्सा है। डिजाइन की दुनिया में उस तरह के इतिहास और प्रभाव के साथ एक टाइपफेस लेने का मौका और इसके साथ एक नई तकनीक के संदर्भ में काम करना वास्तव में रोमांचक था। मैंने विशेष रूप से सराहना की कि वह एक ही फाइल के हिस्से के रूप में वजन और इटैलिक्स दोनों के साथ काम करने में सक्षम है: यह वास्तव में अच्छी तरह से चर फ़ॉन्ट प्रारूप के मूल्य को दर्शाता है।

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

मूल टाइपसेटिंग के बारे में सोचने के लिए, मैं पैमाने के लिए गया: मैं उन तरीकों से वजन और आकार के चरम के साथ खेलना चाहता था जो आप वेब पर अक्सर देखते हैं क्योंकि अधिकांश डिजाइन उपयोग किए गए वज़न में अधिक विवश होते हैं। इस मामले में, मैंने रोमन और इटैलिक दोनों में 100 से 900 तक वजन की एक पूरी श्रृंखला का उपयोग किया है। एक बार जब मुझे अपनी पसंद का लेआउट मिलना शुरू हुआ, तो मेरे साथ यह हुआ कि क्षमताओं को चित्रित करने के लिए ग्राफिक्स बनाने के बजाय, आउट ऑफ़ टाइप: चित्र उद्धरण और थोड़ा सा 'इन्फोग्राफिक' स्टाइल फॉन्ट डेटा बनाना अधिक दिलचस्प होगा।

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

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

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

मूल सामग्री मेरे ब्लॉग पर पोस्ट की गई