लोड हो रहा है...

फॉन्ट प्रॉपर्टीज

फॉन्ट प्रॉपर्टीज (Font Properties) CSS में टेक्स्ट की विज़ुअल अपीयरेंस को नियंत्रित करने वाली मुख्य विशेषताएँ हैं। इनका उपयोग करके हम टेक्स्ट की शैली (style), आकार (size), वज़न (weight), लाइन की ऊँचाई (line-height) और फ़ॉन्ट फैमिली (font-family) तय करते हैं। वेब डिज़ाइन में यह बेहद महत्वपूर्ण है क्योंकि अच्छी टाइपोग्राफ़ी वेबसाइट की पठनीयता (readability) और दृश्य आकर्षण (visual appeal) को सीधे प्रभावित करती है।
इसे घर बनाने के समान समझिए: आपकी वेबसाइट की सामग्री फर्नीचर है, और फॉन्ट प्रॉपर्टीज उस फर्नीचर की सजावट और व्यवस्था हैं। अगर आप सही फॉन्ट चुनते हैं, सही लाइन स्पेसिंग देते हैं और हेडिंग्स और बॉडी टेक्स्ट में अंतर रखते हैं, तो आपकी साइट एक अच्छी तरह से व्यवस्थित लाइब्रेरी की तरह लगेगी, जहाँ हर जानकारी आसानी से मिल जाती है।
पोर्टफोलियो साइट पर, प्रोजेक्ट टाइटल को उभारने के लिए बोल्ड फॉन्ट उपयोगी होते हैं। ब्लॉग में लंबा टेक्स्ट आराम से पढ़ने के लिए बड़ी लाइन-हाइट ज़रूरी है। ई-कॉमर्स साइट पर प्राइस और बटन को हाइलाइट करने के लिए मोटे (bold) फॉन्ट महत्वपूर्ण हैं। न्यूज़ साइट पर हेडलाइन और बॉडी में टाइपोग्राफ़िक हाइरार्की पाठकों को सहज अनुभव देती है।
इस ट्यूटोरियल में आप सीखेंगे कि फॉन्ट प्रॉपर्टीज का एडवांस उपयोग कैसे करें, ताकि आप आकर्षक और रेस्पॉन्सिव टेक्स्ट डिज़ाइन बना सकें।

मूल उदाहरण

css

CSS Code

/* Basic CSS font properties example */
body {
font-family: 'Arial', sans-serif; /* Main font with fallback */
font-size: 18px; /* Comfortable base size */
font-weight: 600; /* Semi-bold text */
line-height: 1.6; /* Improves readability */
font-style: italic; /* Italic style for emphasis */
}

ऊपर दिए गए कोड में हमने कई महत्वपूर्ण फॉन्ट प्रॉपर्टीज का उपयोग किया है:

font-family: 'Arial', sans-serif का मतलब है कि टेक्स्ट सबसे पहले Arial में दिखेगा। अगर यह उपलब्ध नहीं है, तो ब्राउज़र कोई sans-serif फॉन्ट चुन लेगा। यह बैकअप व्यवस्था टेक्स्ट को हमेशा पठनीय बनाती है।
font-size: 18px डेस्कटॉप के लिए एक आरामदायक रीडिंग साइज है। उन्नत डेवलपर्स मोबाइल-फर्स्ट डिज़ाइन में अक्सर rem या em का उपयोग करते हैं ताकि साइज रिस्पॉन्सिव रहे।
font-weight: 600 का मतलब है semi-bold। यह हेडिंग्स या महत्वपूर्ण टेक्स्ट को हाइलाइट करने में मदद करता है।
line-height: 1.6 रखने से लाइनें पर्याप्त दूरी पर होती हैं, जिससे टेक्स्ट पढ़ना आसान होता है। यह ब्लॉग या न्यूज़ साइट के लिए ज़रूरी है।
font-style: italic का उपयोग यहाँ टेक्स्ट में एस्थेटिक वेरिएशन के लिए किया गया है।
यह बेसिक उदाहरण दिखाता है कि कैसे केवल कुछ प्रॉपर्टीज से टेक्स्ट की पठनीयता और आकर्षण को बेहतर बनाया जा सकता है। यही लॉजिक पोर्टफोलियो, ब्लॉग और ई-कॉमर्स में भी लागू होता है।

व्यावहारिक उदाहरण

css

CSS Code

/* Practical example for an e-commerce site */
.product-title {
font-family: 'Roboto Slab', serif; /* Elegant serif for product titles */
font-size: 24px; /* Highlight product name */
font-weight: 700; /* Bold for strong emphasis */
line-height: 1.4; /* Compact for short titles */
}

.product-description {
font-family: 'Open Sans', sans-serif; /* Clean for long text */
font-size: 16px; /* Comfortable size */
line-height: 1.8; /* Better for reading paragraphs */
font-style: normal; /* Upright for readability */
}

