टाइपोग्राफ़ी स्केल कैलकुलेटर
सुसंगत शीर्षक पदानुक्रम बनाएँ।
एक आधार फ़ॉन्ट आकार दर्ज करें और स्केल अनुपात चुनें, ताकि H1 से छोटे टेक्स्ट तक पूरी मॉड्यूलर स्केल मिले, साथ में मिलता-जुलता CSS स्निपेट।
1.250
h1तेज़ भूरा लोमड़ी39.06pxh2तेज़ भूरा लोमड़ी31.25pxh3तेज़ भूरा लोमड़ी25.00pxh4तेज़ भूरा लोमड़ी20.00pxh5तेज़ भूरा लोमड़ी16.00pxpतेज़ भूरा लोमड़ी16.00pxsmallतेज़ भूरा लोमड़ी12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}टाइपोग्राफ़ी स्केल कैसे बनाएँ
- अपना आधार फ़ॉन्ट आकार पिक्सल में दर्ज करें।
- स्केल अनुपात चुनें, या अपना अनुपात चुनने के लिए कस्टम चुनें।
- हर शीर्षक स्तर के लिए बनाए गए आकार देखें।
- CSS वेरिएबल और नियम अपनी स्टाइलशीट में कॉपी करें।
अक्सर पूछे जाने वाले प्रश्न
मुझे कौन-सा अनुपात चुनना चाहिए?
1.125 और 1.2 सूक्ष्म स्केल देते हैं; 1.333 और 1.618 अधिक कंट्रास्ट बनाते हैं। अधिकांश वेबसाइटों के लिए 1.2 से 1.25 उपयोग करें।
H1 पूर्वावलोकन सीमित क्यों है?
बहुत बड़े आकार केवल पूर्वावलोकन में सीमित हैं; CSS आउटपुट सटीक गणना किया मान रखता है।
क्या इसे rem इकाइयों के साथ उपयोग कर सकते हैं?
हाँ। पिक्सल मानों को अपनी रूट फ़ॉन्ट आकार से भाग दें, या बनाए गए CSS में px की जगह rem लिखें।