🎨 Days 1–6 – CSS की नींव · दिन 03
दिन 3: Typography: Fonts, Text और Google Fonts
⏱ 75 min📶 Beginner🎯 100% self-study
दिन 3 / 20
✅ आज आप सीखेंगे
- font-family और सुरक्षित font stacks
- English और Devanagari (Hindi) के लिए Google Fonts
- Type scale: font-size, weight और line-height
- letter-spacing, text-transform, text-align, text-decoration
- पढ़ने लायक paragraphs: line length और spacing
🏢 असली दुनिया में
Website का 95% हिस्सा text है। एक coaching institute मालिक का feedback: “Students कहते हैं phone पर हमारा notes page पढ़ते-पढ़ते थक जाते हैं।” Fix नया content नहीं था – 18px text, 1.6 line-height, 65-character line length और सही Hindi font था। Typography site को premium दिखाने का सबसे सस्ता तरीक़ा है।
font-family और font stacks
HTML + CSS
<style>
.serif { font-family: Georgia, "Times New Roman", serif; }
.sans { font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.mono { font-family: Consolas, "Courier New", monospace; }
.hand { font-family: "Comic Sans MS", cursive; }
</style>
<p class="serif">Serif – traditional, newspapers, wedding cards</p>
<p class="sans">Sans-serif – clean, modern, apps and websites</p>
<p class="mono">Monospace – code: print("Hello")</p>
<p class="hand">Cursive – only for decoration, never for paragraphs</p>🧠 Font stack क्या है?
Browser हर font बाएँ से दाएँ आज़माता है और पहला installed font लेता है। हमेशा generic family (serif / sans-serif / monospace) से ख़त्म करें ताकि हर device पर कुछ समझदार दिखे।
Google Fonts – Hindi समेत
HTML – add in <head> before your style.css
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Noto+Sans+Devanagari:wght@400;600&display=swap" rel="stylesheet">
CSS – use them
body {
font-family: "Poppins", system-ui, sans-serif;
}
:lang(hi) { /* any element with lang="hi" */
font-family: "Noto Sans Devanagari", "Poppins", sans-serif;
}| अच्छी जोड़ी | Headings | Body text |
|---|---|---|
| Modern business | Poppins 700 | Inter / system-ui 400 |
| पारंपरिक (मिठाई, गहने) | Playfair Display 700 | Lato 400 |
| शिक्षा | Nunito 800 | Nunito 400 |
| Hindi content | Noto Sans Devanagari 600 | Noto Sans Devanagari 400 / Hind |
⚠️ Performance
हर font weight अलग download है (~20–40 KB)। सिर्फ़ 2–3 इस्तेमाल होने वाले weights load करें, display=swap रखें ताकि text तुरंत दिखे, और दो से ज़्यादा font families कभी नहीं।
Size, weight और line height
HTML + CSS
<style>
html { font-size: 100%; } /* = 16px, respects user setting */
h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.15; margin: 0 0 .5rem; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 1rem 0 .4rem; }
p { font-size: 1.0625rem; line-height: 1.65; margin: 0 0 1rem; }
small { font-size: .875rem; color: #6b7280; }
</style>
<h1>Class 10 Science Notes</h1>
<small>Updated 25 Oct · 6 min read</small>
<h2>Chapter 1: Chemical Reactions</h2>
<p>A chemical reaction changes one or more substances into new substances. Signs of a reaction include a change in colour, release of gas, change in temperature and formation of a precipitate.</p>| Property | आम value | क्यों |
|---|---|---|
| font-size (body) | 1rem–1.125rem (16–18px) | 16px से कम phones पर मुश्किल |
| line-height (body) | 1.5–1.7 (बिना unit!) | Lines के बीच जगह = आँखों पर कम ज़ोर |
| line-height (headings) | 1.1–1.3 | बड़े text को कम gap चाहिए |
| font-weight | 400 normal, 600 semi-bold, 700 bold | सिर्फ़ load किए weights |
| max-width (paragraph) | 60–75ch | लंबी lines में आँख जगह भूलती है |
Text styling properties
HTML + CSS
<style>
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; color: #264de4; }
.title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: .2rem 0; }
.center { text-align: center; }
.strike { text-decoration: line-through; color: #9ca3af; }
.now { color: #16a34a; font-weight: 700; }
.fancy-link { color: #264de4; text-decoration: underline wavy #f59e0b; text-underline-offset: 4px; }
.truncate { width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px dashed #ccc; }
</style>
<div class="center">
<p class="eyebrow">Admissions open 2026–27</p>
<p class="title">Crack JEE with Vidya Coaching</p>
<p>Fee: <span class="strike">₹60,000</span> <span class="now">₹45,000</span></p>
<a class="fancy-link" href="#">See batch timings</a>
</div>
<p class="truncate">Very long product name: Premium Dry Fruit Gift Hamper with Kaju, Badam and Pista</p>असली fix: थकाने वाला notes page
HTML + CSS
<style>
.before { font: 13px/1.2 Arial, sans-serif; text-align: justify; }
.after {
font-size: 1.0625rem;
line-height: 1.7;
max-width: 65ch;
color: #1f2937;
}
.label { font: 700 12px system-ui; color: #b91c1c; margin-top: 10px; }
.label.ok { color: #15803d; }
</style>
<p class="label">BEFORE</p>
<p class="before">Photosynthesis is the process by which green plants make their own food using sunlight, carbon dioxide and water. Chlorophyll in the leaves absorbs sunlight. Oxygen is released as a by-product, which is why plants are essential for life on Earth.</p>
<p class="label ok">AFTER</p>
<p class="after">Photosynthesis is the process by which green plants make their own food using sunlight, carbon dioxide and water. Chlorophyll in the leaves absorbs sunlight. Oxygen is released as a by-product, which is why plants are essential for life on Earth.</p>💡 Shorthand
font: 600 1.125rem/1.6 "Poppins", sans-serif; एक line में weight, size, line-height और family देता है। Size और family ज़रूरी हैं; क्रम मायने रखता है।
🏅 आज के Job Skills
✔ सुरक्षित font stacks लिखना और Google Fonts load करना✔ सही Devanagari font से Hindi text style करना✔ rem और बिना-unit line-height से type scale✔ लंबा text आराम से पढ़ने लायक बनाना
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: Price tag style करें: छोटा uppercase “MRP” label, कटा पुराना price और बड़ा हरा नया price।
Solution देखें
Task 2: Blog article style लिखें: h1 2.25rem, paragraphs 1.0625rem / 1.7, max-width 65ch, margin: 0 auto से page के बीच में।
Task 3: Noto Sans Devanagari load करें और :lang(hi) से एक English और एक Hindi paragraph सही fonts में दिखाएँ।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. Font stack sans-serif से क्यों ख़त्म करें?
Generic family हमेशा मिलती है।
2. Body का सबसे अच्छा line-height?
बिना unit 1.5–1.7।
3. आरामदायक paragraph चौड़ाई?
60–75 characters।
4. एक line से text बाहर जाए तो “…” कौन दिखाता है?
तीनों चाहिए।
5. Google Fonts URL में display=swap…
बेहतर गति अनुभव।
Interview corner
💼 Interview Corner
line-height आमतौर पर बिना unit क्यों?
बिना unit value एक गुणक है जो ratio के रूप में inherit होता है, इसलिए अलग font sizes वाले children को अनुपात में spacing मिलती है। px या em value एक बार गणना होकर fixed length के रूप में inherit होती है, जिससे तंग या बहुत बड़े gaps बनते हैं।
Web fonts तेज़ कैसे रखें?
कम families और weights load करें, preconnect लें, font-display: swap, हो सके तो WOFF2 files self-host करें, characters subset करें, और मुख्य font file preload करें।
सारांश
- Font stacks generic family पर ख़त्म; 2–3 Google Font weights load करें।
- :lang(hi) से Hindi के लिए Devanagari font।
- Body 1rem–1.125rem, line-height ~1.6, max-width ~65ch।
- letter-spacing, text-transform और text-overflow निखार देते हैं।
➡️ आगे
Day 4: box model – margin, padding, border, box-sizing और आपका layout उम्मीद से 20px चौड़ा क्यों है।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या Google Fonts commercial websites के लिए मुफ़्त हैं?
हाँ, ये open-source हैं (ज़्यादातर SIL Open Font License) और client व commercial काम के लिए मुफ़्त।
मेरा Hindi text टूटा क्यों दिखता है?
चुने font में Devanagari glyphs नहीं हैं, इसलिए browser fonts मिला देता है। lang="hi" content के लिए Noto Sans Devanagari या Hind जैसा Devanagari font जोड़ें।
