Lesson 3.6 – Fonts & Typography

Subtitle

Understanding Text Styling in CSS for Beautiful and Professional Web Pages

🎯 Learning Objectives

By the end of this lesson, students will be able to:

• Understand what fonts and typography are
• Learn why typography is important in web design
• Use CSS properties to style text
• Change font family, size, weight, and style
• Control text alignment and spacing
• Apply text decoration effects
• Improve website readability using typography principles
• Create professional-looking text layouts

📖 Introduction

When visitors open a website, one of the first things they notice is the text.

Even if a website has beautiful colors and images, poor text styling can make it difficult to read and understand.

Typography is the art of designing and arranging text in a readable and attractive way.

Imagine reading a newspaper where all letters are tiny, bold, and squeezed together. It would be very difficult to read.

The same thing happens on websites.

CSS provides many properties that help us control the appearance of text.

In this lesson, we will learn how to make website text look professional using CSS Typography.

🤔 Main Concepts

In this lesson, we will learn:

• What is Typography?
• Font Family
• Font Size
• Font Weight
• Font Style
• Text Color
• Text Alignment
• Text Decoration
• Text Transform
• Letter Spacing
• Word Spacing
• Line Height
• Text Shadow
• Best Typography Practices

🌟 Detailed Explanation

What is Typography?

Typography refers to the style, arrangement, and appearance of text.

Good typography helps:

• Improve readability
• Increase user engagement
• Make websites professional
• Create better user experience

Example:

A shopping website, educational website, and gaming website may use different fonts to match their purpose.

Font Family

The font-family property defines which font will be used.

Syntax

selector {
font-family: font-name;
}

Example

h1 {
font-family: Arial;
}

Output:

The heading will appear in Arial font.

Multiple Font Families

Different computers may not have the same fonts installed.

Therefore, we provide backup fonts.

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

If Arial is unavailable:

1. Helvetica is used
2. If Helvetica is unavailable, sans-serif is used

Common Font Families

Serif Fonts

Have decorative edges.

Examples:

• Times New Roman
• Georgia

font-family: Georgia, serif;

Sans-Serif Fonts

Clean and modern.

Examples:

• Arial
• Verdana
• Helvetica

font-family: Arial, sans-serif;

Monospace Fonts

Every character occupies equal width.

Examples:

• Courier New
• Consolas

font-family: Consolas, monospace;

Used mostly for coding text.

Font Size

The font-size property controls text size.

Example

p {
font-size: 20px;
}

Different Sizes

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 18px;
}

Font Weight

The font-weight property controls text thickness.

Normal Text

p {
font-weight: normal;
}

Bold Text

p {
font-weight: bold;
}

Numeric Values

p {
font-weight: 700;
}

Common values:

• 100 = Thin
• 300 = Light
• 400 = Normal
• 700 = Bold
• 900 = Extra Bold

Font Style

Used to make text italic.

Example

p {
    font-style: italic;
}

Normal Style

p {
    font-style: normal;
}

Text Color

Text color is controlled using the color property.

Example

h1 {
    color: blue;
}

p {
color: #333333;
}

Dark gray is commonly used for better readability.

Text Alignment

The text-align property controls text positioning.

Left Alignment

p {
text-align: left;
}

Center Alignment

h1 {
text-align: center;
}

Right Alignment

p {
    text-align: right;
}

Justify Alignment

p {
text-align: justify;
}

Makes text align evenly on both sides.

Commonly used in articles and blogs.

Text Decoration

Used to add or remove decoration lines.

Underline

h2 {
    text-decoration: underline;
}

Overline

h2 {
text-decoration: overline;
}

Line Through

h2 {
text-decoration: line-through;
}

Used to show discounts.

Example:

₹500

₹300

Remove Underline from Links

a {
text-decoration: none;
}

Very common in modern websites.

Text Transform

Changes letter case.

Uppercase

h1 {
text-transform: uppercase;
}

Output:

WELCOME

Lowercase

h1 {
text-transform: lowercase;
}

Output:

welcome

Capitalize

h1 {
text-transform: capitalize;
}

Output:

Welcome To My Website

Letter Spacing

Controls space between letters.

h1 {
    letter-spacing: 3px;
}

Output:

W E L C O M E

Word Spacing

Controls space between words.

p {
word-spacing: 10px;
}

Line Height

