मॉड्यूलर टाइप स्केल: एक सुसंगत टाइपोग्राफी प्रणाली कैसे बनाएं

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

यदि इसे गलत तरीके से किया जाए, तो आपके पास सत्रह फ़ॉन्ट आकार होंगे जिनका कोई समर्थन नहीं कर सकता, शीर्षक बॉडी कॉपी से पदानुक्रम के लिए संघर्ष करेंगे, और हर तिमाही में एक रीडिज़ाइन मीटिंग होगी जहाँ कोई "चलो आकारों को मानकीकृत कर देते हैं" का प्रस्ताव देगा और किसी को नहीं पता होगा कि किस आधार पर मानकीकरण किया जाए। स्केल ही वह आधार है जिसके आधार पर मानकीकरण किया जाता है। यह लेख बताता है कि एक ऐसा स्केल कैसे बनाया जाए जो वास्तविक उत्पाद में वास्तविक अनुपातों, वास्तविक टोकन संरचना और Figma और Tailwind अनुवादों के साथ टिकाऊ हो, ताकि इसे लागू किया जा सके।

मॉड्यूलर टाइप स्केल वास्तव में क्या है

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

एक आधार आकार चुनें, मान लीजिए 16 पिक्सेल, और एक अनुपात, मान लीजिए 1.25। 16 को 1.25 से गुणा करें तो 20 मिलता है। 20 को 1.25 से गुणा करें तो 25 मिलता है। इसी तरह आगे बढ़ते रहें तो 31, 39, 49, 61 मिलते हैं। 16 को 1.25 से भाग दें तो 12.8 मिलता है। इसे फिर से 1.25 से भाग दें तो 10.24 मिलता है। यही स्केल है। आठ आकार, एक आधार, एक अनुपात, पूर्ण गणितीय स्थिरता।

इसके काम करने का कारण मनोवैज्ञानिक और भौतिक है। मानव दृश्य बोध अनुपातों पर प्रतिक्रिया करता है, न कि निरपेक्ष अंतरों पर। 12 से 14 तक की छलांग लगभग 24 से 28 तक की छलांग के समान ही लगती है, क्योंकि दोनों लगभग एक ही गुणात्मक चरण हैं। एक रेखीय पैमाना (12, 14, 16, 18, 20, 22) ऊपर से तंग और नीचे से अधिक फैला हुआ लगता है। एक मॉड्यूलर पैमाना समरूप लगता है, क्योंकि सापेक्षतः वह समरूप ही होता है।

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

वास्तविक उत्पादों को कवर करने वाले पांच अनुपात

अधिकांश उत्पाद 1.125 और 1.618 के बीच होते हैं, और प्रत्येक अनुपात एक विशिष्ट घनत्व संकेत देता है।

लगभग हर वास्तविक इंटरफ़ेस को कवर करने वाले पाँच अनुपात:

| अनुपात | नाम | घनत्व संकेत | वास्तविक कार्यान्वयन |

|------:|------|----------------|---------------------|

| 1.125 | माइनर सेकंड | सघन, डेटा-प्रधान | Vercel, Geist, अधिकांश एडमिन डैशबोर्ड |

| 1.2 | माइनर थर्ड | कॉम्पैक्ट, संतुलित | Tailwind डिफ़ॉल्ट स्केल |

| 1.25 | मेजर थर्ड | मानक संपादकीय | Stripe, Material 3 बॉडी रोल |

| 1.333 | परफेक्ट फोर्थ | उदार, पत्रिका जैसा अनुभव | संपादकीय साइटें, लंबे ब्लॉग |

| 1.618 | गोल्डन रेशियो | नाटकीय, डिस्प्ले-आधारित | मार्केटिंग पेज, हीरो-आधारित साइटें |

