CSS टॉपिक्स

🎨 CSS Design✨पाठ 6 / 16

Typography और Fonts

font-family, वेब-सेफ फॉन्ट्स, Google Fonts, font-size (px vs rem), line-height और letter-spacing से सुंदर टाइपोग्राफी बनाएं।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

🎯 इस पाठ में आप क्या सीखेंगे

1.0KB सिस्टम फॉन्ट स्टैक: GitHub, Stripe और Apple द्वारा इस्तेमाल की जाने वाली सुपर-फास्ट तकनीक।

2.टाइपोग्राफी का गोल्डन रेशियो: बड़े टाइटल्स पर नेगेटिव ट्रैकिंग बनाम छोटे बैज पर पॉजिटिव ट्रैकिंग।

3.वर्टिकल रिदम और यूनिटलेस लाइन-हाइट: पिक्सल लाइन-हाइट से टेक्स्ट के टकराने वाले हादसों से बचना।

4.फॉन्ट परफ़ॉर्मेंस और FOIT/FOUT: `@font-face`, `font-display: swap/optional`, और वेरिएबल फॉन्ट्स।

5.वित्तीय माइक्रो-टाइपोग्राफी: टाइमर्स व काउंटर्स के लिए `tabular-nums` और एंटी-एलियासिंग।

6.मॉडर्न टेक्स्ट कंट्रोल्स: `text-wrap: balance` और मल्टी-लाइन क्लैम्पिंग (`-webkit-line-clamp`)।

📐 आधुनिक वेब टाइपोग्राफी के 3 सुनहरे नियम

वेबसाइट पर मौजूद 90% से अधिक जानकारी लिखित भाषा होती है। पेशेवर टाइपोग्राफी सिर्फ सुंदर फॉन्ट चुनना नहीं है — यह गणितीय पदानुक्रम (Hierarchy) है:

1. बड़े हेडलाइन्स (Titles)आकर्षण

Line-Height: कसी हुई (`1.15` से `1.25`)। बड़े टेक्स्ट को कम लाइन-हाइट चाहिए ताकि लाइनें बिखरी न लगें।
Letter-Spacing: नेगेटिव (`-0.02em` से `-0.03em`)। बड़े अक्षरों के बीच के खाली गड्ढों को भरता है।
Wrapping: text-wrap: balance; ताकि अंत में अकेला शब्द न छूटे।

2. पैराग्राफ टेक्स्ट (Body)सुगमता

Line-Height: खुली (`1.6` से `1.75`)। आँखों को एक लाइन से दूसरी लाइन पर जाने में थकान नहीं होती।
Line Length: max-width: 65ch; (45–75 अक्षर प्रति पंक्ति)।
Font-Size: 1rem (16px) से 1.125rem।

3. बैज और अपरकेस (Micro-UI)सूक्ष्म UI

Letter-Spacing: पॉजिटिव (`0.08em` से `0.15em`)। बड़े अक्षर बिना स्पेस के चिपक जाते हैं!
Transform: text-transform: uppercase; (HTML में सीधे कैपिटल न लिखें)।
Font-Weight: बोल्ड (`700` या `800`)।

⚡ 0KB सिस्टम फॉन्ट स्टैक: GitHub, Stripe और Apple का सीक्रेट

भारी वेब फॉन्ट्स लोड करने से पेज लोड होने में 300KB+ का डेटा और 2 सेकंड की देरी होती है। दुनिया की सबसे तेज कंपनियाँ नेटिव ऑपरेटिंग सिस्टम फॉन्ट स्टैक का उपयोग करती हैं:

गोल्डन नेटिव OS फॉन्ट स्टैक0kb डाउनलोड • तत्काल रेंडरिंग

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

• macOS / iPhone: San Francisco (Apple का क्रिस्टल क्लियर फॉन्ट)।

• Windows 10 / 11: Segoe UI (माइक्रोसॉफ्ट का मूल फॉन्ट)।

• Android: Roboto (गूगल का नेटिव फॉन्ट)।

• Linux: Ubuntu या सिस्टम सैन्स-सेरिफ।

💻 लाइव टाइपोग्राफी प्लेग्राउंड

Interactive Live Editor— Edit HTML directly on the left to see live preview on the right

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Typography Demo</title>
  <style>
    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background-color: #f8fafc;
      color: #1e293b;
      margin: 0;
      padding: 24px;
    }

