डिज़ाइन / टाइपोग्राफी

टाइप स्केल जनरेटर (CSS और Tailwind के लिए मॉड्यूलर स्केल)

बेस फ़ॉन्ट आकार और 1.25 या स्वर्ण अनुपात जैसे अनुपात से मॉड्यूलर टाइप स्केल बनाएं, अपने टेक्स्ट के साथ हर चरण का प्रीव्यू देखें और आकारों को rem या px में CSS कस्टम प्रॉपर्टीज़ या Tailwind fontSize कॉन्फ़िग के रूप में कॉपी करें।

टाइप स्केल जनरेटर (CSS और Tailwind के लिए मॉड्यूलर स्केल): हर आकार, हर चरण के लिए बेस आकार को अनुपात से एक बार गुणा करके निकाला जाता है: 16 px और मेजर थर्ड, 1.25 के साथ ऊपर के चरण 20, 25, 31.25, 39.06 और 48.83 px हैं, जबकि नीचे के चरण 12.8 और 10.24 px हैं। आकारों को px और rem में सूचीबद्ध किया जाता है और Tailwind के text आकारों की तरह xs से 4xl तक नाम दिया जाता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी
डेवलपर टूल्स
रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
टाइप स्केल जनरेटरलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

4xl48.83 px · 3.0518 remफुर्तीली भूरी लोमड़ी
3xl39.06 px · 2.4414 remफुर्तीली भूरी लोमड़ी
2xl31.25 px · 1.9531 remफुर्तीली भूरी लोमड़ी
xl25 px · 1.5625 remफुर्तीली भूरी लोमड़ी
lg20 px · 1.25 remफुर्तीली भूरी लोमड़ी
base16 px · 1 remफुर्तीली भूरी लोमड़ी
sm12.8 px · 0.8 remफुर्तीली भूरी लोमड़ी
xs10.24 px · 0.64 remफुर्तीली भूरी लोमड़ी
:root {
  --step-5: 3.0518rem;
  --step-4: 2.4414rem;
  --step-3: 1.9531rem;
  --step-2: 1.5625rem;
  --step-1: 1.25rem;
  --step-0: 1rem;
  --step--1: 0.8rem;
  --step--2: 0.64rem;
}

हर चरण नीचे वाले आकार को अनुपात से गुणा करके बनता है: 16 px के आधार और 1.25 के अनुपात पर ऊपर के आकार 20, 25 और 31.25 px, और नीचे के आकार 12.8 और 10.24 px होंगे। 1.125 जैसे छोटे अनुपात सघन इंटरफ़ेस के लिए उपयुक्त हैं; 1.5 जैसे बड़े अनुपात हेडलाइन में अधिक कंट्रास्ट देते हैं। rem मान ब्राउज़र के डिफ़ॉल्ट रूट आकार 16 px को मानकर चलते हैं।

Ratio के नाम कहाँ से आए

ये नाम संगीत के intervals से आए हैं: perfect fifth का frequency ratio 3 : 2 होता है, इसलिए 1.5 पर बना type scale, fifth के अंतर वाले सुरों की तरह उसी अनुपात में बढ़ता है। Tim Brown की modular scale ने इस विचार को वेब के लिए लोकप्रिय बनाया।

Golden ratio, 1.618, बहुत बड़े अंतर देती है; इसके बारे में स्वर्ण अनुपात पर बताया गया है।

Rounding

Browsers fractional pixel sizes दिखाते हैं, इसलिए 31.25 px को ऐसे ही रखना ठीक है। अगर किसी design system को whole pixels चाहिए, तो हर step को round करें और rem values को चार दशमलव तक रखें, जैसा यह टूल करता है; दूसरी values को px to rem converter से बदलें।

इस्तेमाल करने का तरीका

  1. बेस आकार दर्ज करें और एक अनुपात चुनें।
  2. ऊपर और नीचे जाने वाले चरणों की संख्या सेट करें और अपने टेक्स्ट के साथ उनका प्रीव्यू देखें।
  3. CSS वेरिएबल या Tailwind कॉन्फ़िग कॉपी करें।

गोपनीयता और सीमाएँ

सब कुछ आपके ब्राउज़र में चलता है।

संबंधित टूल्स

CSS clamp()CSS यूनिट कन्वर्टरस्वर्ण अनुपात

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

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

बहुत सारे टेक्स्ट और छोटी स्क्रीन वाले इंटरफ़ेस में 1.125 या 1.2 जैसे हल्के अनुपात अच्छे रहते हैं; संपादकीय पेज और लैंडिंग पेज अधिक प्रभावशाली हेडलाइन के लिए 1.333 से 1.618 तक के अनुपात इस्तेमाल कर सकते हैं।

rem का इस्तेमाल क्यों करें?

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

क्या मैं आकारों को फ़्लूइड बना सकता हूँ?

हां: किसी चरण के लिए सबसे छोटा और सबसे बड़ा वांछित आकार लें और CSS clamp जनरेटर से उन्हें clamp() एक्सप्रेशन में बदल दें।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं