CSS Text & Fonts

Introduction

Text is the most important part of almost every website. Whether it is a blog, documentation site, product page, or dashboard, users mainly interact with text content. If text is hard to read, badly spaced, or poorly styled, users will leave the site—even if the design looks good.

In this chapter, you will learn how CSS controls:

• Text color and alignment
• Spacing between lines and letters
• Font families and font loading
• Text decoration and transformation
• Readability and real-world typography best practices

This chapter focuses on practical typography, not design theory.

CSS Text Color

We already touched on text color earlier, but here we focus on best usage.

p {
  color: #333;
}

Why #333 instead of pure black?

• Pure black (#000) is harsh on eyes
• Slightly lighter black improves readability
• This is a common professional practice

Text Alignment

The text-align property controls horizontal alignment of text.

Values: left (default), right, center, justify.

h1 {
  text-align: center;
}

Justified text:

p {
  text-align: justify;
}

Text Decoration

The text-decoration property is commonly used for links.

a {
  text-decoration: none;
}

Common values: underline, none, line-through, overline.

Example:

.price {
  text-decoration: line-through;
}

Used in: Discount prices, Old values, Completed tasks.

Text Transformation

The text-transform property controls capitalization.

Values: uppercase, lowercase, capitalize.

h2 {
  text-transform: uppercase;
}

Real-world usage: Headings, Buttons, Navigation menus.

Avoid transforming long paragraphs, as it hurts readability.

Line Height (Very Important)

line-height controls vertical spacing between lines.

p {
  line-height: 1.6;
}

Why this matters: Improves readability, Prevents text from looking crowded.

Spacing Properties

h1 {
  letter-spacing: 1px;
}

p {
  word-spacing: 2px;
}

Font Families

Fonts define the personality of a website.

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

Font family types: serif (Times New Roman), sans-serif (Arial, Roboto), monospace (Courier New), cursive, fantasy.

Font fallback system: font-family: "Roboto", Arial, sans-serif; (If Roboto is unavailable, browser uses Arial).

Web Safe Fonts

Web safe fonts work on almost all devices (e.g., Arial, Verdana, Georgia, Times New Roman). They are reliable but limited in style.

Using Google Fonts

Google Fonts allow modern typography.

Step 1: Add font link

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

Step 2: Use in CSS

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

Best practice: Limit to 1–2 fonts, Avoid loading many font weights.

Font Properties

Font Size

p {
  font-size: 16px;
}

Recommended: Body text (15–18px), Headings (relative sizes). Avoid using very small text.

Font Weight

Controls thickness of text.

h1 {
  font-weight: 600;
}

Common values: 400 (normal), 500, 600, 700 (bold).

Font Style

Used mainly for italic text.

em {
  font-style: italic;
}

Advanced Text Effects

Text Shadow

h1 {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

Use sparingly. Too much shadow looks unprofessional.

Text Overflow Handling

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Common in: Cards, Product names, Table cells.

Real-World Example: Blog Typography

body {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

h1, h2, h3 {
  line-height: 1.3;
}

a {
  color: #0066cc;
  text-decoration: none;
}

This setup is widely used in professional blogs.

Common Mistakes & Best Practices