.article-card {
      max-width: 480px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 16px;
      padding: 28px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

.category-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4f46e5;
      background-color: #e0e7ff;
      padding: 4px 10px;
      border-radius: 999px;
      display: inline-block;
      margin-bottom: 12px;
    }

.article-title {
      font-size: 24px;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: #0f172a;
      margin: 0 0 12px 0;
    }

.article-lead {
      font-size: 15px;
      line-height: 1.65;
      color: #475569;
      margin: 0 0 20px 0;
    }

.read-more {
      font-size: 14px;
      font-weight: 600;
      color: #4f46e5;
      text-decoration: none;
      border-bottom: 2px solid #818cf8;
      padding-bottom: 2px;
      transition: color 0.2s;
    }

.read-more:hover {
      color: #3730a3;
      border-color: #3730a3;
    }
  </style>
</head>
<body>
  <div class="article-card">
    <span class="category-badge">Web Design 101</span>
    <h2 class="article-title">Why Great Typography Outweighs Fancy Visuals</h2>
    <p class="article-lead">
      95% of information on the web is written language. Optimizing typography improves reading speed, comprehension, and brand trust across all screen sizes.
    </p>
    <a href="#" class="read-more">Read full study &rarr;</a>
  </div>
</body>
</html>

Click & type to editHTML5

Browser Preview

💎 प्रोडक्शन CSS माइक्रो-टाइपोग्राफी सुपरपावर्स

ये तीन कम चर्चित CSS प्रॉपर्टीज एक सामान्य वेबसाइट और सिलिकॉन वैली के क्लास-लीडिंग ऐप्स के बीच का अंतर तय करती हैं:

1. टैबुलर नंबर्स (Tabular Numbers)font-variant-numeric: tabular-nums;

सामान्य फॉन्ट्स में `1` पतला और `0` चौड़ा होता है। टाइमर चलने पर पूरा कार्ड हिलता है! `tabular-nums` बाकी फॉन्ट को बदले बिना सभी अंकों को बराबर चौड़ाई में लॉक कर देता है।

2. मल्टी-लाइन क्लैम्पिंग (Line Clamp)-webkit-line-clamp: 3;

लंबे ब्लॉग विवरण को ठीक 3 लाइनों पर काटकर अपने-आप `...` लगा देता है। यह जावास्क्रिप्ट के उस पुराने तरीके से बेहतर है जो शब्दों को बीच से काट देता था!

3. संतुलित हेडलाइन्स (Text Wrap Balance)text-wrap: balance;

ब्राउज़र शब्दों को दूसरी लाइन में अकेला छोड़ने के बजाय दोनों लाइनों को बराबर लंबाई में संतुलित कर देता है।

कोड का पंक्ति-दर-पंक्ति विश्लेषण

.category-badge { letter-spacing: 0.12em; text-transform: uppercase; }

अक्षरों के बीच की दूरी को 12% बढ़ाता है। छोटे कैपिटल अक्षरों को स्पष्ट पढ़ने के लिए अतिरिक्त ट्रैकिंग अनिवार्य है।

.article-title { line-height: 1.25; letter-spacing: -0.02em; }

टाइटल को कसा हुआ बनाता है। बड़े बोल्ड टेक्स्ट में अपने आप बहुत खाली जगह होती है; लाइन-हाइट और ट्रैकिंग कसने से आधुनिक और प्रभावशाली रूप मिलता है।

.article-lead { line-height: 1.65; }

बॉडी टेक्स्ट के लिए यूनिटलेस लाइन-हाइट। लाइनों के बीच 65% की खुली जगह देता है ताकि पाठक की आँखें आसानी से अगली लाइन पर आ सकें।

🧠 अपनी समझ की जाँच करें: CSS Typography & Fonts

Q1डिजाइन सिस्टम में फिक्स्ड पिक्सल (जैसे `line-height: 24px;`) के बजाय यूनिटलेस लाइन-हाइट (जैसे `line-height: 1.6;`) को ही क्यों अनिवार्य माना जाता है?

Q2Stripe, Robinhood, और Bloomberg जैसी वित्तीय कंपनियाँ `font-variant-numeric: tabular-nums;` पर इतना ज्यादा निर्भर क्यों रहती हैं?

Q3`font-display: swap;` और `font-display: optional;` के बीच परफ़ॉर्मेंस का क्या बड़ा अंतर है?

Q4हेडिंग्स के अंत में अकेले छूटे हुए 'अनाथ' (orphan) शब्दों को बिना `<br>` लगाए संतुलित करने के लिए कौन-सी आधुनिक CSS प्रॉपर्टी इस्तेमाल होती है?

