मुफ़्त फ़ॉन्ट प्रीव्यू और टेस्टर

यह टूल क्या करता है

एक फ़ॉन्ट प्रीव्यू टूल एक ही स्ट्रिंग को कई टाइपफ़ेस में एक साथ रेंडर करता है ताकि आप उन्हें एक के साथ प्रतिबद्ध हुए बिना अगल-बगल तुलना कर सकें। ऊपर एक बार अपना टेक्स्ट लिखें (प्रोजेक्ट का नाम, वह हेडलाइन जो आप लिख रहे हैं, वह ब्रांड वर्डमार्क जो आप चुन रहे हैं) और गैलरी का हर फ़ॉन्ट उसी स्ट्रिंग को अपने स्वयं के अक्षर-रूप में दिखाता है। आकार, रंग और पृष्ठभूमि को समायोजित करें यह जाँचने के लिए कि तुलना उस आकार और कंट्रास्ट पर कैसी दिखेगी जिस पर वह वास्तव में प्रोडक्शन में दिखाई देगी। CSS font-family घोषणा कॉपी करने के लिए किसी भी फ़ॉन्ट पर क्लिक करें। क्लासिक टाइपोग्राफ़िक तुलना स्ट्रिंग "The quick brown fox jumps over the lazy dog" एक पैनग्राम है (अंग्रेज़ी वर्णमाला का हर अक्षर कम से कम एक बार आता है), उपयोगी क्योंकि यह एक ही छोटे वाक्य में टाइपफ़ेस की हर ग्लिफ़ को व्यायाम कराती है।

वेब-सुरक्षित फ़ॉन्ट्स

"वेब-सेफ़ फ़ॉन्ट्स" 2000 के दशक के शुरुआती से मध्य तक का एक वाक्यांश है, जब CSS वेब फ़ॉन्ट्स (@font-face) का समर्थन भरोसेमंद नहीं था। यह सेट उन टाइपफ़ेस को संदर्भित करता था जो अनिवार्य रूप से हर उपभोक्ता ऑपरेटिंग सिस्टम पर पहले से इंस्टॉल आते थे, ताकि एक डिज़ाइनर उन्हें इस विश्वास के साथ निर्दिष्ट कर सके कि उपयोगकर्ता के ब्राउज़र में वे स्थानीय रूप से होंगे। क्लासिक वेब-सेफ़ सूची: Arial, Helvetica, Times New Roman, Times, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New, Courier, Lucida Console, Palatino, Garamond, Bookman, Comic Sans MS, Impact, Arial Black। हर एक की अपनी कहानी है, Arial Helvetica के विकल्प के लिए Microsoft के लाइसेंसिंग दबाव का Monotype का उत्तर था; Verdana और Georgia को 1996 में Microsoft ने Matthew Carter से उस समय के स्क्रीन रिज़ॉल्यूशन पर पठनीयता के लिए विशेष रूप से कमीशन किया था; Tahoma Verdana की संकरी बहन है। वेब-सेफ़ परंपरा @font-face भरोसेमंद बनने के बाद भी काफ़ी समय तक कायम रही (Internet Explorer ने इसे 1997 में संस्करण 4 से समर्थन दिया, लेकिन 2009 में Firefox 3.5 और 2008 में Safari 3.1 ने इसे क्रॉस-ब्राउज़र व्यावहारिक बनाया) क्योंकि डिज़ाइनर शून्य-विलंबता रेंडरिंग को महत्व देते हैं और जानते हैं कि कस्टम फ़ॉन्ट्स नेटवर्क राउंड-ट्रिप्स की लागत लगाते हैं। वर्तमान सर्वोत्तम अभ्यास एक "सिस्टम फ़ॉन्ट स्टैक" है (Apple का -apple-system, फिर BlinkMacSystemFont, फिर Segoe UI, फिर Roboto, फिर sans-serif) जो बिना कुछ डाउनलोड किए उपयोगकर्ता के OS की मूल UI फ़ॉन्ट चुनता है, तेज़ और प्लेटफ़ॉर्म के लिए दृश्य रूप से उपयुक्त दोनों।

Google Fonts और वेब-फ़ॉन्ट होस्टिंग का युग

