टाइप स्केल जनरेटर (फ़ॉन्ट आकार प्रणाली)

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

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

1. पाठ का "आधार आकार" px में लिखें और "अनुपात" चुनें; "कस्टम" में 1.05 से 2 तक कोई भी मान लिखा जा सकता है।
2. "पूर्णांकन" में दशमलव रखें, पूर्ण px करें, या आकारों को "4 px ग्रिड" पर बिठाएँ।
3. "लाइन ऊँचाई" तय करें: "शीर्षकों में कम" बड़े आकारों का गुणक घटाता है; "सब जगह समान" एक ही मान रखता है।
4. अपना "पूर्वावलोकन पाठ" लिखें और "पूर्वावलोकन फ़ॉन्ट" बदलकर हर चरण को उसके असली आकार में देखें।
5. "CSS वेरिएबल कॉपी करें", "एलिमेंट CSS कॉपी करें" या "JSON कॉपी करें" दबाएँ।

यह कैसे काम करता है

• चरण n का आकार = आधार × अनुपात की n घात। चरण −2 (xs) से +6 (5xl) तक हैं; चरण 0 पाठ (p) है, चरण 1 से 6 h6 से h1 तक हैं।
• rem = px को आधार आकार से भाग देने पर मिला मान; pt = px × 0.75 (96 px प्रति इंच)।
• "शीर्षकों में कम" में गुणक आधार आकार पर "पाठ की लाइन ऊँचाई" से सीधी रेखा में घटकर आधार के 3 गुना पर "शीर्षक की लाइन ऊँचाई" हो जाता है। "4 px ग्रिड" लाइन बॉक्स को भी 4 px के गुणज में पूर्णांकित करता है।
• सेटिंग इसी ब्राउज़र में अगली बार के लिए सहेजी रहती हैं।

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

वेबसाइट के लिए कौन सा अनुपात ठीक है?

1.2 और 1.25 लंबे लेखों के लिए संतुलित शीर्षक देते हैं; 1.333 और उससे ऊपर पोस्टर जैसे बड़े शीर्षक देते हैं। छोटी स्क्रीन पर प्रायः छोटा अनुपात बेहतर दिखता है।

पाठ का फ़ॉन्ट आकार कितना होना चाहिए?

16 px ब्राउज़र का डिफ़ॉल्ट और सामान्य शुरुआत है; लंबे पठन के लिए 17 से 18 px उपयोग होता है। बाकी स्केल आपके लिखे आधार आकार के अनुसार बनता है।

आकारों को rem में कैसे बदलें?

तालिका में px के बगल में rem दिखता है। कॉपी किए गए एलिमेंट CSS की तरह html को आधार आकार px में सेट करने पर 1rem आधार के बराबर हो जाता है।

शीर्षकों की लाइन ऊँचाई कितनी हो?

पाठ प्रायः 1.5 के आसपास और बड़े शीर्षक 1.1 से 1.25 के बीच रहते हैं, ताकि टूटी हुई शीर्षक पंक्तियों के बीच बड़ा अंतर न रहे। स्वचालित मोड यह बदलाव लागू करता है।