Google Fonts शीर्षकों और मुख्य टेक्स्ट संयोजनों का मिलान करें और वास्तविक वेब लेआउट में पूर्वावलोकन करें।
उत्कृष्ट टाइपोग्राफी किसी भी डिजिटल इंटरफ़ेस, वेबसाइट या संपादकीय प्रकाशन की दृश्य रीढ़ होती है। शीर्षकों (Headings) और मुख्य पाठ (Body Text) के लिए दो पूरक फ़ॉन्ट्स का सामंजस्यपूर्ण संयोजन बनाना केवल व्यक्तिगत पसंद नहीं, बल्कि पठनीयता (Readability), दृश्य पदानुक्रम (Visual Hierarchy) और ब्रांड व्यक्तित्व का गणितीय संतुलन है। यह इंटरैक्टिव वर्कबेंच वेब डिज़ाइनरों और फ्रंटेंड डेवलपर्स को मॉड्यूलर टाइप स्केल (Modular Type Scale) के आधार पर लाइव पूर्वावलोकन और फ़ॉन्ट पेयरिंग का परीक्षण करने में सक्षम बनाता है।
एक वास्तविक वेब डिज़ाइन परिदृश्य देखें: एक फिनटेक ब्लॉग के लिए एक डिज़ाइनर अधिकार और विश्वसनीयता स्थापित करने के लिए हेडिंग के लिए सुरुचिपूर्ण सेरिफ़ फ़ॉन्ट 'Playfair Display' और बॉडी टेक्स्ट के लिए आधुनिक अत्यधिक सुपाठ्य सेन्स-सेरिफ़ 'Inter' का चयन करता है। 16px के बेस साइज़ और 1.25 के 'मेजर थर्ड' (Major Third) मॉड्यूलर अनुपात का उपयोग करते हुए, टूल स्वचालित रूप से संपूर्ण टाइपोग्राफी स्केल की गणना करता है: H1 के लिए 39.06px, H2 के लिए 31.25px, H3 के लिए 25.00px, H4 के लिए 20.00px, और बॉडी के लिए 16.00px। लाइव पूर्वावलोकन में लाइन-हाइट (1.6) और लेटर-स्पेसिंग को ठीक करके, डेवलपर तुरंत रेडी-टू-यूज़ CSS कोड और Google Fonts एम्बेड लिंक प्राप्त करता है।
सभी फ़ॉन्ट पूर्वावलोकन, टाइप स्केल गणनाएं और स्टाइलशीट नियम सीधे आपके ब्राउज़र में निष्पादित होते हैं। कोई भी डिज़ाइन कॉन्फ़िगरेशन या टेक्स्ट सामग्री किसी बाहरी सर्वर पर संग्रहीत नहीं की जाती है।
Modular Scale Step: Font_Size(n) = Base_Size × (Scale_Ratio)^n ; Line_Height = Base_Size × 1.5 to 1.7
मानकीकृत बेस फ़ॉन्ट आकार (उदा. 16px) को ज्यामितीय अनुपात (जैसे मेजर थर्ड 1.25 या परफेक्ट फोर्थ 1.333) की घात से गुणा करके सुसंगत पदानुक्रमित शीर्षक आकार निकाले जाते हैं।
.woff2 / .ttf फ़ाइल है, तो आप उसे सीधे ब्राउज़र में लोड करके टेस्ट कर सकते हैं।tailwind.config.js के theme.extend.fontSize ऑब्जेक्ट के रूप में कॉपी कर सकते हैं।