Google Fonts मई 2010 में ओपन-सोर्स टाइपफ़ेस की एक मुफ़्त CDN-होस्टेड लाइब्रेरी के रूप में लॉन्च हुई। मूल लॉन्च में 18 फ़ॉन्ट्स थे; 2026 तक कैटलॉग 1,500 से अधिक परिवारों तक पहुँच गया है, सभी SIL Open Font License या समान अनुज्ञेय शर्तों के तहत लाइसेंस प्राप्त। Open Sans (Steve Matteson, 2010), Roboto (Christian Robertson, 2011), Lato (Łukasz Dziedzic, 2010), Montserrat (Julieta Ulanovsky, 2011), Source Sans Pro (Adobe के लिए Paul Hunt, 2012), Inter (Rasmus Andersson, 2016), Poppins (Indian Type Foundry, 2014), Nunito (Vernon Adams, 2011), ये आधुनिक वेब पर सबसे अधिक उपयोग किए जाने वाले टाइपफ़ेस में से हैं, सभी Google Fonts के माध्यम से मुफ़्त उपलब्ध। कैटलॉग का लोडिंग तंत्र वर्षों में विकसित हुआ: मूल 2010 लॉन्च में Google CSS एंडपॉइंट के लिए <link> टैग्स का उपयोग होता था; 2018 के बाद से FOUT/FOIT व्यवहार को नियंत्रित करने के लिए display=swap पैरामीटर पर ज़ोर दिया गया; 2022 की Google Fonts API v2 बेहतर प्रदर्शन के लिए सबसेट प्री-रेंडर करती है; गोपनीयता-संवेदनशील साइटों पर आधुनिक उपयोग अक्सर Google CDN की गोपनीयता और GDPR-अनुपालन चिंताओं से बचने के लिए फ़ॉन्ट्स को स्व-होस्ट करता है (2022 के एक जर्मन अदालती फ़ैसले में विशेष रूप से कहा गया कि उपयोगकर्ता की सहमति के बिना Google के सर्वरों से Google Fonts लोड करना GDPR का उल्लंघन है)। Adobe Fonts (पहले Typekit, 2011 में अधिग्रहीत), Fontshare (Indian Type Foundry से मुफ़्त फ़ॉन्ट्स, 2021), Bunny Fonts (गोपनीयता-सम्मानी Google Fonts मिरर, 2021) मुख्य विकल्प हैं।

फ़ॉन्ट श्रेणियाँ

• सेरिफ़ फ़ॉन्ट्स के अक्षर-रूपों के सिरों पर छोटे प्रक्षेपी स्ट्रोक (सेरिफ़) होते हैं। पुरानी शैली के सेरिफ़ (Garamond, Caslon, Goudy, Sabon) 16वीं शताब्दी के हैं और मोटे और पतले स्ट्रोक के बीच कम कंट्रास्ट रखते हैं। संक्रमणकालीन सेरिफ़ (Baskerville, Times New Roman) 18वीं शताब्दी में अधिक कंट्रास्ट के साथ उभरे। आधुनिक सेरिफ़ (Bodoni, Didot) कंट्रास्ट को चरम तक ले जाते हैं। स्लैब सेरिफ़ (Rockwell, Roboto Slab, Courier) में भारी आयताकार सेरिफ़ होते हैं। वेब बॉडी टेक्स्ट के लिए, स्क्रीन-अनुकूलित सेरिफ़ जैसे Georgia (Microsoft के लिए Matthew Carter, 1996), Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011), और PT Serif (Paratype, 2009) Times New Roman जैसे प्रिंट-व्युत्पन्न टाइपफ़ेस की तुलना में बेहतर पढ़े जाते हैं।
• सैन्स-सेरिफ़ फ़ॉन्ट्स में सेरिफ़ नहीं होते। ज्यामितीय सैन्स (Futura, Avenir, Avant Garde) स्वच्छ ज्यामितीय आकृतियों से बने होते हैं। मानवतावादी सैन्स (Gill Sans, Frutiger, Open Sans, Source Sans Pro) रोमन लेखन से अनुपात उधार लेते हैं और बॉडी टेक्स्ट के लिए सबसे पठनीय होते हैं। ग्रोटेस्क सैन्स (Helvetica, Arial, Akzidenz-Grotesk) 19वीं और 20वीं शताब्दी के औद्योगिक कार्यकर्ता हैं। नियो-ग्रोटेस्क सैन्स (Inter, Roboto, San Francisco, Segoe UI) प्रमुख ऑपरेटिंग सिस्टम और डिज़ाइन सिस्टम के आधुनिक UI डिफ़ॉल्ट हैं। सैन्स-सेरिफ़ वेब बॉडी टेक्स्ट पर हावी हैं क्योंकि वे छोटे पिक्सेल आकारों पर भी पठनीय रहते हैं।
• मोनोस्पेस फ़ॉन्ट्स हर अक्षर को समान चौड़ाई देते हैं, मूल रूप से टाइपराइटर और शुरुआती कंप्यूटर टर्मिनलों के लिए डिज़ाइन किए गए जहाँ हर अक्षर एक निश्चित कोशिका में रहता था। कोड एडिटर, टर्मिनल, तकनीकी दस्तावेज़ और किसी भी संदर्भ के लिए महत्वपूर्ण जहाँ संरेखण मायने रखता है। आधुनिक प्रोग्रामर फ़ॉन्ट्स (JetBrains Mono, Fira Code, Cascadia Code, IBM Plex Mono, Inconsolata, Source Code Pro) में प्रोग्रामिंग लिगचर शामिल हैं (=> → ⇒, != → ≠) और लंबे सत्रों की पठनीयता के लिए डिज़ाइन किए गए हैं। Apple का SF Mono और Microsoft का Cascadia Code उनके संबंधित डेवलपर टूल्स के साथ शिप होते हैं।
• डिस्प्ले फ़ॉन्ट्स केवल बड़े आकार के उपयोग के लिए डिज़ाइन किए गए हैं, हेडलाइन, पोस्टर, ब्रांडिंग वर्डमार्क, स्प्लैश-पेज हीरो टेक्स्ट। Impact, Bebas Neue, Anton, Oswald, Playfair Display (उच्च-कंट्रास्ट आधुनिक सेरिफ़), Abril Fatface, ये सभी बॉडी आकारों पर खराब पढ़े जाते हैं लेकिन हेडिंग आकारों पर ध्यान आकर्षित करते हैं। डिस्प्ले हेडलाइन फ़ॉन्ट को साफ़ बॉडी टेक्स्ट फ़ॉन्ट के साथ जोड़ना आधुनिक वेबसाइटों पर सबसे आम टाइपोग्राफ़िक पैटर्न है।
• हस्तलेखन और स्क्रिप्ट फ़ॉन्ट्स हाथ से लिखी शैलियों की नकल करते हैं। व्यक्तिगत या निमंत्रण-शैली ब्रांडिंग के लिए मितव्ययी रूप से उपयोगी; बॉडी आकारों पर लगभग असंभव पढ़ना; उन्हें वैसे ही उपयोग किया जाना चाहिए जैसे बड़े अक्षरों का उपयोग किया जाता है (संक्षेप में, जानबूझकर)।

वैरिएबल फ़ॉन्ट्स, आधुनिक शांत क्रांति

OpenType Font Variations स्पेसिफ़िकेशन (Apple का TrueType GX Variations 1994 से + Adobe का योगदान, संयुक्त रूप से OpenType 1.8 के रूप में सितंबर 2016 में मानकीकृत) एक एकल फ़ॉन्ट फ़ाइल को संबंधित विविधताओं के एक अनंत परिवार का वर्णन करने देता है। जहाँ एक पारंपरिक परिवार Light, Regular, Medium, Bold, Black और उनके इटैलिक के लिए अलग फ़ॉन्ट फ़ाइलें शिप करता है (हर एक 50-200 KB की छह से दस फ़ाइलें) एक वैरिएबल फ़ॉन्ट एक फ़ाइल शिप करता है जिसमें वे सभी डिज़ाइन अक्ष (वज़न, चौड़ाई, झुकाव, ऑप्टिकल आकार, और टाइप डिज़ाइनर द्वारा परिभाषित मनमाने कस्टम अक्ष) के साथ निरंतर विविधताओं के रूप में होते हैं। ब्राउज़र समर्थन Chrome 62 (अक्टूबर 2017), Firefox 62 (सितंबर 2018), Safari 11.0 / 11.1 (2017-2018), और Chromium के साथ Edge (2020) में आया। प्रमुख वैरिएबल फ़ॉन्ट रिलीज़ में Roboto Flex (Christian Robertson + Font Bureau, अक्टूबर 2022) शामिल है जिसमें 13 अक्ष हैं; Recursive (Stephen Nixon, 2019); Inter (Rasmus Andersson) वज़न + झुकाव अक्ष के साथ; और अधिकांश प्रमुख टाइपफ़ेस परिवार अब पारंपरिक स्थिर फ़ाइलों के साथ-साथ वैरिएबल संस्करण भी शिप करते हैं। बैंडविड्थ की बचत नाटकीय है: एक 200 KB वैरिएबल फ़ॉन्ट फ़ाइल आठ 100 KB स्थिर फ़ाइलों की जगह लेती है, साथ ही अधिक डिज़ाइन लचीलापन प्रदान करती है।

फ़ॉन्ट लोडिंग और FOUT/FOIT समस्या

