CSS3 Course in Roman Hindi/Urdu - Beginner se Advanced Tak | Lecture 9: CSS3 Typography Full Guide (Yaar, Fonts, Text Effects, Web Fonts, Responsive Text – Full Deep Dive Se Samajh Aayega!)
Assalam-o-Alaikum yaar! Kya haal hai, dost? Pichli lecture mein colors, gradients, backgrounds seekh liye – sites ko rainbow bana diya, multi-layers se rich textures! Ab readable magic: CSS3 Typography! Yeh CSS3 ka artistic heart hai – fonts load kar (Google Fonts), text effects (shadow, clip), web fonts custom, responsive text (fluid sizes) se content pop kare. Hum is lecture mein font-family/loading, text-shadow/transform, web fonts (@font-face), aur responsive typography (rem/em, clamp) ko full detail mein bataayenge – har ek ka use kya, kyun zaroori, kahan lagana, aur real examples ke saath, jaise tere saath book design kar raha hoon. Tension mat le, step-by-step, code copy-paste se try karenge. Yeh seekh le toh blogs, articles ko professional typefaces dega – readability high, user stick rahega!
Yaar, typography 1996 se hai, lekin CSS3 web fonts ne revolution laaya – no system fonts limit. Ready? Chal shuru!
CSS3 Typography Kya Hai? (Yaar, Overview – Kyun Aur Kab Use Karein)
Dost, Typography text ka art/science – fonts choose, size/effects set, readable banao. CSS3 mein @font-face custom load, text-shadow 3D, transform italic/skew. Use: Content styling (headings, body). Why: 95% user time reading pe, good type = better UX/SEO (dwell time). Where: Blogs, sites. Example: h1 { font-family: 'Playfair Display'; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } – elegant shadow title. Without: Default Arial boring. Responsive: Clamp(1rem, 2.5vw, 2rem) fluid sizes. Modern: Variable fonts (one file multiple weights).
Fun fact: Typography printing press se shuru, CSS3 ne web ko book jaise bana diya. Chalo properties deep dive!
CSS3 Font Properties - Har Ek Ka Full Explain (Use, Why, Where with Examples)
Yaar, fonts text ka face – 7 main properties, full details: use kya, kyun, kahan, example.
- font-family: Use: Font stack (primary, fallback). Why: Brand look. Where: Body/headings. Example: font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif;Roboto Modern
– clean. Quotes for spaces, comma separate. Why: Fallback user no font. - font-size: Use: Text height. Why: Hierarchy/readable. Where: All text. Example: font-size: clamp(1rem, 4vw, 2rem);
font-size: clamp(1rem, 4vw, 2rem);Responsive Size
– fluid clamp (CSS3). Units: px fixed, rem relative root, em parent. Use: Mobile scale. - font-weight: Use: Thickness (normal/bold). Why: Emphasis. Where: Titles. Example: font-weight: 300;
font-weight: 300;Light Weight
– thin. Values: 100(light)-900(black), normal(400)/bold(700). Why: Mood set. - font-style: Use: Italic/oblique. Why: Quotes/emphasis. Where: . Example: font-style: italic;
font-style: italic;Italic Slant
– leaning. Oblique synthetic italic. Use: Subtle. - line-height: Use: Line spacing. Why: Readability. Where: Paragraphs. Example: line-height: 1.6;
line-height: 1.6;Spaced Lines Easy Read
– airy. Unitless relative, px absolute. Why: Dense text avoid. - letter-spacing: Use: Char gaps. Why: Modern look. Where: Logos. Example: letter-spacing: 2px;
letter-spacing: 2px;S P A C E D
– spread. Negative kern tight. Use: Headlines. - text-transform: Use: Case change. Why: Consistent. Where: Menus. Example: text-transform: uppercase;
text-transform: uppercase;ALL CAPS
– upper. Lowercase/lowercase. Why: Nav clean.
Shorthand Font: font: 1.2em/1.6 'Arial', sans-serif bold italic; Yaar Tip: Rem for responsive, system fonts ( -apple-system) fast load.
CSS3 Text Effects - Shadow, Clip, Overflow (Full with Examples)
Dost, effects text ko fancy – 5 main, details.
- text-shadow: Use: Shadow offset/blur. Why: Depth. Where: Titles. Example: text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);Shadow Title
– 3D. Multiple shadows comma. Why: Read on busy bg. - text-overflow: Use: Ellipsis on overflow. Why: Truncate clean. Where: Cards. Example: text-overflow: ellipsis; overflow: hidden; white-space: nowrap; – ... end.
text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - word-break: Use: Long words break. Why: Layout fix. Where: URLs. Example: word-break: break-all;
word-break: break-all;Supercalifragilisticexpialidocious
– broken. Break-word natural. Why: Overflow prevent. - hyphens: Use: Auto hyphenate. Why: Justify flow. Where: Articles. Example: hyphens: auto;
hyphens: auto;Supercalifragilisticexpialidocious word will hyphenate
– hyphens add. - text-indent: Use: First line indent. Why: Book style. Where: Paragraphs. Example: text-indent: 2em;
text-indent: 2em;Indented first line text...
– paragraph start.
Yaar Tip: Shadow multiple for glow: 0 0 10px rgba(0,0,0,0.5), 0 0 20px rgba(0,0,0,0.3);. Overflow hidden with ellipsis responsive.
CSS3 Web Fonts - @font-face Aur Google Fonts (Full Loading with Examples)
Dost, web fonts custom typefaces load – system fonts limit se free.
- @font-face: Use: Custom font define (WOFF2 best). Why: Brand unique. Where: Head CSS. Example: @font-face { font-family: 'CustomFont'; src: url('custom.woff2') format('woff2'); } body { font-family: 'CustomFont', sans-serif; } – loaded font. Formats: woff2/woff/ttf. Why: Fallback sans-serif.
@font-face { font-family: 'CustomFont'; src: url('custom.woff2') format('woff2'); } - font-display: Use: Loading behavior. Why: FOUT/FOIT avoid. Where: @font-face. Example: font-display: swap; – fallback instant, load par swap. Values: auto/block/swap/fallback/optional. Use: Fast render.
font-display: swap; - Google Fonts: Use: Free hosted. Why: Easy link. Where: . Example: h1 { font-family: 'Poppins', sans-serif; } – Google load. Why: No upload.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
Yaar Tip: Preload: fast load. Variable fonts one file multiple weights.
Responsive Typography - Fluid Sizes & Clamp (Full with Examples)
Yaar, responsive text screen size adjust – clamp CSS3 hero.
- rem/em vs px: Use: Relative sizing. Why: Scale. Where: All. Example: font-size: 1.2rem; (root 16px = 19.2px). em parent relative. Why: User zoom respect.
- clamp(min, preferred, max): Use: Auto scale. Why: Fluid. Where: Headings. Example: font-size: clamp(1.5rem, 4vw, 3rem);
font-size: clamp(1.5rem, 4vw, 3rem);Responsive Heading
– small min, large max. Why: No media queries per size. - Media Queries for Text: Use: Breakpoints. Why: Device specific. Where: Mobile. Example: @media (max-width: 600px) { body { font-size: 14px; } } – small screen small text.
@media (max-width: 600px) { body { font-size: 14px; } }
Yaar Tip: Viewport units (vw/vh) fluid, but clamp combine for safe.
Apna Pehla Typography Project (Yaar, Hands-On – Step-by-Step with Fixes)
Dost, ab banao custom font article!
Step 1: Setup
Folder "Typography-Project". Files: index.html, type.css. Live Server. Google Fonts link ready.
Step 2: Code Likh (Full with Why)
type.css:
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400&display=swap'); /* Google Fonts */
/* @font-face for Custom (if file) */
@font-face {
font-family: 'MyCustom';
src: url('mycustom.woff2') format('woff2');
font-display: swap;
}
/* Typography Base */
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.1rem;
line-height: 1.7;
color: #333;
}
h1, h2 {
font-family: 'Playfair Display', serif;
font-weight: 700;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
letter-spacing: 0.5px;
}
h1 {
font-size: clamp(2rem, 5vw, 4rem);
text-align: center;
text-transform: uppercase;
text-indent: 0;
}
p {
margin-bottom: 1.5em;
text-align: justify;
hyphens: auto;
word-break: break-word;
text-indent: 1.5em; /* Paragraph indent */
}
.quote {
font-style: italic;
font-weight: 300;
text-shadow: none;
quotes: "“" "”" "‘" "’";
text-indent: 0;
}
.quote::before {
content: open-quote;
}
.quote::after {
content: close-quote;
}
/* Effects */
.text-effect {
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 400;
letter-spacing: 1px;
}
.shadow-text {
text-shadow:
0 0 5px rgba(0,0,0,0.3),
0 0 10px rgba(0,0,0,0.2),
0 0 15px rgba(0,0,0,0.1);
}
/* Responsive */
@media (max-width: 600px) {
body { font-size: 1rem; line-height: 1.6; }
h1 { letter-spacing: 0; }
p { hyphens: none; } /* Mobile no hyphen */
}index.html:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography Demo - Lecture 9</title>
<link rel="stylesheet" href="type.css">
</head>
<body>
<h1>Typography Article</h1>
<p>Yeh paragraph indented hai, justified text with line-height for readability. Font Open Sans modern sans-serif.</p>
<p class="quote">"Typography is the art of arranging type to make language visible." – Ellen Lupton</p>
<h2 class="text-effect">Gradient Text Effect</h2>
<p class="shadow-text">Shadowed text for depth – multiple shadows layered.</p>
<p style="word-break: break-all; width: 200px;">Supercalifragilisticexpialidocious long word broken.</p>
</body>
</html>Yaar, Yeh Kaise Kaam Karta? Google Fonts Open Sans body, Playfair headings serif, h1 clamp fluid size, quote italic quotes, gradient clip colorful text, shadow layered glow, word-break long words, responsive mobile adjust. Test: Resize – text scales. Mistakes: Font not load? Fallback sans-serif. Clip text no? -webkit- prefix.
Step 3: Test aur Tweak (Dost Help)
1. Save, refresh – fonts change? 2. Inspect: Fonts tab loaded dekh. 3. Tweak: @font-face local file add, display: swap fast. Mobile hyphen off. Issue: Variable font? Weights specify.
Practice Tasks (Yaar, Challenges – Level Up Kar)
- Easy (10 Min): Code copy, body font-family Georgia badal, test. (Use: Serif switch.)
- Medium (15 Min): Text-shadow multiple add h1 par glow, letter-spacing 1px.
- Advanced (20 Min): Responsive clamp font-size p par, media query dark text color.
Dost Challenge: Ek quote block banao ::before/::after quotes, font-style oblique, text-indent hanging. Screenshot!
Common Questions (Yaar, Sab Clear – FAQ Dost Style)
- Q1: rem vs em difference?
- A: Rem root relative (consistent), em parent (nested scale). Example: Nested em bigger, rem fixed.
- Q2: Web fonts slow load?
- A: font-display: swap; instant fallback. Preload link add.
- Q3: Text-shadow performance?
- A: GPU ok, multiple 3-4 max. Blur high slow.
- Q4: Clamp for all sizes?
- A: Haan, but min/max safe (1rem-3rem). Fluid typography.
- Q5: Hyphens which languages?
- A: lang="hi" auto, but English manual. Mobile off for width.
Next Lecture Teaser
Yaar, agla layout: CSS3 Media Queries & Responsive Design Full Guide – Breakpoints, Viewport, Mobile-First Approach. Typography practice kar, responsive maza aayega. Comment bata kaisa tha – saath hain!
Course Outline Hint: - L1: Basic Intro - L2: Advanced Selectors - L3: Box Model - L4: Flexbox - L5: Grid - L6: Animations - L7: Transforms - L8: Colors/Backgrounds - L9: Typography (Yeh) - ... L20: Projects.
Doubts ho toh bol, dost. Allah Hafiz! Typography master kar le. 😊