कभी-कभी दो और अनुपात भी दिखाई देते हैं। 1.414 (संवर्धित चतुर्थांश, जो 2 का वर्गमूल है और A4 पेपर के पीछे का अनुपात है) पूर्ण चतुर्थांश और पूर्ण पंचमांश के बीच स्थित है और उन पत्रिका-शैली के उत्पादों के लिए एक उपयुक्त विकल्प है जो 1.333 से अधिक नाटकीयता चाहते हैं। 1.5 (पूर्ण पंचमांश) 1.333 से अधिक प्रभावशाली और 1.618 से कम प्रभावशाली है और कई मार्केटिंग पेज जनरेटरों में डिफ़ॉल्ट रूप से यही अनुपात होता है।

आप इस सीमा से बाहर के अनुपातों का उपयोग कर सकते हैं, लेकिन आमतौर पर ऐसा नहीं करना चाहिए। 1.1 से नीचे, अनुपात इतने छोटे होते हैं कि वे आपस में मिल जाते हैं, आप एक नज़र में शीर्षक 3 और शीर्षक 4 में अंतर नहीं कर सकते। 1.7 से ऊपर, अनुपात इतनी तेज़ी से बढ़ता है कि आपके पास उपयोग करने योग्य मध्य आकार कम पड़ जाते हैं। जो डिज़ाइनर 1.618 से अधिक व्यापक रेंज चाहते हैं, वे आमतौर पर गलत समस्या का समाधान कर रहे होते हैं; उन्हें दो स्केल चाहिए होते हैं, न कि एक बड़ा स्केल।

अपनी डेटा घनत्व संबंधी आवश्यकताओं के अनुसार अनुपात चुनें

एक सघन डेटा ऐप के लिए तंग अनुपात चाहिए, एक संपादकीय साइट के लिए चौड़ा अनुपात चाहिए, और गलत अनुपात का असर हर जगह दिखाई देता है।

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

यदि उत्पाद SaaS मार्केटिंग पेज, कंटेंट साइट, उत्पाद पेज या डॉक्यूमेंटेशन पेज है, तो डिफ़ॉल्ट रूप से 1.25 या 1.333 अनुपात चुनें। मध्य अनुपात हेडिंग को पर्याप्त आकर्षण प्रदान करते हैं जिससे अनुभाग अलग-अलग दिखाई देते हैं, और तुलनात्मक रूप से बॉडी टेक्स्ट छोटा नहीं लगता। अधिकांश B2B उत्पाद इसी अनुपात में आते हैं, और Tailwind, Material और Stripe सभी इसी अनुपात पर केंद्रित हैं।

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

गलती यह है कि किसी प्रभावशाली दिखने वाले अनुपात (गोल्डन रेशियो एक प्रसिद्ध उदाहरण है) को चुनकर उसे ऐसे उत्पाद पर थोपना जिसे उस दिखावे की ज़रूरत नहीं है। CRM पर 1.618 का अनुपात पढ़ने में मुश्किल होता है। संपादकीय साइट पर 1.125 का अनुपात कमज़ोर दिखता है। अपने उत्पाद की वास्तविक ज़रूरतों के अनुसार अनुपात चुनें, फिर उसे लागू करें।

स्केल करने से पहले बेस साइज़ लॉक करें

बेस फ़ॉन्ट साइज़ वह आधार है जिससे हर चरण को मापा जाता है; अगर यह गलत हुआ तो हर चरण गलत होगा।

वेब पर बॉडी टेक्स्ट के लिए डिफ़ॉल्ट रूप से 16 पिक्सल का इस्तेमाल करें। ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट साइज़ 16 है, यूज़र एजेंट स्टाइलशीट का फ़ॉन्ट साइज़ 16 है, वयस्कों के लिए औसत पसंदीदा पढ़ने का साइज़ 16 है, और WCAG और Apple ह्यूमन इंटरफ़ेस गाइडलाइन्स दोनों ही बॉडी टेक्स्ट के लिए न्यूनतम फ़ॉन्ट साइज़ 16 मानते हैं। यदि आपके उपयोगकर्ता अधिक उम्र के हैं या उत्पाद में पढ़ने की अधिक आवश्यकता है, तो आप फ़ॉन्ट साइज़ 17 या 18 तक जा सकते हैं, लेकिन बॉडी टेक्स्ट के लिए फ़ॉन्ट साइज़ कभी भी 16 से कम नहीं होना चाहिए।

