Chapter 1.4☕ 12 min read

Typography & Fonts

Font families, sizes, weights, line heights — make your text readable and beautiful. Typography is 90% of web design.

01What is Typography in CSS?

Typography in CSS controls how text looks on your web page. It includes font family, size, weight, line height, letter spacing, and more. Good typography makes content readable and professional.

In Hyderabad, think of Paradise Biryani House menu — clear, readable fonts with perfect spacing. That's good typography. Bad typography = confusing menu = customers leave.

🍛

Real World Analogy: Typography = the handwriting style of your website. Just like good handwriting makes notes readable, good typography makes web content readable.

02Font Properties — The Essentials

These six font properties are the most important — you'll use them every day.

Property Example Description

font-family "Arial", sans-serif Which font to use. Always provide fallback fonts.

font-size 16px / 1rem Size of text. Use rem for better scaling.

font-weight 400, 700 Thickness. 400 = normal, 700 = bold, 900 = extra bold.

line-height 1.6 Spacing between lines. 1.4-1.6 is ideal for readability.

letter-spacing 0.5px Space between letters. Use sparingly for headings.

font-style italic Normal, italic, or oblique text style.

.heading {
  font-family: 'Georgia', serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: #f97316;
}
.body-text {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #374151;
}

03Font Families & Google Fonts

Font families determine which font is used. You can use system fonts or load custom fonts from Google Fonts.

Type Example

System Sans-serif font-family: Arial, sans-serif;

Serif Fonts font-family: Georgia, serif;

Monospace font-family: "Courier New", monospace;

Google Fonts @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

/* System font stack — fast, no external requests */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Google Fonts — add in HTML head */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
body { font-family: 'DM Sans', sans-serif; }

💡

Pro Tip: Always provide fallback fonts. If Google Fonts fails to load, the fallback kicks in.

04Typography Best Practices

Follow these rules for professional-looking text on your websites.

Use rem: font-size: 1rem — respects user browser settings and scales with accessibility needs.
Line height: 1.4-1.6 for body text, 1.2-1.3 for headings. Unitless values scale with font size.
Limit font families: 2-3 per page max. Too many looks messy and hurts performance.
Font weight: 400 for body text, 600-700 for headings, 800-900 for special emphasis.
Google Fonts: Load with display=swap to prevent invisible text during load.

/* Recommended body text setup */
body {
  font-family: 'Inter', -apple-system, Arial, sans-serif;
  font-size: 1rem;     /* 16px default, scales with user settings */
  font-weight: 400;
  line-height: 1.6;
  color: #1e293b;
}

/* Recommended heading setup */
h1 {
  font-family: 'Georgia', serif;
  font-size: 2.5rem;   /* 40px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

05Exercise — Typography Playground

Write CSS below and see instant preview. Experiment with fonts, sizes, weights, and spacing.

Open VS Code. Create typography-practice.html.

Use the starter code and experiment with typography:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Typography Practice</title>
  <style>
    .title {
      font-family: 'Arial', sans-serif;
      font-size: 24px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0;
      color: #f97316;
    }
    .description {
      font-family: 'Georgia', serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.6;
      color: #374151;
    }
  </style>
</head>
<body>
  <h1 class="title">🍛 Paradise Biryani House</h1>
  <p class="description">Authentic Hyderabadi Biryani — Since 1953.</p>
</body>
</html>

Try these experiments:

Change font-family to "Georgia", serif Increase font-size to 2rem Set font-weight to 700 and letter-spacing: 1px Try font-style: italic on the description Add a Google Font — @import url(...) in the style

Done — Key Points:

✅ 6 core font properties: font-family, font-size, font-weight, line-height, letter-spacing, font-style
✅ Use rem for font sizes — respects user accessibility settings
✅ Line height 1.4-1.6 for body, 1.2-1.3 for headings — unitless values preferred
✅ Always provide fallback fonts in font-family
✅ Limit to 2-3 font families per page for performance and consistency
✅ Google Fonts: load with display=swap to prevent FOIT (Flash of Invisible Text)

Previous1.3 — Colors & Backgrounds 📋 All Chapters Next Chapter1.5 — Advanced Typography & Text Layout →