इस उदाहरण में हम ई-कॉमर्स साइट के प्रोडक्ट टाइटल और डिस्क्रिप्शन के लिए फॉन्ट प्रॉपर्टीज लागू कर रहे हैं।

.product-title में Roboto Slab (serif font) प्रयोग किया गया है। यह प्रोडक्ट टाइटल को एलिगेंट और प्रोफेशनल लुक देता है। 24px साइज और 700 वेट टाइटल को प्रमुख बनाते हैं, जबकि 1.4 लाइन-हाइट इसे कॉम्पैक्ट रखती है।
.product-description में Open Sans (sans-serif font) का उपयोग किया गया है। यह लंबे टेक्स्ट के लिए उपयुक्त है। 16px साइज और 1.8 लाइन-हाइट लंबे पैराग्राफ की पठनीयता बढ़ाते हैं।
font-style को normal रखा गया है ताकि यूज़र आराम से लगातार पढ़ सकें।
यह प्रैक्टिकल उदाहरण दिखाता है कि कैसे टाइपोग्राफिक हाइरार्की बनती है। टाइटल और बॉडी टेक्स्ट अलग-अलग स्टाइल के होते हैं, जिससे यूज़र की नज़र पहले महत्वपूर्ण जानकारी पर जाती है। यही पैटर्न न्यूज़ साइट, पोर्टफोलियो और ब्लॉग में भी उपयोगी है।

Best Practices:

Mobile-first design: rem और em यूनिट का उपयोग करें ताकि फॉन्ट साइज रिस्पॉन्सिव रहे।
Performance optimization: केवल ज़रूरी वेब फॉन्ट लोड करें और font-display: swap का उपयोग करें।
Clear hierarchy: हेडिंग, सबहेडिंग और बॉडी के लिए अलग साइज और वेट सेट करें।
Fallback fonts: हमेशा बैकअप फॉन्ट जोड़ें।
Common Mistakes:
!important का अत्यधिक प्रयोग जिससे CSS मैनेज करना मुश्किल हो जाता है।
Mobile responsiveness न सोचना जिससे टेक्स्ट छोटे डिवाइस पर unreadable हो जाता है।
line-height को अनदेखा करना, जिससे टेक्स्ट बहुत क्रैम्प्ड दिखता है।
बहुत सारे वेबफॉन्ट लोड करना जिससे साइट स्लो हो जाती है।
Debugging Tips:

Developer Tools में देखें कि वास्तव में कौन सा फॉन्ट लोड हो रहा है।
अलग-अलग स्क्रीन साइज पर टेस्ट करें।
Slow network पर टेस्ट करके fallback behavior देखें।
Practical Recommendation: body में बेसिक फॉन्ट प्रॉपर्टीज सेट करें और फिर सिर्फ स्पेशल एलीमेंट्स के लिए ओवरराइड करें।

📊 त्वरित संदर्भ

Property/Method	Description	Example
font-family	टेक्स्ट के लिए मुख्य और बैकअप फॉन्ट तय करता है	font-family: 'Roboto', sans-serif;
font-size	टेक्स्ट का आकार तय करता है	font-size: 16px;
font-weight	टेक्स्ट की मोटाई तय करता है	font-weight: 700;
line-height	लाइन के बीच की दूरी तय करता है	line-height: 1.6;
font-style	टेक्स्ट का स्टाइल (normal, italic) तय करता है	font-style: italic;
font-variant	स्पेशल टाइपोग्राफिक स्टाइल (जैसे small-caps) देता है	font-variant: small-caps;

इस ट्यूटोरियल से आपने सीखा कि फॉन्ट प्रॉपर्टीज से टेक्स्ट की पठनीयता, विज़ुअल अपील और रेस्पॉन्सिविटी को कैसे नियंत्रित किया जाता है।
HTML स्ट्रक्चर में हेडिंग, पैराग्राफ और स्पैन जैसे एलीमेंट्स इन प्रॉपर्टीज के मुख्य लक्ष्य होते हैं। जावास्क्रिप्ट के साथ, आप इन्हें डायनामिकली बदलकर डार्क मोड या एक्सेसिबिलिटी फीचर्स भी जोड़ सकते हैं।
अगला कदम होगा टेक्स्ट प्रॉपर्टीज जैसे text-align, text-transform, text-decoration सीखना और @font-face का उपयोग करके कस्टम फॉन्ट लोड करना।
प्रैक्टिकल सलाह: हमेशा असली कंटेंट और अलग-अलग डिवाइस पर टेस्ट करें। अच्छी टाइपोग्राफ़ी एक व्यवस्थित लाइब्रेरी की तरह है, जहाँ यूज़र को हर जानकारी सहजता से मिल जाती है।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा