टाइपोग्राफी सिस्टम डिज़ाइन: ऐसा टाइप कैसे बनाएँ जो स्केल हो सके

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

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

वह असंगति एक टाइप सिस्टम की समस्या है। और इसे ठीक किया जा सकता है।

एक टाइपोग्राफी सिस्टम में वास्तव में क्या होता है

एक वास्तविक टाइपोग्राफी सिस्टम पाँच चीज़ों को परिभाषित करता है:

1. एक टाइप स्केल। आपके टेक्स्ट आकारों के बीच गणितीय संबंध।
2. फ़ॉन्ट पेयरिंग। कौन से टाइपफेस कौन सी भूमिकाएँ निभाते हैं और क्यों।
3. वजन और शैली के नियम। बोल्ड, इटैलिक, मीडियम का उपयोग कब करना है, और प्रत्येक वजन क्या संकेत देता है।
4. स्पेसिंग मानक। लाइन हाइट, लेटर स्पेसिंग, और हर आकार के लिए पैराग्राफ स्पेसिंग।
5. रिस्पॉन्सिव व्यवहार। ऊपर दिए गए प्रत्येक तत्व स्क्रीन आकारों में कैसे अनुकूलित होते हैं।

यदि आपके "टाइप सिस्टम" में इनमें से कोई भी चीज़ गायब है, तो आपके पास फ़ॉन्ट विकल्प हैं, सिस्टम नहीं।

टाइप स्केल नींव है

एक टाइप स्केल फ़ॉन्ट आकारों का एक सेट है जो एक सुसंगत गणितीय अनुपात से उत्पन्न होता है। महसूस करके आकार चुनने के बजाय (यहाँ 16px, वहाँ 24px, शायद हीरो के लिए 36px), आप एक आधार आकार और एक अनुपात चुनते हैं, और हर दूसरा आकार उसी से प्रवाहित होता है।

सामान्य अनुपात जो काम करते हैं:

16px के आधार से शुरू करें (ब्राउज़र डिफ़ॉल्ट, सुलभ, पठनीय) और हेडिंग के लिए ऊपर गुणा करें, कैप्शन और लेबल के लिए नीचे भाग दें। 16px से एक मेजर थर्ड स्केल आपको देता है: 10px, 12.8px, 16px, 20px, 25px, 31.25px, 39px। स्वच्छ मानों पर पूर्णांकित करें और आपके पास एक ऐसा स्केल होगा जो मनमाना लगने के बजाय जानबूझकर बनाया गया लगता है।

फ़ॉन्ट पेयरिंग रणनीति है

इंटरनेट "सर्वश्रेष्ठ फ़ॉन्ट पेयरिंग" सूचियों से भरा है। उनमें से अधिकांश डिज़ाइन सलाह के रूप में छिपी हुई सजावट सलाह हैं। वास्तविक फ़ॉन्ट पेयरिंग रणनीतिक होती है।

वे नियम जो वास्तव में काम करते हैं:

संरचना में कंट्रास्ट, अनुपात में सामंजस्य। एक ज्यामितीय सैन्स को एक मानवतावादी सेरिफ़ के साथ पेयर करें। संरचनात्मक कंट्रास्ट दृश्य रुचि पैदा करता है। साझा x-ऊंचाई और अनुपात उन्हें एक साथ संबंधित महसूस कराते हैं। Inter + Merriweather। DM Sans + Lora। Satoshi + Source Serif।

प्रत्येक भूमिका के लिए एक आवाज़। आपकी हेडिंग टाइपफेस व्यक्तित्व को वहन करती है। आपकी बॉडी टाइपफेस सामग्री को वहन करती है। आपकी UI टाइपफेस कार्यक्षमता को वहन करती है। एक फ़ॉन्ट को तीनों काम कराने की कोशिश करने से आप एक ऐसे सिस्टम के साथ समाप्त होते हैं जो सामान्य या तनावपूर्ण लगता है।

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

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

वजन और शैली के नियम

वजन पदानुक्रम है। बोल्ड का मतलब महत्वपूर्ण है। मीडियम का मतलब सहायक है। रेगुलर का मतलब बॉडी है। लाइट का मतलब सजावटी या द्वितीयक है। ये संबंध लोगों के पढ़ने के तरीके में निहित हैं।

गलती वजन का असंगत रूप से उपयोग करना है। यदि आपकी H2 मार्केटिंग साइट में सेमीबोल्ड है लेकिन ऐप में बोल्ड है, तो ब्रांड अलग महसूस होता है, भले ही फ़ॉन्ट समान हो। एक टाइप सिस्टम इसे लॉक कर देता है:

• H1: बोल्ड (700)। हमेशा। यह आपकी सबसे तेज़ आवाज़ है।
• H2: सेमीबोल्ड (600) या बोल्ड (700)। एक चुनें, इसे हर जगह उपयोग करें।
• H3: मीडियम (500)। H2 के साथ प्रतिस्पर्धा किए बिना रजिस्टर करने के लिए पर्याप्त कंट्रास्ट।
• बॉडी: रेगुलर (400)। पठनीय, तटस्थ, कोई घर्षण नहीं।
• कैप्शन और लेबल: छोटे आकार में रेगुलर (400) या मीडियम (500)।

इटैलिक का एक ही काम है: बॉडी टेक्स्ट के भीतर जोर देना। सजावटी उद्देश्यों के लिए इटैलिक का उपयोग करना (पुल कोट्स, सेक्शन लेबल) इसके अर्थ को कमजोर करता है और वास्तविक जोर को अदृश्य बना देता है।

स्पेसिंग वह जगह है जहाँ सिस्टम टूटते हैं

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

लाइन हाइट के नियम:

हेडिंग को tighter लाइन हाइट (1.1 से 1.3) की आवश्यकता होती है क्योंकि बड़ा टेक्स्ट बॉडी-टेक्स्ट अनुपात में बहुत अधिक ऊर्ध्वाधर स्थान बनाता है। आरामदायक पढ़ने के लिए बॉडी टेक्स्ट को looser लाइन हाइट (1.5 से 1.8) की आवश्यकता होती है। सामान्य गलती हर चीज़ पर 1.5 लागू करना है, जिससे हेडिंग तैरती हुई लगती हैं और बॉडी टेक्स्ट गलत आकार में कसा हुआ महसूस होता है।

लेटर स्पेसिंग के नियम:

बड़े टेक्स्ट (हेडिंग, डिस्प्ले) को थोड़े नकारात्मक लेटर स्पेसिंग (-0.01em से -0.02em) से लाभ होता है। बड़े आकार में ऑप्टिकल स्पेसिंग ऐसे अंतराल बनाती है जो इरादे से अधिक चौड़े लगते हैं। छोटे टेक्स्ट (कैप्शन, लेबल, अपरकेस) को थोड़े सकारात्मक लेटर स्पेसिंग (+0.02em से +0.05em) से लाभ होता है क्योंकि छोटे आकार में तंग ट्रैकिंग पठनीयता को कम करती है।

पैराग्राफ स्पेसिंग:

अपनी आधार इकाई के एक सुसंगत गुणक का उपयोग करें। यदि आपका आधार 4px ग्रिड के साथ 16px है, तो पैराग्राफ स्पेसिंग 16px या 24px होनी चाहिए, न कि कोई मनमाना मान। यह हर पेज पर ऊर्ध्वाधर लय को सुसंगत रखता है।

रिस्पॉन्सिव व्यवहार

एक टाइप सिस्टम जो एक ब्रेकपॉइंट पर काम करता है, वह सिस्टम नहीं है। यह एक स्क्रीनशॉट है।

फ्लुइड टाइपोग्राफी CSS clamp() का उपयोग करके ब्रेकपॉइंट के बीच फ़ॉन्ट आकारों को सुचारू रूप से स्केल करती है। एक ब्रेकपॉइंट पर 16px से 14px पर कूदने के बजाय, आकार इंटरपोलेट होता है। यह हार्ड ब्रेकपॉइंट परिवर्तनों से आने वाले लेआउट जंक को समाप्त करता है।

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

मोबाइल पर स्केल कम्प्रेशन। आपका डेस्कटॉप स्केल अनुपात (जैसे 1.250) एक छोटी स्क्रीन पर बहुत अधिक कंट्रास्ट बनाता है। डेस्कटॉप पर 39px का H1 काम करता है। 375px के फोन पर 39px का H1 काम नहीं करता है। समाधान: मोबाइल पर अनुपात को संपीड़ित करें (1.125 या 1.150 तक गिराएं) जबकि आधार आकार को समान रखें। पदानुक्रम बना रहता है, आकार अनुकूलित होते हैं।

न्यूनतम पठनीय आकार। मोबाइल पर बॉडी टेक्स्ट के लिए कभी भी 16px से नीचे न जाएं। किसी भी टेक्स्ट के लिए कभी भी 12px से नीचे न जाएं। एक्सेसिबिलिटी वैकल्पिक नहीं है, और छोटी स्क्रीन पर छोटा टेक्स्ट वास्तविक उपयोगकर्ताओं को विफल करता है।

सामान्य टाइप सिस्टम विफलताएँ

फ़ॉन्ट बुफे। पाँच टाइपफेस, कोई तर्क नहीं। हर पेज एक अलग ब्रांड जैसा लगता है।

अनाथ वजन। एक सजावटी तत्व के लिए थिन (100) या ब्लैक (900) का उपयोग करना और कुछ नहीं। यह सिस्टम मूल्य जोड़े बिना दृश्य शोर जोड़ता है।

स्पेसिंग का अनुमान। लाइन हाइट और लेटर स्पेसिंग जो घटकों के बीच बदलती रहती हैं क्योंकि किसी ने नियम परिभाषित नहीं किए।

डेस्कटॉप-ओनली स्केल। 1440px मॉकअप पर शानदार दिखता है। किसी भी छोटी चीज़ पर बिखर जाता है क्योंकि किसी ने रिस्पॉन्सिव व्यवहार का परीक्षण नहीं किया।

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

अक्सर पूछे जाने वाले प्रश्न

डिज़ाइन में टाइपोग्राफी सिस्टम क्या है?

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

एक डिज़ाइन सिस्टम में कितने फ़ॉन्ट होने चाहिए?

दो मानक हैं। अधिकांश सिस्टम के लिए तीन अधिकतम हैं। एक डिस्प्ले या हेडिंग टाइपफेस और एक बॉडी टाइपफेस डिज़ाइन की अधिकांश आवश्यकताओं को पूरा करता है। अधिक जोड़ने से पेयरिंग, वजन और रिस्पॉन्सिव निर्णयों में घातीय जटिलता पैदा होती है।

सबसे अच्छा टाइप स्केल अनुपात क्या है?

कोई एक सबसे अच्छा अनुपात नहीं है। मेजर थर्ड (1.250) मार्केटिंग और संपादकीय के लिए अच्छा काम करता है। माइनर थर्ड (1.200) घने इंटरफेस के लिए उपयुक्त है। परफेक्ट फोर्थ (1.333) मजबूत हेडिंग कंट्रास्ट बनाता है। वह अनुपात चुनें जो आपकी सामग्री घनत्व और पदानुक्रम आवश्यकताओं से मेल खाता हो।

फ़ॉन्ट चुनने से पहले सिस्टम बनाएँ

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