Day 16 : Typography & Web Fonts (Detailed)

on

✍️ Day 16 — Typography & Web Fonts

Hi guys, Welcome to Day 16! Typography is one of the most underrated yet powerful aspects of web design. A great font combination improves readability, strengthens your brand identity, and enhances the overall look of your website. In Today's class, you’ll learn how to style text using CSS, manage spacing, import Google Fonts, and build visually appealing text sections.

🧩 1️⃣ Understanding Typography in Web Design

Typography is not just about choosing fonts — it’s about how you present your content. Good typography balances readability, contrast, and spacing. CSS gives you complete control over how text appears on the page.

📘 2️⃣ Font Families

You can set a preferred font using the font-family property. Always include backup (fallback) fonts for compatibility. 

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

If the browser can’t load “Poppins”, it will use “Arial”, and finally “sans-serif”.

🧱 3️⃣ Font Size, Weight & Style

h1 {
  font-size: 36px;
  font-weight: 700;
  font-style: italic;
}
p {
  font-size: 16px;
  font-weight: 400;
}
  • font-size: Controls text size.
  • font-weight: Ranges from 100–900 (light to bold).
  • font-style: normal, italic, or oblique.

🎨 4️⃣ Text Alignment & Decoration

h2 {
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
}
  • text-align: left, right, center, justify
  • text-transform: capitalize, uppercase, lowercase
  • text-decoration: none, underline, line-through

💫 5️⃣ Line Height & Letter Spacing

Control text spacing for better readability using line-height and letter-spacing. 

p {
  line-height: 1.8;
  letter-spacing: 0.5px;
}

🌐 6️⃣ Importing Google Fonts

You can import Google Fonts in your HTML or CSS to use modern and unique typefaces.

👉 Method 1: HTML Link

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

👉 Method 2: @import in CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

🧮 7️⃣ Font Shorthand Property

You can combine multiple font properties in one shorthand rule: 

p {
  font: italic 16px/1.6 'Poppins', sans-serif;
}

🧠 8️⃣ Practice Task

  1. Import a Google Font of your choice (like Roboto or Open Sans).
  2. Apply different font weights to headings and paragraphs.
  3. Experiment with letter-spacing and line-height for better readability.

🧮 Mini Quiz

  • Q1: What’s the difference between font-family and font-style?
  • Q2: What does line-height control?
  • Q3: How do you import a Google Font in CSS?

🎯 Summary

Typography sets the tone of your website. From font selection to spacing, each detail affects how users perceive and engage with your content. Tomorrow, you’ll learn about **Flexbox**, one of the most powerful CSS tools for building modern layouts.

Comments

Post a Comment