शीर्षक और मुख्य टेक्स्ट के लिए अच्छी तरह मेल खाने वाली फ़ॉन्ट जोड़ियाँ खोजें। कोई जोड़ी चुनें, अपने टेक्स्ट से प्रीव्यू करें, और CSS कोड या Google Fonts लिंक अपने प्रोजेक्ट में कॉपी करें।
हर जोड़ी एक हेडिंग फ़ॉन्ट को बॉडी फ़ॉन्ट के साथ इस तरह मिलाती है कि कंट्रास्ट और पढ़ने का आराम, दोनों संभाले रहें: सेरिफ़ हेडिंग के साथ ह्यूमनिस्ट सैंस बॉडी, ज्योमेट्रिक सैंस के साथ मोनोस्पेस लहजे, कंडेंस्ड डिस्प्ले फ़ॉन्ट के साथ भरोसेमंद बॉडी टेक्स्ट फ़ॉन्ट। शैली से छाँटें, अपना हेडिंग प्रीव्यू में डालें, और Google Fonts का इम्पोर्ट लाइन व CSS साथ-साथ कॉपी करें।
उपयोग कैसे करें
चरण 1 — फ़ॉन्ट जोड़ियाँ देखें या शैली से फ़िल्टर करें (सेरिफ़, सैन्स-सेरिफ़, डिस्प्ले, मोनोस्पेस, हस्तलिखित)।
चरण 2 — किसी जोड़ी पर क्लिक करके सैंपल टेक्स्ट या अपने टेक्स्ट के साथ प्रीव्यू देखें।
चरण 3 — अपनी चुनी गई जोड़ी के लिए Google Fonts इम्पोर्ट लिंक या CSS कोड कॉपी करें।
कब उपयोग करें
ब्लॉग या लैंडिंग पेज के लिए हेडिंग और बॉडी फ़ॉन्ट CSS लिखने से पहले तय करना।
स्लाइड डेक या पोर्टफ़ोलियो की टाइपोग्राफ़ी बदलना, बिना लेआउट छुए।
जिन दो फ़ॉन्ट का आप पहले से इस्तेमाल कर रहे हैं, उनकी जोड़ी सच में जँचती है या नहीं, यह जाँचना।
परिणाम
एक ब्लॉग बना रहे हैं: 'Playfair Display + Source Sans 3' जोड़ी चुनें, अपनी हेडलाइन का प्रीव्यू देखें और CSS कॉपी करके अपनी स्टाइलशीट में पेस्ट करें।
अक्सर पूछे जाने वाले प्रश्न
क्या ये सारे फ़ॉन्ट मुफ़्त हैं और व्यावसायिक उपयोग में ले सकते हैं?
हाँ। हर जोड़ी SIL Open Font License या उसी जैसी ओपन लाइसेंस वाले Google Fonts से ली गई है। आप इन्हें व्यावसायिक साइट पर एम्बेड कर सकते हैं, ऐप के साथ शिप कर सकते हैं और क्लाइंट प्रोजेक्ट में बिना अतिरिक्त लाइसेंस उपयोग कर सकते हैं।
दो फ़ॉन्ट «अच्छी जोड़ी» कब बनते हैं?
कंट्रास्ट और लय का संतुलन ज़रूरी है। हेडिंग में व्यक्तित्व चाहिए (सेरिफ़, डिस्प्ले, वज़नदार ज्योमेट्रिक), जबकि बॉडी टेक्स्ट को पढ़ने की रफ़्तार में पीछे चला जाना चाहिए। यहाँ जान-बूझकर श्रेणियाँ मिलाई गई हैं: व्यक्तित्व वाला सेरिफ़ हेडिंग और न्यूट्रल सैंस बॉडी।
क्या हेडिंग और बॉडी, दोनों के लिए एक ही फ़ॉन्ट इस्तेमाल कर सकते हैं?
बिलकुल कर सकते हैं, खासकर Inter, Source Sans, Roboto जैसी सुपर-फ़ैमिली के साथ, जिनमें कई वज़न आते हैं। दो फ़ॉन्ट मिलाना दृश्य लय बढ़ाता है, पर डॉक्युमेंटेशन और डैशबोर्ड में एक ही फ़ैमिली के Regular और Bold भी काफ़ी साफ़-सुथरे दिखते हैं।
दो Google Fonts लोड करने से पेज धीमा हो जाएगा क्या?
एक-एक वज़न वाले दो फ़ैमिली मिलकर लगभग 30 से 50 KB और एक अतिरिक्त HTTP रिक्वेस्ट जोड़ते हैं। बनाए गए CSS को सेल्फ़-होस्ट करना, `font-display: swap` लगाना, और सिर्फ़ ज़रूरी वज़न रखना — इससे असर लगभग दिखाई नहीं देता।
जोड़ी चुनने के बाद टाइपोग्राफ़ी एक जैसी कैसे रखूँ?
CSS में `font-family` वेरिएबल से डिफ़ॉल्ट तय करें, साइज़ का एक पैमाना तय करें (जैसे 1.25 अनुपात), और घटकों के अंदर मनमर्ज़ी से नए फ़ॉन्ट न जोड़ें। ध्यान से चुनी दो फ़ॉन्ट लगभग सारे दस्तावेज़ों को संभाल लेती हैं।