यह आधार बिंदु गुणक बिंदु है। इससे ऊपर का प्रत्येक चरण आधार को किसी घात के अनुपात से गुणा करने पर प्राप्त होता है। इससे नीचे का प्रत्येक चरण आधार को किसी घात के अनुपात से भाग देने पर प्राप्त होता है। यदि आप आधार बदलते हैं, तो प्रत्येक चरण का आकार बदल जाता है। यह ठीक है, यह सिस्टम का कार्य है। लेकिन इसका मतलब है कि आधार बदलना एक संरचनात्मक परिवर्तन है, न कि प्रति स्क्रीन समायोजन, और इसे स्केल जारी होने से पहले एक बार, सोच-समझकर किया जाना चाहिए।

मोबाइल के लिए, आप आधार को कम (15 या 16) कर सकते हैं और सापेक्ष इकाइयों पर निर्भर रह सकते हैं। प्रिंट के लिए, बेस आमतौर पर 11 या 12 पॉइंट होता है और अनुपात वही रहता है। कोड ब्लॉक वाले दस्तावेज़ों के लिए, बॉडी को 16 और कोड मोनो को 14 पर सेट करें, और यही अनुपात कोड स्केल पर भी लागू करें। बेस प्रति माध्यम होता है, अनुपात प्रति उत्पाद होता है, और ये दोनों निर्णय आप एक बार ही लेते हैं।

एक और नियम। वेब पर बेस को पिक्सेल में नहीं, बल्कि रेम में सेट करें। पूरा स्केल रेम में होना चाहिए ताकि उपयोगकर्ता की फ़ॉन्ट साइज़ प्राथमिकताएँ और एक्सेसिबिलिटी टूल (ज़ूम, रीडिंग मोड, ब्राउज़र स्केलिंग) सही ढंग से काम करें। टेलविंड पहले से ही ऐसा करता है। मटेरियल भी ऐसा करता है। Apple का iOS डायनामिक टाइप भी यही करता है। यदि आपका स्केल पिक्सेल में हार्ड-कोडेड है, तो आप प्लेटफ़ॉर्म के नियमों का उल्लंघन कर रहे हैं।

चरण जनरेट करें, उन्हें भूमिका के अनुसार लेबल करें

सात से नौ चरणों का स्केल उत्पाद के सभी आवश्यक साइज़ को कवर करता है, उन्हें साइज़ के अनुसार नहीं, बल्कि भूमिका के अनुसार नाम दें।

16 पिक्सेल का बेस और 1.25 का अनुपात लें। चरण इस प्रकार हैं:

• 10 (अतिरिक्त छोटा कैप्शन, फुटनोट)
• 13 (छोटा, द्वितीयक पाठ)
• 16 (मुख्य भाग, आधार)
• 20 (प्रमुख भाग, बड़ा पाठ)
• 25 (h4, छोटा शीर्षक)
• 31 (h3, मध्य शीर्षक)
• 39 (h2, बड़ा शीर्षक)
• 49 (h1, पृष्ठ शीर्षक)
• 61 (प्रदर्शन, मुख्य पाठ)

नौ चरण। यही पूरा उत्पाद है। कुछ उत्पाद सात या आठ चरणों का उपयोग करते हैं, कुछ दस तक जाते हैं, लेकिन दस के बाद आकार कम होने लगते हैं और ऐसे आकार मिलते हैं जिनका उपयोग कोई नहीं करता।

अब इन्हें नाम दें। "text-31" या "39px" नहीं। इन्हें भूमिका के अनुसार नाम दें: कैप्शन, छोटा, मुख्य भाग, प्रमुख, h4, h3, h2, h1, प्रदर्शन। भूमिका के नाम इंजीनियरिंग टीम के साथ अनुबंध हैं, पिक्सेल मान नहीं। आधार या अनुपात बदलने पर पिक्सेल मान बदल सकता है, लेकिन भूमिका वही रहती है। h1 हमेशा सबसे बड़ा शीर्षक होता है। बॉडी हमेशा आधार होती है। कैप्शन हमेशा सबसे छोटा पठनीय टेक्स्ट होता है।

