CSS टाइपोग्राफ - फोंट परिवार, आकार और रंगों का उपयोग, रिस्पॉन्सिव टाइपोग्राफी

CSS टाइपोग्राफी - फोंट, आकार और रंगों का विस्तृत गाइड

फोंट परिवार (Font Family)

CSS में font-family प्रॉपर्टी टेक्स्ट की दृश्य शैली को निर्धारित करती है। एक उचित फोंट चयन वेबसाइट की पठनीयता, उपयोगकर्ता अनुभव और ब्रांड पहचान को महत्वपूर्ण रूप से प्रभावित करता है।

/* बेसिक फोंट स्टैक उदाहरण */
body {
  font-family: "Segoe UI", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
}

/* हेडिंग्स के लिए अलग फोंट */
h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
}

/* कोड ब्लॉक्स के लिए मोनोस्पेस फोंट */
pre, code {
  font-family: "Courier New", Courier, monospace;
}

फोंट श्रेणियाँ और उनका उपयोग

सेरिफ फोंट (Georgia, Times New Roman) - पारंपरिक, औपचारिक डिज़ाइन के लिए उपयुक्त। लंबे पैराग्राफ के लिए अच्छी पठनीयता।

सैन्स-सेरिफ फोंट (Arial, Helvetica) - आधुनिक, साफ दिखने वाले। वेब के लिए सबसे आम चयन।

मोनोस्पेस फोंट (Courier, Consolas) - कोड एडिटर्स और तकनीकी दस्तावेज़ों के लिए आदर्श।

हिंदी/देवनागरी फोंट (Nirmala UI, Noto Sans) - भारतीय भाषाओं के लिए विशेष रूप से डिज़ाइन किए गए।

वेब फोंट्स का उपयोग

Google Fonts या अन्य वेब फोंट सेवाओं का उपयोग करते समय:

केवल आवश्यक फोंट वेरिएंट्स (regular, bold आदि) लोड करें
फोंट डिस्प्ले स्वैपिंग के लिए font-display: swap का उपयोग करें
हिंदी फोंट्स के लिए Noto Sans Devanagari या Poppins (देवनागरी समर्थित) का उपयोग करें

/* Google Fonts इम्पोर्ट उदाहरण */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
font-family: 'Poppins', 'Nirmala UI', sans-serif;
}

फोंट साइजिंग सिस्टम

CSS में फोंट साइज निर्दिष्ट करने के कई तरीके हैं, प्रत्येक के अपने उपयोग के मामले और व्यवहार हैं।

इकाई	विवरण	उपयोग केस	उदाहरण
`px`	पिक्सल में निरपेक्ष आकार	जब सटीक आकार की आवश्यकता हो	`font-size: 16px;`
`em`	पैरेंट एलिमेंट के फोंट साइज के सापेक्ष	कम्पोनेंट-आधारित डिज़ाइन	`font-size: 1.2em;`
`rem`	रूट एलिमेंट (html) के फोंट साइज के सापेक्ष	रिस्पॉन्सिव डिज़ाइन (सबसे लचीला)	`font-size: 1.5rem;`
`%`	पैरेंट एलिमेंट के फोंट साइज का प्रतिशत	फ्लुइड लेआउट	`font-size: 120%;`
`vw/vh`	व्यूपोर्ट चौड़ाई/ऊंचाई के सापेक्ष	फुल-स्क्रीन टाइपोग्राफी	`font-size: 3vw;`

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

1. REM आधारित सिस्टम का उपयोग करें:

html {
  font-size: 16px; /* बेस फोंट साइज */
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* मोबाइल के लिए थोड़ा छोटा */
  }
}

body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

2. क्लैम्प() फंक्शन का उपयोग करें (आधुनिक ब्राउज़र):

h1 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
/* न्यूनतम 1.8rem, आदर्श 4vw, अधिकतम 2.5rem */
}

रंग प्रणाली (Color Systems)

CSS में रंग निर्दिष्ट करने के कई तरीके हैं, प्रत्येक विभिन्न उपयोग मामलों के लिए उपयुक्त है।

/* कलर नेम्स (140+ पूर्वनिर्धारित नाम) */
.primary { color: navy; }

/* HEX कोड (6-अंक या 3-अंक संक्षिप्त) */
.secondary { color: #3498db; }
.short-hex { color: #09c; } /* #0099cc के समान */

/* RGB/RGBA (लाल, हरा, नीला, अल्फा) */
.rgb-example { color: rgb(52, 152, 219); }
.transparent { background-color: rgba(0,0,0,0.5); }

/* HSL/HSLA (ह्यू, संतृप्ति, हल्कापन, अल्फा) */
.hsl-example { color: hsl(204, 76%, 53%); }
.hsla-example { background-color: hsla(204, 76%, 53%, 0.3); }

रंग मॉडल्स की तुलना

मॉडल	उदाहरण	फायदे	नुकसान
HEX	#3498db	संक्षिप्त, व्यापक रूप से समर्थित	समायोजन करना कठिन
RGB	rgb(52,152,219)	अधिक पठनीय, अल्फा चैनल (RGBA)	सहज ज्ञान युक्त नहीं
HSL	hsl(204,76%,53%)	मानव-अनुकूल, समायोजन आसान	पुराने ब्राउज़रों में सीमित समर्थन

एक्सेसिबिलिटी और कंट्रास्ट

WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइन्स) के अनुसार:

सामान्य टेक्स्ट के लिए कम से कम 4.5:1 कंट्रास्ट रेशियो
बड़े टेक्स्ट (18px+) के लिए 3:1 कंट्रास्ट रेशियो
इंटरैक्टिव एलिमेंट्स (बटन, लिंक्स) के लिए अतिरिक्त विजुअल क्यू

कंट्रास्ट जांचने के लिए WebAIM Contrast Checker जैसे टूल का उपयोग करें।

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

एक पेशेवर टाइपोग्राफिक सिस्टम बनाने के लिए इन चरणों का पालन करें:

बेस फोंट साइज सेट करें (आमतौर पर 16px)
फोंट स्टैक परिभाषित करें (सिस्टम फोंट + वेब फोंट फॉलबैक)
टाइपोग्राफिक स्केल बनाएं (h1-h6, पैराग्राफ, कैप्शन आदि)
लाइन हाइट और लेटर स्पेसिंग ऑप्टिमाइज़ करें
कलर पैलेट बनाएं जो एक्सेसिबिलिटी मानकों को पूरा करे
CSS वेरिएबल्स का उपयोग करके सिस्टम को सेंट्रलाइज़ करें

/* पूर्ण टाइपोग्राफी सिस्टम उदाहरण */
:root {
/* फोंट सिस्टम */
  --font-base: 16px;
  --font-family: 'Segoe UI', 'Nirmala UI', sans-serif;
  --font-heading: Georgia, serif;
  --font-mono: 'Courier New', monospace;

/* टाइपोग्राफिक स्केल */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.5rem; /* 24px */
  --text-2xl: 2rem; /* 32px */

/* कलर सिस्टम */
  --color-text: #333;
  --color-bg: #fff;
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-error: #e74c3c;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

CSS टाइपोग्राफ - फोंट परिवार, आकार और रंगों का उपयोग, रिस्पॉन्सिव टाइपोग्राफी

CSS टाइपोग्राफी

फोंट परिवार (Font Family)

फोंट साइजिंग सिस्टम

रंग प्रणाली (Color Systems)

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

संपर्क फ़ॉर्म