जब एक ब्राउज़र कस्टम फ़ॉन्ट फ़ाइल लाता है, तो वह बीच में क्या दिखाता है? दो चरम रणनीतियाँ। FOIT (Flash of Invisible Text), फ़ॉन्ट आने तक कोई टेक्स्ट रेंडर न करें, फिर अचानक टेक्स्ट दिखाएँ। फ़ॉन्ट लोड होने तक पृष्ठ टूटा हुआ दिखता है। FOUT (Flash of Unstyled Text), टेक्स्ट को तुरंत एक फ़ॉलबैक फ़ॉन्ट में रेंडर करें, फिर कस्टम फ़ॉन्ट आने पर स्वैप करें। पृष्ठ पहले फ़्रेम से ही पठनीय है लेकिन स्वैप दृश्य रूप से झटकेदार है। CSS font-display प्रॉपर्टी (CSS Fonts Module Level 4 में जोड़ी गई) डेवलपर्स को नियंत्रण देती है: auto (ब्राउज़र डिफ़ॉल्ट, आमतौर पर FOIT-झुकाव), block (पूर्ण FOIT), swap (पूर्ण FOUT, प्रमुख आधुनिक सर्वोत्तम अभ्यास), fallback (छोटा अदृश्य ब्लॉक फिर स्वैप, कुछ सेकंड बाद "पर्याप्त अच्छे" फ़ॉलबैक के साथ), optional (कस्टम फ़ॉन्ट को पूरी तरह छोड़ दें यदि वह पर्याप्त तेज़ी से लोड नहीं होता)। 2026 में Core Web Vitals और Lighthouse स्कोर के लिए, font-display: swap मानक सिफ़ारिश है, महत्वपूर्ण फ़ॉन्ट्स के लिए preload संकेतों के साथ और एक ध्यान से चुना गया फ़ॉलबैक फ़ॉन्ट जो कस्टम फ़ॉन्ट के समान मेट्रिक्स वाला हो (ताकि स्वैप होने पर लेआउट रिफ़्लो न हो, CSS Fonts Module Level 5 में नई size-adjust प्रॉपर्टी इसे ठीक करती है)।

काम के अनुसार फ़ॉन्ट चुनना

• UI बॉडी टेक्स्ट: पहले सिस्टम फ़ॉन्ट स्टैक (Apple SF, Segoe UI, Roboto, उपयोगकर्ता के OS का पालन करता है) शून्य विलंबता और प्लेटफ़ॉर्म-उपयुक्त लुक के लिए। यदि ब्रांड कारणों से कस्टम फ़ॉन्ट आवश्यक है, तो 16 px या उससे बड़ा एक मानवतावादी सैन्स (Inter, Open Sans, Source Sans Pro) चुनें।
• लंबे रूप का पठन (लेख, ब्लॉग): स्क्रीन-अनुकूलित सेरिफ़ (Georgia, Merriweather, Lora) 18-22 px पर उदार लाइन-हाइट (1.6-1.8) के साथ। सेरिफ़ टेक्स्ट की लंबी पंक्तियों पर आँख-ट्रैकिंग में सहायता करते हैं।
• ब्रांड वर्डमार्क: एक विशिष्ट डिस्प्ले फ़ेस केवल एक बड़े आकार में उपयोग किया जाता है। एक अधिक तटस्थ बॉडी फ़ेस के साथ जोड़ें। यहाँ कस्टम या कमीशन किए गए टाइपफ़ेस में निवेश करना सार्थक होता है, यह ब्रांड का सबसे दृश्य एकल टाइपोग्राफ़िक निर्णय है।
• कोड ब्लॉक: एक समर्पित प्रोग्रामर फ़ॉन्ट (JetBrains Mono, Fira Code, Cascadia Code) 14-15 px पर। प्रोग्रामिंग लिगचर एक व्यक्तिगत पसंद है; कई डेवलपर्स उन्हें पसंद करते हैं, कुछ उन्हें भ्रमित करने वाला पाते हैं।
• संख्याओं की तालिकाएँ: सारणीबद्ध अंकों वाला एक फ़ॉन्ट (अंक 1 की चौड़ाई 2, 3 आदि के समान होती है) ताकि संख्याओं के स्तंभ बिना मैन्युअल पैडिंग के पंक्तिबद्ध हों। अधिकांश आधुनिक फ़ॉन्ट्स font-variant-numeric: tabular-nums प्रॉपर्टी के माध्यम से सारणीबद्ध अंक प्रदान करते हैं।
• केवल सजावटी उपयोग: हस्तलेखन फ़ॉन्ट्स, स्क्रिप्ट्स, रेट्रो डिस्प्ले फ़ेस। संक्षेप में और जानबूझकर उपयोग करें; बॉडी टेक्स्ट के लिए कभी नहीं।

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

