सीएसएस के साथ रिस्पॉन्सिव टाइपोग्राफी कैसे बनाएं

इतने सारे ब्रेकप्वाइंट के साथ एक वेबसाइट विकसित करना थका देने वाला हो सकता है। सीएसएस में सीखने के लिए कई नई तकनीकें हैं, चाहे आप एक अनुभवी डेवलपर हों या मध्य स्तर के डेवलपर हों।

लेकिन आप रिस्पॉन्सिव टाइपोग्राफी के साथ शुरुआत कैसे करते हैं? वेब पेजों को किसी भी स्क्रीन आकार में अनुकूलित करने के लिए कदम उठाने का तरीका यहां बताया गया है।

रिस्पॉन्सिव टाइपोग्राफी का महत्व

टाइपोग्राफी किसी वेबसाइट की पठनीयता, प्रयोज्यता और समग्र सौंदर्य को सुनिश्चित करके वेब विकास और डिजाइन में महत्वपूर्ण भूमिका निभाती है। हर कोई एक प्रतिक्रियाशील वेबसाइट चाहता है। क्या यह बहुत अच्छा नहीं होगा यदि टेक्स्ट या फ़ॉन्ट स्वचालित रूप से विभिन्न स्क्रीन आकारों में समायोजित हो जाएं? वेब विकास में प्रतिक्रियाशील टाइपोग्राफी के अन्य लाभों में निम्नलिखित शामिल हैं;

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

यहां एक कोड टेम्प्लेट है जिसे आप शुरू करने से पहले अपने कोड संपादक में कॉपी कर सकते हैं, ताकि आप चर्चा की जाने वाली तकनीकों का पालन कर सकें।

HTML कोड फ़ाइल

Index.html
एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8">
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1.0">
<जोड़नासंबंधित="शैली पत्रक"href="style.css">
<शीर्षक> रिस्पॉन्सिव टाइपोग्राफी शीर्षक>
सिर>
<शरीर>
<डिवकक्षा="कंटेनर">
<एच 1> लोरेम इप्सम एच 1>
<पी> लोरेम इप्सम डोलर सिट, अमेट कंसेक्टेचर एडिपिसिंग एलीट। उत, ओबेकाटी। कॉर्पोरिस क्वाम, ब्लैंडिटिस ओडिट ऑप्टियो डिग्निसिमोस फैसिलिस मैग्नी डोलोरिबस एडिपिस्की और क्वाएराट ओलुप्टास मोलेस्टिया ईयस डिक्टा ऑफिसिया क्वॉड ईक पर्सपिसियाटिस! 
पी>
डिव>
शरीर>
एचटीएमएल>

सीएसएस कोड फ़ाइल

/*style.css*/
शरीर{
दिखाना: मोड़ना;
औचित्य-सामग्री: केंद्र;
संरेखित-आइटम: केंद्र;
ऊंचाई: 100वी.एच;
}
.कंटेनर{
चौड़ाई: 400पिक्सल;
पृष्ठभूमि का रंग: पीले और सफेद रंग का मिश्रण;
गद्दी: 15पिक्सल;
डब्बे की छाया:0 2पिक्सल 5पिक्सलआरजीबीए(0,0,0, 0.1) ;
}
एच 1{
रंग: हॉट गुलाबी;
}

अब, आइए सीएसएस का उपयोग करके प्रतिक्रियाशील टाइपोग्राफी को लागू करने के लिए कुछ प्रभावी तरीकों और तकनीकों का पता लगाएं

1. दबाना

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

क्लैंप (न्यूनतम-मूल्य, आदर्श-मूल्य, अधिकतम-मूल्य):

एच 1{
फ़ॉन्ट आकार: क्लैंप(2रेम, 5vw, 3रेम);
}
पी{
फ़ॉन्ट आकार: क्लैंप(1रेम, 3vw, 2रेम);
}

इस उदाहरण में, शीर्षक और पैराग्राफ के लिए फ़ॉन्ट आकार "क्लैंप()" फ़ंक्शन का उपयोग करके सेट किया गया है। शीर्षक "h1" के लिए न्यूनतम मान "2rem" पर सेट किया गया है, यह सुनिश्चित करते हुए कि फ़ॉन्ट का आकार मूल फ़ॉन्ट-आकार के दोगुने से नीचे नहीं जाएगा। आदर्श या पसंदीदा मान "5vw" पर सेट है, जो व्यूपोर्ट की चौड़ाई का 5% है जो इसे विभिन्न स्क्रीन आकारों के लिए उत्तरदायी बनाता है। अधिकतम मान "3 रेम" पर सेट है, यह सुनिश्चित करते हुए कि फ़ॉन्ट-आकार मूल फ़ॉन्ट आकार से तीन गुना से बड़ा नहीं होगा। पैराग्राफ स्टाइलिंग के लिए इसके विपरीत।

आदर्श मान के लिए व्यूपोर्ट चौड़ाई "vw" या प्रतिशत "%" का उपयोग करना सबसे अच्छा अभ्यास है, क्योंकि यह संपत्ति को उपलब्ध स्थान के आधार पर आनुपातिक रूप से स्केल करने की अनुमति देता है, जिससे डिज़ाइन अधिक प्रतिक्रियाशील हो जाता है। सुनिश्चित करें कि आप जानते हैं आपको कौन सी सीएसएस इकाई का उपयोग करना चाहिए आपके परिदृश्य के लिए.

