15 उपयोगी वेब टाइपोग्राफी उपकरण, लाइब्रेरी और फ्रेमवर्क
वेब पर टाइपोग्राफी से निपटना वास्तविक विचित्रता रहा है. प्रत्येक ब्राउज़र में फोंट रेंडर करने के लिए अपना स्वयं का एल्गोरिथ्म होता है जिससे अप्रत्याशित विसंगतियां हो सकती हैं। कुछ ही सीएसएस गुण हैं जिनका उपयोग आप फोंट पर कुछ नियंत्रण करने के लिए कर सकते हैं, जैसे कि फॉन्ट किर्निंग, फॉन्ट स्मूथिंग, ड्रॉपकैप आदि बनाने में। इसके शीर्ष पर, फोंट की बात आती है तो हमें बहुत सारे लेआउट मुद्दों से निपटना होगा।.
अच्छी खबर यह है कि ऐसे संसाधन हैं जिनका उपयोग आप वेबसाइट के टाइपोग्राफी में आने पर पहिया को संभालने के लिए कर सकते हैं। यहाँ हैं 15 वेब टूल, लाइब्रेरी और फ्रेमवर्क आप उस अंत तक उपयोग कर सकते हैं.
होंगकीट पर अधिक:
- 9 वर्डप्रेस प्लगइन्स आपके फ़ॉन्ट्स के साथ अधिक करने के लिए
- पठनीयता बढ़ाने के लिए 20 सर्वश्रेष्ठ वर्डप्रेस टाइपोग्राफी प्लगइन्स
- वेब फ़ॉन्ट्स के साथ बेहतर और तेज यूआई प्रतीक
TypeRendering
संक्षेप में, TypeRendering मॉडर्निज़्र के समान काम करता है, सिवाय इसके कि यह फ़ॉन्ट रेंडरिंग के लिए केवल ब्राउज़र इंजन की पहचान करता है। यह पुस्तकालय अपनी खोजों के आधार पर कस्टम कक्षाएं जोड़ता है जिसका उपयोग टाइप रेंडरिंग के लिए विशिष्ट स्टाइलिंग नियमों को लागू करने के लिए किया जा सकता है.
KerningJS
Kerning अभी तक वेब पर उपयोग के लिए अनुकूलन योग्य नहीं है - font-कर्निंग समर्थन अभी भी खराब है - लेकिन एक नया मानक संपत्ति हमारे रास्ते में आ रहा है. KerningJS एक जावास्क्रिप्ट लाइब्रेरी है जो आपको बेहतर कर्निंग नियंत्रण के लिए कुछ नए गुण प्रदान करती है, उदाहरण के लिए -पत्र-सर्द.
#heading -कार्य-कर्ण: 1px 1px 0 0 0 1 1px 0 2px 0 0 0 0 0 0;
ध्यान रखें कि उपर्युक्त उदाहरण गैर-मानक है और केवल केर्निगजेएस के साथ लागू है.
DropcapJS
हालांकि एक ड्रॉपकैप बनाना वर्तमान सीएसएस मानकों के साथ उल्लेखनीय है, लेकिन परिणाम अभी तक सही नहीं है। कभी-कभी यह सर्वथा अवांछनीय होता है। Adobe वेब प्लेटफ़ॉर्म द्वारा विकसित DropcapJS को वेब डिज़ाइनर को आसानी से परफेक्ट ड्रॉप अप लागू करने की अनुमति देने का मिशन सौंपा गया है.
LiningJS
LiningJS एक जावास्क्रिप्ट पुस्तकालय है जो जोड़ता है लाइन अपने पैराग्राफ की प्रत्येक पंक्ति में कक्षा। यह आपको लाइन को अलग से स्टाइल करने की अनुमति देता है। यह विचार का अनुकरण करता है :: वें ऑनलाइन (), :: वें-पिछले ऑनलाइन () तथा ::अंतिम पंक्ति छद्म वर्ग जो अभी भी CSS में मौजूद नहीं है। यहाँ एक उदाहरण है कि कैसे हम LiningJS के साथ एक पैराग्राफ की पहली पंक्ति को स्टाइल करते हैं:
p .line [पहला] फ़ॉन्ट-वजन: 600; पाठ-परिवर्तन: अपरकेस;
इसके अलावा, LiningJS भी चीनी पैराग्राफ प्रवाह का समर्थन करता है.
UnderlineJS
UnderlineJS एक जावास्क्रिप्ट पुस्तकालय है जो पाठ को बेहतर बनाता है। मैं क्या मतलब है यह देखने के लिए डेमो देखें, लाइनों पर होवर करना सुनिश्चित करें। वर्तमान सीएसएस के अंडरलाइन आउटपुट के साथ डेमो की तुलना करें text-decoration मानक और आप शायद अंडरलाइनज के भी प्रशंसक होंगे.
FlowType
यह प्लगइन एक विशिष्ट आवरण चौड़ाई के आधार पर फ़ॉन्ट आकार को गतिशील रूप से समायोजित करेगा. FlowType किसी भी स्क्रीन चौड़ाई पर प्रति पंक्ति आदर्श वर्णों को लागू करने में आपकी सहायता करता है। पुस्तकालय उन विकल्पों के साथ आता है जहां कोई न्यूनतम / अधिकतम स्क्रीन चौड़ाई, न्यूनतम / अधिकतम फ़ॉन्ट आकार और फ़ॉन्ट अनुपात सेट कर सकता है.
HatchShow
HatchShow अपने कंटेनर की पूरी चौड़ाई को भरने के लिए एक फ़ॉन्ट के आकार का विस्तार करता है। एल्गोरिथ्म के साथ प्लगइन बॉक्स से बाहर काम करता है; संक्षेप में, यह कंटेनर की चौड़ाई और फ़ॉन्ट चरित्र की लंबाई को मापता है और फ़ॉन्ट के उचित आकार को जोड़ता है.
GridLover
GridLover एक आसान स्लाइडर UI के साथ टाइपोग्राफी व्यवस्था (आकार, रेखा ऊंचाई, और मार्जिन) के लिए बुनियादी शैलियों को उत्पन्न करने के लिए एक महान उपकरण है। यह SCSS, LESS, और स्टाइलस में शैलियों को उत्पन्न करता है ताकि आप इसे अपनी परियोजना में तुरंत शामिल कर सकें, चाहे आप जिस सीएसएस-प्रीप्रोसेसर का उपयोग करें।.
TypeScale
TypeScale एक ऑनलाइन टूल है जो आपकी वेबसाइट के लिए सही फ़ॉन्ट आकार को आसानी से निर्धारित करने में आपकी सहायता करेगा। आधार फ़ॉन्ट आकार, स्केल और फ़ॉन्ट परिवार जिसे आप उपयोग करना चाहते हैं सम्मिलित करने के लिए उपकरण एक सरल सहज GUI प्रदान करता है। परिणाम आपके लिए दृश्यमान होंगे ताकि आप सही मूल्य प्राप्त करने के लिए पैमाने के साथ खेल सकें। एक बार जब आप काम कर लें तो सीएसएस को पकड़ लें.
मॉड्यूलर स्केल
मॉड्यूलर स्केल शरीर और शीर्षक पाठ के लिए आदर्श फ़ॉन्ट स्केलिंग उत्पन्न करने के लिए एक उपकरण है। यह Sass में आउटपुट करता है जिसका उपयोग इसके Sass लाइब्रेरी के साथ किया जाना चाहिए। वैकल्पिक रूप से, आप जावास्क्रिप्ट का उपयोग कर सकते हैं .
फ़ॉन्ट-टू-चौड़ाई
फ़ॉन्ट-से-चौड़ाई (FTW) एक जावास्क्रिप्ट पुस्तकालय है जो एक फ़ॉन्ट को उसकी चौड़ाई के कंटेनर में फिट करता है। यह फ़ॉन्ट आकार को फ़ॉन्ट के लिए आवश्यक शब्द रिक्ति के साथ निर्धारित करेगा। आप एक सुंदर शीर्षक बनाना चाहते हैं, यह पुस्तकालय आप कोशिश करना चाहते हो सकता है.
FFFFallback
FFFFallback, एक आसान उपकरण जो आपको सबसे अच्छे फ़ॉन्ट स्टैक को खोजने की अनुमति देता है जो कि शान से नीचा दिखाएगा। उपकरण एक बुकमार्कलेट के रूप में आता है, जो आपके पृष्ठ पर फ़ॉन्ट परिवार का विश्लेषण करेगा और फ़ॉलबैक के रूप में उपयोग करने के लिए फ़ॉन्ट का एक सेट सुझाएगा.
फ़ॉन्ट जोड़ी
Google फ़ॉन्ट लाखों लोगों द्वारा उपयोग की जाने वाली सबसे लोकप्रिय वेब फ़ॉन्ट लाइब्रेरी में से एक है, और 500 फ़ॉन्ट परिवारों से ऊपर होस्ट है. फ़ॉन्ट जोड़ी युग्मित Google फ़ॉन्ट्स का एक संग्रह है, जहाँ आप फ़ॉन्ट परिवारों और प्रकार के चेहरों के बीच विभिन्न संयोजन आसानी से पा सकते हैं। फ़ॉन्ट जोड़ी फ़ॉन्ट चयन को थोड़ा कम अभिभूत करने वाला बनाता है.
TypeSettings
TypeSettings सीएसएस नियम का एक संग्रह है जो उचित फ़ॉन्ट स्केलिंग, ऊर्ध्वाधर लय और टाइपोग्राफी के उत्तरदायी अनुपात को परिभाषित करने के लिए सेट है। टाइपसेटिंग्स सैस और स्टाइलस में आता है जो कि वैरिएबल को समायोजित करके आपकी परियोजना की जरूरतों को पूरा करने के लिए लचीलापन देता है.
प्लेट टाइप करें
प्लेट टाइप करें टाइपोग्राफी की स्थापना के लिए शायद सबसे पूर्ण स्टार्टर किट में से एक है। टाइपिंग जहाजों के साथ मुट्ठी भर बुनियादी टाइपोग्राफिक शैलियाँ, जो स्केलिंग, रंग, छोटी पूंजी, ड्रापकैप, इंडेंटिंग, हाइफ़नेशन, ब्लॉकक्वे, कोड ब्लॉक और बहुत अधिक सामान को संबोधित करती हैं।.
अब पढ़ें: सुंदर टाइपोग्राफी के साथ वेब डिजाइन का प्रदर्शन