Controls spacing between lines.

Example

p {
    line-height: 30px;
}

Without proper line height, paragraphs may look crowded.

Better Readability

p {
    line-height: 1.6;
}

Widely used in modern websites.

Text Shadow

Adds shadow effect to text.

Syntax

text-shadow: horizontal vertical blur color;

Example

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

Creates a soft shadow behind text.

💻 Code Examples

Example 1: Basic Typography

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>NextGen Dev Hub</h1>

<p>
Welcome to the world of web designing.
</p>

</body>
</html>

CSS

h1 {
font-family: Arial;
font-size: 40px;
color: blue;
}

p {
font-family: Verdana;
font-size: 18px;
line-height: 1.6;
}

💻 Code Examples

Example 2: Text Styling

CSS

h1 {
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
}

p {
text-align: justify;
word-spacing: 4px;
}

🎯 Complete Practical Program

Professional Typography Example

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>NextGen Dev Hub LMS</h1>

<h2>Learn Web Designing</h2>

<p>
Web designing is an exciting field that allows you
to create beautiful and professional websites.
Typography plays a major role in making websites
easy to read and attractive.
</p>

</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}

h1 {
    text-align: center;
    color: navy;
    text-transform: uppercase;
    letter-spacing: 3px;
}

h2 {
    color: green;
    font-style: italic;
}

p {
    font-size: 18px;
    line-height: 1.8;
    text-align: justify;
    color: #333333;
}

🏫 Real World Examples

News Websites

Use readable fonts with proper spacing.

Examples:

• Online newspapers
• Blogs

Educational Websites

Use clean fonts for easy learning.

Examples:

• Course platforms
• School websites

E-Commerce Websites

Use different font weights and sizes for:

• Product titles
• Prices
• Offers

Gaming Websites

Often use decorative fonts for branding.

⚠️ Common Beginner Mistakes

Using Too Many Fonts

Bad:

font-family: Arial;
font-family: Verdana;
font-family: Georgia;

Using many fonts creates inconsistency.

Very Small Text

font-size: 8px;

Difficult to read.

Excessive Letter Spacing

letter-spacing: 15px;

Looks unnatural.

Using Bright Colors

color: yellow;

Hard to read on white backgrounds.

Ignoring Line Height

Crowded text reduces readability.

🌟 Best Practices

✅ Use maximum 2–3 fonts on a website

✅ Use readable fonts

✅ Keep paragraph size between 16px–20px

✅ Use proper line height

✅ Use dark text on light backgrounds

✅ Use consistent typography throughout the website

✅ Test readability on different devices

✅ Use typography to guide user attention

🏆 Mini Project / Activity

Create a “Student Profile Page”.

Requirements:

• One heading
• One subheading
• One paragraph
• Use custom font family
• Change font size
• Apply text alignment
• Use letter spacing
• Use line height

Make the page look professional.

📝 Practical Activity

Create a webpage containing:

1. Website Name
2. Course Name
3. Description Paragraph

Apply:

• font-family
• font-size
• font-weight
• text-align
• text-transform
• line-height

Experiment with different values and observe changes.

📋 Assignment

Create a webpage titled:

“My Dream Career”

Requirements:

• Main Heading
• Subheading
• Two Paragraphs
• Use at least five typography properties
• Apply proper alignment and spacing
• Use different font sizes for headings and paragraphs

🧠 Quiz (With Answers)

1. Which CSS property changes the font type?

Answer: font-family

2. Which property changes text size?

Answer: font-size

3. Which property makes text bold?

Answer: font-weight

4. Which property changes text alignment?

Answer: text-align

5. Which value converts text to capital letters?

Answer: uppercase

6. Which property controls spacing between letters?

Answer: letter-spacing

7. Which property controls spacing between lines?

Answer: line-height

8. Which property removes link underlines?

Answer: text-decoration: none

9. Which property creates text shadow?

Answer: text-shadow

10. Typography mainly improves what?

Answer: Readability and appearance of text

📌 Lesson Summary

In this lesson, we learned:

• What typography is
• Font families and font types
• Font size, weight, and style
• Text alignment and transformation
• Text decoration effects
• Letter spacing and word spacing
• Line height for readability
• Text shadow effects
• Professional typography practices

Typography is one of the most important parts of web design because every website contains text. Good typography makes websites easier to read and more attractive.