यही कारण है कि स्केल एक स्प्रेडशीट के बजाय एक सिस्टम है। एक डिज़ाइनर कहता है "यह बॉडी है" और एक इंजीनियर टेक्स्ट-बॉडी भेज देता है। यदि अगले तिमाही में स्केल बदलता है, तो बॉडी का मतलब बॉडी ही रहता है, और प्रत्येक कंपोनेंट स्वचालित रूप से नया मान ग्रहण कर लेता है। किसी को भी कोडबेस में प्रत्येक 16 को ढूंढकर उसे 17 में बदलने की आवश्यकता नहीं होती है।

मटेरियल डिज़ाइन 3 अपने स्केल को भूमिका के अनुसार नाम देता है: डिस्प्ले, हेडलाइन, टाइटल, लेबल, बॉडी, और प्रत्येक के भीतर आकार के विकल्प (बड़ा, मध्यम, छोटा) होते हैं। Apple का HIG बड़े टाइटल, टाइटल 1, टाइटल 2, टाइटल 3, हेडलाइन, बॉडी, कॉलआउट, सबहेड, फुटनोट, कैप्शन 1, कैप्शन 2 भेजता है। टेलविंड टेक्स्ट-xs से लेकर टेक्स्ट-9xl तक भेजता है, जो भूमिका नामकरण के बजाय टी-शर्ट साइजिंग है, और यही वह जगह है जहां टेलविंड के डिफ़ॉल्ट मटेरियल की तुलना में कमजोर हैं। Tailwind को अपनाने वाली अधिकांश टीमें अंततः टी-शर्ट क्लास के ऊपर भूमिका-आधारित उपनामों की एक परत जोड़ देती हैं।

स्केल को डिज़ाइन टोकन में बदलें

टोकन स्केल को डिज़ाइनर की स्प्रेडशीट से टीम के अनुबंध में बदल देते हैं।

डिजाइन टोकन नामित मान हैं जो डिज़ाइन निर्णयों का प्रतिनिधित्व करते हैं। टाइप स्केल के लिए, आपको तीन परतों की आवश्यकता होती है:

1. मूल टोकन वास्तविक आकार मान। font-size-100, font-size-200, आदि, या font-size-body, font-size-h1 जैसे नामित मान। ये सत्य का स्रोत हैं।

2. अर्थपरक टोकन आशय व्यक्त करने वाले उपनाम। text-heading-page, text-body-default, text-caption। अर्थपरक टोकन मूल टोकन की ओर इंगित करते हैं। कंपोनेंट्स सिमेंटिक टोकन का उपयोग करते हैं, कभी भी सीधे रॉ टोकन का नहीं।

3. कंपोनेंट टोकन। विशिष्ट कंपोनेंट्स के भीतर बाइंडिंग। card-title-size, text-heading-card को इंगित करता है, जो font-size-200 को इंगित करता है। कंपोनेंट टोकन आपको सिस्टम को बाधित किए बिना प्रति-कंपोनेंट ओवरराइड की सुविधा देते हैं।

16-बेस, 1.25-रेशियो स्केल के लिए एक न्यूनतम JSON टोकन फ़ाइल:

{
  "font-size": {
    "raw": {
      "100": { "value": "0.625rem" },
      "200": { "value": "0.8125rem" },
      "300": { "value": "1rem" },
      "400": { "value": "1.25rem" },
      "500": { "value": "1.5625rem" },
      "600": { "value": "1.9375rem" },
      "700": { "value": "2.4375rem" },
      "800": { "value": "3.0625rem" },
      "900": { "value": "3.8125rem" }
    },
    "semantic": {
      "caption":  { "value": "{font-size.raw.100}" },
      "small":    { "value": "{font-size.raw.200}" },
      "body":     { "value": "{font-size.raw.300}" },
      "lead":     { "value": "{font-size.raw.400}" },
      "h4":       { "value": "{font-size.raw.500}" },
      "h3":       { "value": "{font-size.raw.600}" },
      "h2":       { "value": "{font-size.raw.700}" },
      "h1":       { "value": "{font-size.raw.800}" },
      "display":  { "value": "{font-size.raw.900}" }
    }
  }
}

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

