CSS Typography Kya Hoti Hai?

Apne Web Content ko Readable aur Visually Appealing Banana Sikhein

Introduction to Web Typography

Typography ka matlab hai text ko is tarah se arrange karna ki woh readable, legible, aur attractive ho. Web design me, CSS typography ka use fonts, colors, spacing, aur text ke dusre visual aspects ko control karne ke liye hota hai.

Font Properties

1. font-family

Yeh property text ka typeface (font) define karti hai. Aap multiple font names (as fallbacks) de sakte hain.

p { font-family: "Arial", Helvetica, sans-serif; }

2. font-size

Yeh property text ka size set karti hai. Common units hain px, em, rem, aur %.

p { font-size: 16px; }

3. font-weight

Yeh property font ki motai (boldness) control karti hai. Iski values normal, bold, ya numeric (100 to 900) ho sakti hain.

h1 { font-weight: 700; } /* bold */

4. font-style

Is property se aap text ko italic, oblique, ya normal set kar sakte hain.

em { font-style: italic; }

5. Shorthand font Property

Aap in sabhi properties ko ek font shorthand property me likh sakte hain.

p { font: italic bold 16px/1.5 Arial, sans-serif; }

Text Properties

1. text-align

Yeh property text ka horizontal alignment control karti hai. Values: left, right, center, justify.

p { text-align: center; }

2. line-height

Yeh property lines ke beech ka vertical space set karti hai, jisse readability improve hoti hai.

p { line-height: 1.6; }

3. letter-spacing & word-spacing

letter-spacing characters ke beech space control karta hai, aur word-spacing shabdo ke beech.

h1 { letter-spacing: 2px; }
p { word-spacing: 4px; }

4. text-decoration

Isse aap text par underline, overline, ya line-through add kar sakte hain.

a { text-decoration: none; }

5. text-transform

Yeh property text ka case badalti hai: uppercase, lowercase, ya capitalize.

h1 { text-transform: uppercase; }

Web Fonts (@font-face aur Google Fonts)

Aap sirf system fonts tak limited nahi hain. @font-face rule ka use karke aap custom font files (jaise .woff, .woff2) apne server se load kar sakte hain.

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
}

Sabse aasan tarika Google Fonts jaise services ka use karna hai. Aapko sirf ek <link> tag apne HTML ke <head> me add karna hota hai.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Key Takeaways

  • Acchi typography readability aur user experience ko behtar banati hai.
  • font-family se font choose karein, hamesha fallback options provide karein.
  • font-size ke liye rem unit ka use karna modern practice hai.
  • line-height ko readable banayein (aamtaur par 1.5 se 1.7 ke beech).
  • Custom fonts ke liye Google Fonts ek aasan aur powerful resource hai.
Bonus: Practical Application!
Apne webpage par aaj hi typography properties ka use karke dekhein!

Ek `h1` aur `p` element banayein aur unpar alag-alag `font-family`, `font-size`, aur `color` properties apply karein.

Practice in CSS Editor
Test Your Knowledge!
Kya aap CSS Typography ke baare mein seekh chuke hain? Chaliye dekhte hain!

Apni knowledge test karne ke liye is quick quiz ko dein.

Start Quiz