यह डेवलपर्स द्वारा उपयोग की जाने वाली सबसे आम टाइपोग्राफी तकनीक है। इसमें प्रत्येक ब्रेकप्वाइंट के लिए मीडिया क्वेरी बनाना शामिल है। यह आपको विभिन्न स्क्रीन आकारों के आधार पर विशिष्ट शैलियाँ लागू करने की अनुमति देता है। यहाँ एक उदाहरण है:

/* डिफ़ॉल्ट फ़ॉन्ट-आकार */
एच 1{
फ़ॉन्ट आकार: 38पिक्सल;
}
पी{
फ़ॉन्ट आकार: 20पिक्सल;
}
/* छोटे स्क्रीन के लिए फ़ॉन्ट-आकार*/
@मीडिया (अधिकतम चौड़ाई:800 पीएक्स){
एच 1{
फ़ॉन्ट आकार: 32पिक्सल;
}
पी{
फ़ॉन्ट आकार: 18पिक्सल;
}
}
/* छोटी स्क्रीन के लिए फ़ॉन्ट-आकार */
@मीडिया (अधिकतम चौड़ाई:400px){
एच 1{
फ़ॉन्ट आकार: 28पिक्सल;
}
पी{
फ़ॉन्ट आकार: 15पिक्सल;
}
}

इस उदाहरण में, शीर्षक और पैराग्राफ क्रमशः "38px" से "20px" के डिफ़ॉल्ट मान पर सेट हैं। फिर, मोबाइल फोन पर लेआउट को उत्तरदायी बनाने के लिए छोटे स्क्रीन आकार के लिए शर्तें निर्धारित की जाती हैं। आप अन्य चीज़ों के अलावा डिज़ाइन और अपनी इच्छित प्रतिक्रिया के आधार पर जितनी चाहें उतनी मीडिया क्वेरी बना सकते हैं मीडिया क्वेरी सीएसएस ट्रिक्स जो आपको पता होनी चाहिए.

3. सीएसएस कस्टम गुण

सीएसएस कस्टम वैरिएबल के रूप में भी जाना जाता है, यह उन मानों को संग्रहीत करता है जिनका आपकी स्टाइलिंग में पुन: उपयोग किया जा सकता है। आसान प्रबंधन और अनुकूलन को सक्षम करने के लिए इसका उपयोग टाइपोग्राफी के लिए किया जा सकता है। यहाँ एक उदाहरण है

:जड़ {
--शीर्षक-फ़ॉन्ट-आकार: 3रेम;
--पैराग्राफ-फ़ॉन्ट-आकार: 1.5रेम;
}
एच 1{
फ़ॉन्ट आकार: वर(--शीर्षक-फ़ॉन्ट-आकार);
}
पी{
फ़ॉन्ट आकार: वर(--पैराग्राफ-फ़ॉन्ट-आकार);
}
@मीडिया (अधिकतम चौड़ाई:800 पीएक्स){
:जड़ {
--शीर्षक-फ़ॉन्ट-आकार: 2रेम;
--पैराग्राफ-फ़ॉन्ट-आकार: 0.9रेम;
}
}
@मीडिया (अधिकतम चौड़ाई:400px){
:जड़ {
--शीर्षक-फ़ॉन्ट-आकार: 1.5रेम;
--पैराग्राफ-फ़ॉन्ट-आकार: 0.8रेम;
}
}

इस उदाहरण में, सीएसएस प्रॉपर्टी को रूट स्तर पर सेट किया गया है, जो हमें इसे विश्व स्तर पर एक्सेस करने की अनुमति देता है। --heading-font-size और --paragraph-font-size क्रमशः शीर्षक और पैराग्राफ के लिए वर्णनात्मक नाम हैं, दोनों के लिए डिफ़ॉल्ट मान दिए गए हैं। बोर्ड भर में एकरूपता सुनिश्चित करने के लिए विभिन्न मीडिया प्रश्नों के लिए इस तकनीक का पुन: उपयोग किया जा सकता है।

रिस्पॉन्सिव टाइपोग्राफी सर्वोत्तम अभ्यास

डेवलपर्स के बीच टाइपोग्राफी करने के लिए सीधे व्यूपोर्ट चौड़ाई (vw) का उपयोग करना आम बात है। हालाँकि यह सरल है और काम करता हुआ प्रतीत होता है, छोटे स्क्रीन आकार में यह छोटा हो जाता है और बड़े स्क्रीन आकार में बहुत बड़ा हो जाता है। यह तब भी होता है जब आप अपने पृष्ठ को ज़ूम इन और ज़ूम आउट करते हैं। यदि आप कर सकते हैं, तो इस तरह सीधे व्यूपोर्ट का उपयोग करने से बचें;

एच 1{
फ़ॉन्ट आकार: 2वी.एच;
 }

हमेशा परीक्षण करें और सुनिश्चित करें कि आपकी टाइपोग्राफी विभिन्न स्क्रीन आकारों में पढ़ने योग्य है और हमेशा ब्राउज़र संगतता का परीक्षण करें। पठनीयता पर विचार करें और सुनिश्चित करें कि फ़ॉन्ट का आकार बहुत छोटा या बहुत बड़ा न हो

रिस्पॉन्सिव टाइपोग्राफी पठनीय वेब डिज़ाइन की कुंजी है

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