स्केल को Figma वैरिएबल में डालें

Figma वैरिएबल वह जगह है जहाँ डिज़ाइन टीम के लिए स्केल रहता है, जिसे सिमेंटिक एलियास के साथ एक ही टाइपोग्राफी कलेक्शन के रूप में संरचित किया गया है।

टाइपोग्राफी नाम से एक वैरिएबल कलेक्शन बनाएँ। इसके अंदर, प्रत्येक रॉ साइज़ (size/100 से size/900) के लिए एक संख्या वैरिएबल जोड़ें, जिसमें rem-समतुल्य पिक्सेल मान (10, 13, 16, 20, 25, 31, 39, 49, 61) हों। फिर उपनामों का दूसरा स्तर जोड़ें: text/caption, text/small, text/body, text/lead, text/h4, text/h3, text/h2, text/h1, text/display। प्रत्येक उपनाम एक रॉ साइज़ वेरिएबल को इंगित करता है।

फिर प्रत्येक भूमिका के लिए एक टेक्स्ट स्टाइल बनाएं। Heading/H1 साइज़ के लिए text/h1, फ़ैमिली के लिए हेडिंग का फ़ॉन्ट, वेट के लिए हेडिंग का वेट और लीडिंग के लिए हेडिंग का लाइन-हाइट अनुपात का उपयोग करता है। Body/Default, text/body, बॉडी फ़ॉन्ट और रेगुलर वेट का उपयोग करता है। प्रत्येक भूमिका के लिए इसे दोहराएं।

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

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

स्केल को टेलविंड CSS में जोड़ें

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

Tailwind के डिफ़ॉल्ट fontSize को अपने स्केल से बदलें, tailwind.config.js में:

module.exports = {
  theme: {
    fontSize: {
      'caption':  ['0.625rem',  { lineHeight: '1rem' }],
      'small':    ['0.8125rem', { lineHeight: '1.25rem' }],
      'body':     ['1rem',      { lineHeight: '1.5rem' }],
      'lead':     ['1.25rem',   { lineHeight: '1.75rem' }],
      'h4':       ['1.5625rem', { lineHeight: '2rem' }],
      'h3':       ['1.9375rem', { lineHeight: '2.375rem' }],
      'h2':       ['2.4375rem', { lineHeight: '2.875rem' }],
      'h1':       ['3.0625rem', { lineHeight: '3.5rem' }],
      'display':  ['3.8125rem', { lineHeight: '4.25rem' }],
    },
  },
}

अब मार्कअप में text-h1 का वही अर्थ है जो Figma में Heading/H1 का है। क्लास का नाम ही अनुबंध है। इंजीनियर आकार नहीं चुनते, वे भूमिकाएँ चुनते हैं, और निर्माण के समय भूमिका सही पिक्सेल मान में परिवर्तित हो जाती है।

यहाँ लाइन-हाइट मनमानी नहीं हैं। पैटर्न यह है: छोटे आकार के लिए बॉडी लाइन-हाइट कम, बॉडी और लीड के लिए लीडिंग लाइन-हाइट कम, और हेडिंग के लिए लीडिंग लाइन-हाइट फिर से कम। एक सामान्य नियम यह है कि बॉडी लाइन-हाइट 1.5, हेडिंग लाइन-हाइट 1.1 से 1.2, और लीड और h4 आकार के आसपास 1.3 से 1.4 तक का संक्रमण होता है। आप इसे एक अन्य स्केल (लीडिंग स्केल) या प्रति-चरण मानों के रूप में व्यक्त कर सकते हैं, लेकिन आकार और लीडिंग के बीच संबंध सोच-समझकर निर्धारित किया जाना चाहिए, न कि अंदाजे से।

