Introduction

Text is one of the most important parts of any website. Good typography improves readability and user experience.

👉 CSS allows you to control how text looks using different font and text properties.

What You’ll Learn

• CSS font properties
• Font families and web-safe fonts
• Font size, weight, and style
• Text alignment and decoration
• Line height and letter spacing
• Google Fonts usage
• Best practices for text styling

1️⃣ Color

Changes the text color.

p {
  color: blue;
}

You can use:

• Color names (red)
• HEX (#ff0000)
• RGB (rgb(255,0,0))

For example:

• Dark text on light background is best
• Avoid light text on light backgrounds

👉 Good color contrast improves user experience and accessibility.

2️⃣ Font Family

The font-family property is used to define the typeface of text.

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

Always add a fallback:

font-family: "Times New Roman", serif;

👉 If Arial is not available, the browser will use sans-serif.

Common Font Families:

• Serif → Times New Roman
• Sans-serif → Arial, Helvetica
• Monospace → Courier New

3️⃣ Font Size

The font-size property controls the size of text.

p {
  font-size: 18px;
}

Recommended Units:

• px → fixed size
• rem → responsive (recommended)
• % → relative

👉 Use rem for better scalability.

4️⃣ Font Weight

The font-weight property defines text thickness.

p {
  font-weight: bold;
}

Values:

• normal
• bold
• 100–900

👉 Higher value = thicker text

5️⃣ Text Alignment

The text-align property controls alignment.

p {
  text-align: center;
}

Values:

• left
• right
• center
• justify

6️⃣ Text Decoration

Used for underline, overline, etc.

a {
  text-decoration: none;
}

Values:

• none
• underline
• overline
• line-through

👉 Common use: remove underline from links.

7️⃣ Text Transform

Changes letter case.

h1 {
  text-transform: uppercase;
}

Values:

• uppercase
• lowercase
• capitalize

8️⃣ Line Height

Controls space between lines.

p {
  line-height: 1.6;
}

Very important for readability.

9️⃣ Letter Spacing

Controls space between letters.

h1 {
  letter-spacing: 2px;
}

🔟 Text Shadow

Adds shadow to text.

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

Syntax:

horizontal vertical blur color

Font Style & Variant

The font-style property is used to make text italic.

p {
  font-style: italic;
}

Values:

• normal
• italic
• oblique

👉 Useful for highlighting important text.

Font Shorthand (Very Useful)

Instead of writing multiple font properties separately, you can use the font shorthand property.

Example:

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

Breakdown:

• italic → font-style
• bold → font-weight
• 16px → font-size
• 1.5 → line-height
• Arial → font-family

👉 This helps you write cleaner and shorter CSS.

Web-Safe Fonts vs Custom Fonts

There are two types of fonts used in websites:

Web-Safe Fonts

• Already installed on most devices
• Example: Arial, Times New Roman

👉 Safe but limited design options

Custom Fonts (Google Fonts)

• Downloaded from the internet
• Example: Poppins, Roboto

👉 More modern and stylish

Using Google Fonts (Important)

You can use custom fonts from Google Fonts.

Step 1: Add link in HTML

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

Step 2: Use in CSS

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

👉 This gives your website a modern look.

Real World Example

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

p {
  margin-bottom: 15px;
}

a {
  text-decoration: none;
  color: #007bff;
}

👉 This is a basic typography setup used in many websites.

Best Practices

• Use 1–2 fonts only for consistency
• Maintain proper line-height (1.5–1.8)
• Use high contrast colors (dark text on light background)
• Keep headings larger than body text
• Use spacing (margin/padding) to separate text

👉 Good typography = better user experience + better SEO

Common Mistakes

• Using too many fonts ( Stick to 1–2 fonts )
• Very small font size ( Keep text readable )
• Poor contrast ( Light text on light background is hard to read )
• Not using line-height ( Text becomes difficult to read )

Practical Tasks

Task 1: Basic Font Styling

Apply:

• font-family
• font-size
• font-weight

Task 2: Text Alignment

Create paragraphs with:

• left
• center
• right
• justify

Task 3: Text Decoration

Style links:

• Remove underline
• Add hover underline

Task 4: Spacing

Use:

• line-height
• letter-spacing

Task 5: Mini Typography Project

Create a simple blog section:

• Title (h1)
• Subtitle (h2)
• Paragraph text
• Links

👉 Focus on:

• Font size hierarchy
• Spacing
• Clean design

Task 6: Link Styling

Create links and:

• Remove underline
• Add hover effect
• Change color on hover

Important Points to Remember

• Typography improves user experience
• Use readable font sizes
• Maintain proper spacing
• Avoid too many fonts
• Use Google Fonts for modern design

Conclusion

CSS fonts and text styling play a major role in how users experience your website. Good typography makes your content easy to read, visually appealing, and more professional.

By using properties like font-family, font-size, line-height, and text-align, you can control every aspect of your text design.

👉 Always focus on:

• Readability
• Proper spacing
• Consistent font usage

👉 Avoid over-designing text. Keep it simple and clean.

With practice, you will be able to create beautiful and user-friendly typography for any website.