✍️ CSS COURSE – MODULE 4: TYPOGRAPHY

📁 File: typography.md

✍️ Typography in CSS

📌 Introduction

Typography is how text looks on a webpage.

CSS gives you full control over:

• font style
• size
• spacing
• alignment

👉 Good typography = professional UI 👉 Bad typography = messy website

🧠 1. Font Family

Defines the type of font used.

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

✔ Always include fallback fonts

📏 2. Font Size

h1 {
  font-size: 32px;
}

✔ Controls text size

🪶 3. Font Weight

p {
  font-weight: bold;
}

Values:

• normal
• bold
• 100 → 900

📐 4. Line Height (VERY IMPORTANT)

p {
  line-height: 1.5;
}

✔ Improves readability ✔ Used in all professional websites

🔠 5. Letter Spacing

h1 {
  letter-spacing: 2px;
}

✔ Controls space between letters

🧾 6. Word Spacing

p {
  word-spacing: 5px;
}

✔ Controls space between words

📍 7. Text Alignment

h1 {
  text-align: center;
}

Values:

• left
• right
• center
• justify

🔤 8. Text Transform

p {
  text-transform: uppercase;
}

Values:

• uppercase
• lowercase
• capitalize

🎯 9. Text Decoration

a {
  text-decoration: none;
}

✔ Removes underline from links

🧠 Important Concept

Good typography = combination of:

font-family + size + spacing + alignment

🧩 Real Example

<div class="box">
  <h1>Welcome to CSS</h1>
  <p>This is a typography example</p>
  <a href="#">Learn more</a>
</div>

.box {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 36px;
  text-align: center;
  letter-spacing: 1px;
}

p {
  font-size: 16px;
  line-height: 1.6;
  color: gray;
}

a {
  text-decoration: none;
  color: blue;
}

⚠️ Common Mistakes

• Using too many fonts ❌
• Ignoring line-height ❌
• Using default browser spacing ❌
• Not using fallback fonts ❌

🧪 Mini Exercise

Create a page with:

1. A centered heading
2. A paragraph with good line height
3. A styled link (no underline)
4. Use a clean font family
5. Add letter spacing to heading