यदि आप अपने स्केल के साथ Tailwind की डिफ़ॉल्ट क्लास उपलब्ध रखना चाहते हैं (पुराने कोड या तृतीय-पक्ष घटकों के लिए), तो fontSize को सीधे बदलने के बजाय extend का उपयोग करें। लेकिन दीर्घकालिक लक्ष्य एक स्केल है, दो नहीं। एक ही उत्पाद में दो टाइप स्केल का मतलब सिर्फ एक टाइप स्केल और कई सारी गड़बड़ियाँ हैं।

टाइपफेस विकल्पों के लिए स्केल को एक वास्तविक फ़ॉन्ट पेयरिंग गाइड और स्केल को संदर्भ में रखने वाले डिजाइन प्रणाली फ्रेमवर्क के साथ जोड़ें। स्केल टाइपोग्राफी सिस्टम का एक हिस्सा है, टाइपफेस का चयन और भूमिका मैपिंग इसके अन्य हिस्से हैं। क्या आपको पहले दिन से ही एक कार्यशील स्केल, वास्तविक टोकन और Figma + Tailwind का सही सेटअप चाहिए? Brainy को किराए पर लें का उपयोग करें। हम BrandBrainy और UXBrainy के माध्यम से टोकन, Figma वैरिएबल और Tailwind कॉन्फ़िगरेशन को एक साथ जोड़कर संपूर्ण टाइप सिस्टम उपलब्ध कराते हैं।

स्केल को चालू रखने वाले नियम

हर बंद हो चुके टाइप स्केल का अंत एक ही तरीके से होता है, अपवाद के कारण।

तीन नियम किसी भी टूल से ज़्यादा समय तक स्केल को चालू रखेंगे:

पहला नियम: हर नया कंपोनेंट रोल चुनता है, साइज़ नहीं। कार्ड बनाने वाला डिज़ाइनर बॉडी के लिए बॉडी, टाइटल के लिए H3 और टाइमस्टैम्प के लिए कैप्शन चुनता है। वे इंस्पेक्टर में font-size: 18px टाइप नहीं करते। अगर रोल मौजूद नहीं है, तो वे सिस्टम के ज़रिए एक नया रोल प्रस्तावित करते हैं, न कि एक बार का ओवरराइड।

नियम दो: अपवादों को नाम और तिथि दी जाती है। यदि मार्केटिंग टीम को किसी अभियान पृष्ठ पर हीरो कॉलम के लिए 72px की हेडलाइन चाहिए और डिस्प्ले साइज़ 61px है, तो अपवाद को नाम (hero-marketing-q3-launch) और तिथि दी जाती है। अभियान के लॉन्च होने के बाद, अपवाद को स्केल में शामिल कर लिया जाता है (यदि वह पुन: उपयोग योग्य है) या उसे हटा दिया जाता है (यदि वह एक बार का उपयोग था)। बिना नाम बताए ओवरराइड की अनुमति नहीं है।

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

जिन टीमों का टाइप स्केल खो जाता है, वे बाद में हमेशा एक ही कहानी सुनाती हैं। किसी को एक बटन के लिए 17px साइज़ चाहिए था, किसी और को एक बैनर के लिए 21px साइज़ चाहिए था, छह महीने बाद कोडबेस में सैंतालीस फ़ॉन्ट साइज़ होते हैं और कोई नहीं बता सकता कि उनमें से कौन से असली हैं। स्केल अब मौजूद नहीं है। अब बस फ़ॉन्ट साइज़ का कब्रिस्तान बचा है।

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

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

मॉड्यूलर टाइप स्केल क्या है?

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

मुझे अपने टाइप स्केल के लिए कौन सा अनुपात इस्तेमाल करना चाहिए?

अपने उत्पाद की घनत्व संबंधी आवश्यकताओं के अनुसार अनुपात चुनें। डैशबोर्ड और एडमिन टूल जैसे सघन डेटा उत्पादों के लिए 1.125 या 1.2 का उपयोग करें, जहाँ हेडिंग डेटा से ध्यान नहीं भटकाना चाहिए। मानक SaaS मार्केटिंग पेज, कंटेंट साइट और उत्पाद पेज के लिए 1.25 या 1.333 का उपयोग करें, जहाँ अधिकांश B2B उत्पाद मौजूद होते हैं। संपादकीय, पत्रिका या डिस्प्ले-आधारित उत्पादों के लिए 1.414 या 1.618 का उपयोग करें, जहाँ हेडलाइन को हेडलाइन जैसा महसूस होना चाहिए। सबसे आम गलती यह है कि लोग प्रभावशाली दिखने के कारण अनुपात चुन लेते हैं, न कि इसलिए कि वह उत्पाद के लिए उपयुक्त है।

टाइप स्केल में कितने आकार होने चाहिए?

अधिकांश उत्पादन-तैयार स्केल में सात से नौ आकार होते हैं। कैप्शन, स्मॉल, बॉडी, लीड, h4, h3, h2, h1 और डिस्प्ले लगभग हर वास्तविक उत्पाद सतह को कवर करते हैं। सात से कम आकार होने पर कुछ अंतराल रह जाते हैं जिन्हें डिज़ाइनर अलग-अलग ओवरराइड से भरते हैं। दस से अधिक साइज़ का उपयोग करने पर स्केल इतना पतला हो जाता है कि कुछ साइज़ का उपयोग ही नहीं होता और सिस्टम को बनाए रखना कठिन हो जाता है। सात से नौ साइज़ सबसे उपयुक्त हैं, और रोल के नाम यह बताने चाहिए कि प्रत्येक साइज़ किस लिए है, न कि उसका पिक्सेल मान।

टाइप स्केल मानों के लिए rem या px का उपयोग करना चाहिए?

वेब के लिए rem का उपयोग करें। ब्राउज़र रूट फ़ॉन्ट का साइज़ डिफ़ॉल्ट रूप से 16 पिक्सेल होता है, लेकिन उपयोगकर्ता इसे एक्सेसिबिलिटी सेटिंग्स और ब्राउज़र प्राथमिकताओं के माध्यम से बदल सकता है, और rem-आधारित स्केल स्वचालित रूप से इन प्राथमिकताओं का सम्मान करता है। पिक्सेल-आधारित स्केल इन्हें अनदेखा करते हैं। Tailwind, Material Design और अधिकांश आधुनिक डिज़ाइन सिस्टम इसी कारण से rem का उपयोग करते हैं। मोबाइल प्लेटफ़ॉर्म के लिए, प्लेटफ़ॉर्म का अनुसरण करें: iOS पॉइंट्स का उपयोग करता है और डायनामिक टाइप का समर्थन करता है, Android स्केल-स्वतंत्र पिक्सेल (sp) का उपयोग करता है। सिद्धांत समान है, प्लेटफ़ॉर्म की सापेक्ष इकाई का उपयोग करें, निरपेक्ष इकाइयों का नहीं।

मॉड्यूलर टाइप स्केल और डिज़ाइन टोकन में क्या अंतर है?

मॉड्यूलर टाइप स्केल गणितीय है, डिज़ाइन टोकन गणितीय प्रक्रिया को प्रदर्शित करते हैं। यह स्केल मानों (10, 13, 16, 20, 25, 31, 39, 49, 61) को परिभाषित करता है। टोकन एक नामित परत है जो डिज़ाइन सिस्टम के बाकी हिस्सों को इन मानों को हार्ड-कोड किए बिना संदर्भित करने की अनुमति देती है। आप टोकन के बिना भी स्केल बना सकते हैं, लेकिन यह स्केल वास्तविक कोडबेस में टिक नहीं पाएगा। आप स्केल के बिना भी टोकन बना सकते हैं, लेकिन मान मनमाने होंगे। संपूर्ण सिस्टम स्केल को टोकन के रूप में व्यक्त करता है, जिसमें रॉ, सिमेंटिक और कंपोनेंट परतें होती हैं, और इसे एक ही स्रोत के माध्यम से Figma और कोड को भेजा जाता है।

वह पैटर्न जिसे अधिकांश टाइप स्केल अनदेखा करते हैं

टाइप स्केल फ़ॉन्ट आकारों की सूची नहीं है, यह एक अनुबंध है कि आपके उत्पाद में टेक्स्ट को किस प्रकार पदानुक्रम प्राप्त होता है।

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

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

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

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