Topic 04 / 08

Typography, Web Fonts & Text Styling

1. Simple Definition

Web Typography ka matlab hai webpage ke text ko padhne me comfortable (readable) aur visually attractive banana. CSS hume font family chunne (Google Fonts), font size, thickness (font-weight), lines ke beech ki spacing (line-height) aur letters ke beech ka gap (letter-spacing) control karne ki power deta hai.

2. Real-Life Analogy

✍️ Doctor Ki Parchi vs Invitation Card Ki Calligraphy

Agar wedding card doctor ki gandi handwriting me chhap diya jaye, toh koi nahi aayega! Sahi font (jaise stylish Serif ya clean Sans-Serif) aur dono lines ke beech proper breathing space (line-height) text ko bina ankhon par zor dale readable banata hai.

3. Why Do We Need It?

Website par 90% content text hota hai. Agar typography kharab hogi toh user 5 second me bounce back kar jayega. Good typography content ki credibility aur professional image banati hai.

4. Syntax

body {
  /* System Font Stack (Instant Load & Clean) */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;            /* Base 16px */
  line-height: 1.6;           /* Breathing space between lines */
  font-weight: 400;           /* Regular weight */
  letter-spacing: -0.01em;    /* Subtle modern letter tightness */
  text-align: left;
}

h1 {
  font-weight: 800;           /* Extra Bold */
  line-height: 1.2;           /* Headings need tighter line-height */
  letter-spacing: -0.025em;
}

5. Basic Example (Using Google Fonts)

<!-- 1. Connect Google Font (Inter) in HTML <head> -->
<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=Inter:wght@400;600;800&display=swap" rel="stylesheet">

<!-- 2. Apply in CSS -->
<style>
  .modern-article {
    font-family: 'Inter', sans-serif;
    max-width: 65ch;
    margin: 0 auto;
    color: #1e293b;
  }
  .modern-article h1 {
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }
  .modern-article p {
    font-size: 1.125rem;
    line-height: 1.7;
  }
</style>

6. Output / Expected Result

The Power of Clean Typography

Jab line-height 1.6 hoti hai aur font family modern hoti hai, toh lambe articles padhna ankhon ke liye bilkul relaxing ban jata hai.

7. Code Explanation

  • font-family: Pehle custom font ka naam (jaise 'Inter'), fir fallback system fonts (jaise sans-serif) taaki agar internet slow ho toh browser default clean font me dikhaye.
  • line-height: 1.6: Har text line ke beech 1.6 times spacing (body text ke liye ideal: 1.5 se 1.7).
  • font-weight: 100 (Thin), 400 (Regular/Normal), 600 (Semi-Bold), 700 (Bold), 900 (Black).
  • text-transform: uppercase, lowercase, ya capitalize.

8. Real-World Example

Apple website ka SF Pro font, GitHub ka Mona Sans, aur Medium ka serif reading experience typography mastery ke live examples hain.

9. Common Mistakes

⚠️ Galti 1: Heading aur Paragraph dono par same line-height lagana

Paragraph ko line-height: 1.6 chahiye hoti hai. Lekin agar aap badi 40px heading par bhi 1.6 line-height laga denge, toh heading lines ke beech bura gap ban jayega. Headings ke liye hamesha 1.1 se 1.3 line-height rakhein!

⚠️ Galti 2: Ek page par 5 alag-alag fonts load karna

Website par 2 se zyada font families load mat karein (ek heading ke liye aur ek body ke liye). Zyada fonts se website load time bohot slow ho jata hai.

10. Best Practices

  • Paragraph width ko max-width: 65ch; se limit karein (human eye ek line me 60-75 characters hi comfortably track kar pati hai).
  • Web fonts ke sath display=swap attribute zaroor use karein taaki font download hone tak text invisible na ho (FOIT prevention).

11. Try It Yourself

Playground me ek article ka line-height 1.1 se badhakar 1.7 karke dekhein aur reading comfort me difference notice karein.

12. Challenge

Ek Editorial Magazine Quote blockquote banayein jisme stylish Serif font, italic style aur subtle letter spacing ho.

13. Interview Questions

💼 Q: FOUT aur FOIT me kya difference hota hai web font loading me?

Answer: FOIT (Flash of Invisible Text) me font load hone tak user ko blank khali jagah dikhti hai (bad UX). FOUT (Flash of Unstyled Text) me browser pehle system fallback font turant dikha deta hai aur jaise hi web font download hota hai, swap kar leta hai (using font-display: swap).

14. Quick Revision

  • Body text line-height: 1.5 - 1.7.
  • Heading line-height: 1.1 - 1.3.
  • Hamesha fallback font stack dein.

15. FAQ

Q1. Serif aur Sans-serif me kya antar hai?

Serif fonts ke corners par chote extra feet/strokes hote hain (jaise Times New Roman). Sans-serif ("Sans" means without) clean aur modern hote hain bina feet ke (jaise Arial, Inter).

Q2. font-weight 400 aur 700 ka kya matlab hai?

400 standard Normal/Regular hota hai aur 700 Bold hota hai.

Q3. Local fonts bina Google ke kaise load karein?

CSS @font-face { font-family: 'MyFont'; src: url('myfont.woff2'); } rule se.

Q4. WOFF2 format kya hota hai?

Web Open Font Format 2. Ye web ke liye sabse fast aur highly compressed font format hai.

Q5. text-decoration property ka common use kya hai?

Links ke niche se default underline hatane ke liye text-decoration: none; use hota hai.

Topic 04 / 08

Typography, Web Fonts & Text Styling

1. Simple Definition

CSS Typography encompasses all styling rules that shape the legibility, hierarchy, and aesthetic feel of written text on the web. It includes font families, font weights, line spacing (line-height), tracking (letter-spacing), and loading external web fonts via Google Fonts and @font-face.

2. Real-Life Analogy

📰 Newspaper Headline vs Handwritten Novel

Imagine reading a legal contract printed in playful comic handwriting, or a children's book set in rigid dense gothic script. Typography sets tone before a single word is read. High-readability fonts and generous line heights make long articles effortless to consume.

3. Core Typography Properties

Property Standard Value Function
font-family system-ui, sans-serif Specifies prioritized font stack with fallbacks
font-weight 400 (normal), 700 (bold) Sets visual thickness of glyphs
line-height 1.5 - 1.7 Vertical distance between lines of text (Best unitless!)
letter-spacing -0.02em, 0.05em Adjusts tracking space between letters
text-transform uppercase, capitalize Capitalizes text without modifying HTML source

4. System Font Stack (Fastest Performance)

/* Zero network download time — leverages OS native fonts */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

5. Loading Web Fonts with @font-face

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap; /* Eliminates flash of invisible text */
}

h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.025em;
}

6. Common Mistakes

⚠️ Common Pitfall: Setting line-height with Fixed Pixels

Setting line-height: 20px breaks when responsive headings scale up to 32px, causing text lines to overlap like a train collision! Always use unitless numbers for line-height, such as line-height: 1.5!

7. Best Practices

  • Always set unitless line-height (e.g. 1.5 to 1.65 for body prose).
  • Limit line lengths for prose reading comfort (use max-width: 65ch).
  • Use font-display: swap when loading external web fonts to prevent blank screens during loading.
  • Provide robust fallback font stacks ending in sans-serif or serif.

8. Practice Exercise

🎯 Exercise: Magazine Editorial Layout

Style a blog post with an elegant serif headline (Georgia, serif) with negative letter-spacing, and an easily readable sans-serif body with line-height: 1.7 and max-width: 68ch.

9. Interview Questions

💼 Q: What does font-display: swap achieve?

Answer: It instructs the browser to immediately render text using a fallback system font while the custom web font downloads in the background, swapping to the custom font once ready. This eliminates FOIT (Flash of Invisible Text).

10. Summary / Cheat Card

  • Use unitless line-height: 1.5 for accessible readability.
  • System font stacks yield instantaneous page loads with zero layout shift.
  • WOFF2 is the modern, highly compressed web font format standard.

11. FAQ

Q1. What is the difference between serif and sans-serif?

Serif fonts have small decorative strokes or feet at the ends of letter lines (e.g. Times New Roman, Georgia). Sans-serif fonts are clean without decorative strokes (e.g. Arial, Inter).

Q2. What is a variable font?

A variable font stores multiple weights and styles within a single compact file, drastically reducing HTTP requests.

⬅️ Prev: Colors & Units Next: The CSS Box Model ➡️