वेब-सुरक्षित फ़ॉन्ट और कस्टम फ़ॉन्ट में क्या अंतर है?

वेब-सेफ़ फ़ॉन्ट्स उपयोगकर्ताओं के डिवाइसों पर पहले से इंस्टॉल होते हैं, इसलिए वे बिना नेटवर्क अनुरोध के तुरंत रेंडर होते हैं। कस्टम फ़ॉन्ट्स (Google Fonts, Adobe Fonts, स्व-होस्टेड @font-face) को डाउनलोड किया जाना चाहिए, विलंबता जोड़ते हुए लेकिन OS-बंडल सेट से परे दृश्य विविधता प्रदान करते हुए। अधिकांश आधुनिक वेबसाइटें मिश्रण का उपयोग करती हैं: एक प्राथमिक के रूप में कस्टम फ़ॉन्ट, font-family स्टैक के माध्यम से फ़ॉलबैक के रूप में वेब-सेफ़ फ़ॉन्ट्स, और UI तत्वों के लिए जहाँ प्लेटफ़ॉर्म-नेटिव लुक पसंद किया जाता है, एक सिस्टम फ़ॉन्ट स्टैक (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)।

मैं अपनी साइट पर Google फ़ॉन्ट कैसे उपयोग करूँ?

दो तरीक़े। CDN-होस्टेड: अपने HTML <head> में fonts.googleapis.com के लिए एक <link> टैग जोड़ें, फिर CSS में font-family: 'Inter', sans-serif के माध्यम से फ़ॉन्ट को संदर्भित करें। स्व-होस्टेड: Google Fonts से WOFF2 फ़ाइलें डाउनलोड करें, उन्हें अपने स्वयं के डोमेन पर होस्ट करें, और उन्हें @font-face के साथ घोषित करें। गोपनीयता-संवेदनशील संदर्भों में स्व-होस्टिंग पसंद की जाती है (एक जर्मन अदालत ने 2022 में फ़ैसला सुनाया कि सहमति के बिना Google के CDN से Google Fonts लोड करना GDPR का उल्लंघन करता है)। लोडिंग व्यवहार को नियंत्रित करने के लिए font-display: swap जोड़ें और प्रदर्शन के लिए महत्वपूर्ण फ़ॉन्ट्स को प्रीलोड करें।

बॉडी टेक्स्ट के लिए एक अच्छा serif फ़ॉन्ट कौन सा है?

Georgia (Matthew Carter, 1996 में Microsoft द्वारा स्क्रीन रेंडरिंग के लिए विशेष रूप से कमीशन की गई) एक उत्कृष्ट विकल्प बनी हुई है और हर उपभोक्ता OS पर पहले से इंस्टॉल है। Google Fonts से: Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011), PT Serif (Paratype, 2009), Source Serif Pro (Adobe के लिए Frank Grießhammer, 2014)। वेब बॉडी के लिए Times New Roman से बचें, छोटे आकारों पर अख़बार प्रिंट के लिए डिज़ाइन की गई, यह स्क्रीन पर तंग और पुरानी पढ़ती है। आधुनिक, उच्च-कंट्रास्ट सेरिफ़ हेडलाइन के लिए, Playfair Display सुंदरता से काम करता है (बॉडी टेक्स्ट के लिए बचें, छोटे आकारों पर बहुत अधिक कंट्रास्ट)।

क्या यह प्रीव्यू टूल ऑफ़लाइन काम करता है?

वेब-सेफ़ फ़ॉन्ट्स (Arial, Georgia, Verdana, आदि) ऑफ़लाइन काम करते हैं क्योंकि वे आपके ऑपरेटिंग सिस्टम से लोड किए जाते हैं। गैलरी में Google Fonts को रेंडर करने के लिए Google के CDN से एक बार के नेटवर्क फ़ेच की आवश्यकता होती है, एक बार लोड हो जाने पर वे कैश हो जाते हैं और प्रीव्यू उसके बाद ऑफ़लाइन काम करता है। इसे सत्यापित करने के लिए प्रारंभिक लोड के बाद पृष्ठ को ऑफ़लाइन (हवाई जहाज मोड) करें; OS-इंस्टॉल किए गए फ़ॉन्ट्स रेंडर करते रहते हैं, Google Fonts वही उपयोग करते हैं जो कैश में था।

संबंधित टूल