🛠️

प्रैक्टिस चैलेंज: कार्ड टाइपोग्राफी को पॉलिश करें

दाएँ हाथ के लाइव कोड एडिटर में:

स्टेप 1: .article-title में आधुनिक बैलेंसिंग जोड़ें: text-wrap: balance;।
स्टेप 2: .article-lead में 2-लाइन क्लैम्पिंग लगाएं: display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;।
स्टेप 3: HTML में पैराग्राफ टेक्स्ट को कॉपी-पेस्ट करके 5 लाइन लंबा करें, और देखें कि कैसे ब्राउज़र दूसरी लाइन पर अपने-आप ... लगाकर टेक्स्ट को रोक देता है!
स्टेप 4: body में -webkit-font-smoothing: antialiased; लगाकर मैक रेंडरिंग का परीक्षण करें।

💡 सही समाधान कोड देखने के लिए यहाँ क्लिक करें

.article-title { font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 12px 0; text-wrap: balance; } .article-lead { font-size: 15px; line-height: 1.65; color: #475569; margin: 0 0 20px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

सामान्य गलतियाँ और सीनियर डेवलपर इंटरव्यू प्रश्न

❌ गलती: लेआउट शिफ्ट (CLS) फॉन्ट का जाल

जब बिना साइज एडजस्टमेंट के भारी वेब फॉन्ट्स लोड किए जाते हैं, तो फॉलबैक फॉन्ट अलग चौड़ाई में दिखता है। 2 सेकंड बाद जब असली फॉन्ट आता है, तो पूरा पैराग्राफ उछल जाता है (CLS), जिससे गूगल कोर वेब वाइटल्स का स्कोर बर्बाद हो जाता है! इसके लिए font-display: optional और size-adjust का इस्तेमाल करें।

✅ प्रो टिप: वेरिएबल फॉन्ट्स 80% डेटा बचाते हैं

रेगुलर (400), मीडियम (500), बोल्ड (700) आदि के लिए 5 अलग-अलग फाइलें लोड करने के बजाय सिर्फ एक वेरिएबल फॉन्ट (जैसे `InterVariable.woff2`) लोड करें। 40KB की अकेली फाइल आपको 100 से 900 तक का हर संभव वजन दे देती है!

💬 Interview Q: FOIT बनाम FOUT क्या है और `font-display` इसे कैसे हल करता है?

FOIT (Flash of Invisible Text): जब तक कस्टम फॉन्ट डाउनलोड नहीं होता, ब्राउज़र टेक्स्ट को पूरी तरह छिपाए रखता है और खाली सफेद डिब्बा दिखाता है (जो खराब नेटवर्क पर 3 सेकंड तक खिंच सकता है)।

FOUT (Flash of Unstyled Text): ब्राउज़र तुरंत सिस्टम फॉन्ट में टेक्स्ट दिखा देता है, और फॉन्ट लोड होने पर उसे बदल देता है।

font-display: swap; हमेशा FOUT को प्राथमिकता देता है ताकि यूज़र बिना किसी देरी के तुरंत पढ़ना शुरू कर सके।

💬 Interview Q: डैशबोर्ड्स में `font-variant-numeric: tabular-nums` क्यों जरूरी है?

सामान्य फॉन्ट्स में हर अंक की चौड़ाई अलग होती है (अंक ‘1’ अंक ‘8’ की तुलना में आधा पतला होता है)।

क्रिप्टो चार्ट, स्टॉपवॉच या चालान में जब भी कोई अंक बदलता है, तो पूरी लाइन कुछ पिक्सल आगे-पीछे कांपने लगती है। tabular-nums सभी अंकों को बराबर चौड़ाई के खांचों में बांध देता है जिससे पूरा लेआउट चट्टान की तरह स्थिर रहता है।

💬 Interview Q: बिना मीडिया क्वेरी के पूरी तरह फ्लूइड फॉन्ट-साइज कैसे बनाया जाता है?

CSS clamp(min, preferred, max) का उपयोग करके:

font-size: clamp(1.25rem, 2vw + 1rem, 2.5rem);

मोबाइल पर यह 1.25rem (20px) से छोटा नहीं होगा। स्क्रीन चौड़ी होने पर स्मूथली फैलेगा, और 4K मॉनिटर पर 2.5rem (40px) पर सुरक्षित रुक जाएगा।

अगला लेसनThe Box Model