Text & Fonts in CSS

1. CSS Text Properties

1. Text Color

Text ka color change karne ke liye color property use hoti hai.

p {
  color: darkblue;
}

2. Text Alignment

Text ko left, right, center, ya justify align karne ke liye text-align use hota hai.

h1 { text-align: center; }
p { text-align: justify; }

left (default)
right
center
justify (proper newspaper-style spacing)

3. Text Decoration

Underline, overline ya line-through lagane ke liye.

a { text-decoration: none; }  /* Links without underline */
h2 { text-decoration: underline; }
p { text-decoration: line-through; }

4. Text Transform

Text ke case (uppercase/lowercase/capitalized) ko control karta hai.

h1 { text-transform: uppercase; }
p { text-transform: lowercase; }
span { text-transform: capitalize; }

5. Text Spacing

Letter Spacing: Har character ke beech ka gap.

p { letter-spacing: 2px; }

Word Spacing: Har word ke beech ka gap.

p { word-spacing: 10px; }

Line Height: Line ke beech ka vertical gap (important for readability).

p { line-height: 1.6; }

6. Text Shadow

Text ko stylish banane ke liye shadow add karna.

Format: text-shadow: x-offset y-offset blur color;

h1 {
  text-shadow: 2px 2px 5px gray;
}

2. CSS Font Properties

1. Font Family

Text ke style (design) ko control karta hai.

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

Always fallback fonts likhna chahiye (browser compatibility ke liye).

2. Font Size

Text ka size set karta hai.

p { font-size: 16px; }
h1 { font-size: 2em; }

Units:
px (absolute)
em/rem (relative & responsive)
% (relative to parent)

3. Font Weight

Text ki thickness set karta hai.

p { font-weight: normal; }
h1 { font-weight: bold; }

Values: normal, bold, lighter, or numbers (100–900).

4. Font Style

Italics ya normal style ke liye.

em { font-style: italic; }

5. Font Variant

Small-caps effect dene ke liye.

p { font-variant: small-caps; }

6. Shorthand: `font` Property

Ek hi line me saari font properties likhne ka shortcut.

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

Format: font: style variant weight size/line-height family;

3. Web Fonts

1. Why Web Fonts?

System fonts limited hote hain. Har user ke computer me same fonts nahi hote. Web fonts allow karte hain ki aap custom fonts load karke use karo.

2. Google Fonts

Sabse popular source hai.

Example:

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

body {
  font-family: 'Roboto', sans-serif;
}

3. @font-face Rule

Custom fonts ko local file se load karna.

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff");
}
p {
  font-family: "MyFont", sans-serif;
}

Best Practices for Text & Fonts

Readability ko priority do (font-size, line-height balanced ho).
Zyada fancy fonts avoid karo — professional look ke liye 2–3 fonts enough hote hain.
Contrast maintain karo: light background pe dark text aur dark background pe light text.
Responsive units (em/rem) ka use karo mobile-friendly design ke liye.

Conclusion

CSS Text aur Fonts properties aapko apne website ke content ko beautiful aur readable banane ki power deti hain. Sahi typography aur spacing se aapka design professional aur user-friendly lagta hai.