Skip to main content
CSS for Beginners
CHAPTER 05 Beginner

CSS Typography and Text Styling

Updated: May 10, 2026
5 min read

# CSS Typography and Text Styling

1. Introduction

Words make up 90% of the web. Typography is the art of arranging that text to make it readable, engaging, and beautiful. In this chapter, we will learn how to style fonts and texts.

2. Learning Objectives

  • Change fonts using font-family and import Google Fonts.
  • Control text size, weight, and alignment.
  • Adjust spacing (letter-spacing and line-height) for readability.

3. Detailed Explanations

Font Families

The font-family property defines which font the browser should use. Always provide a "fallback" font in case the primary one isn't installed.
css
1234 
body {
    /* Tries Helvetica, then Arial, then any sans-serif */
    font-family: "Helvetica Neue", Arial, sans-serif;
}

Google Fonts

To use custom fonts, you can import them from Google Fonts.
html
12 
<!-- In your HTML <head> -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
css
1234 
/* In your CSS */
body {
    font-family: &#039;Inter', sans-serif;
}

Font Size and Weight

font-size dictates how large text is (px, em, rem). font-weight dictates how bold it is.
css
123456789 
h1 {
    font-size: 3rem; /* Very large */
    font-weight: 800; /* Extra bold */
}

p {
    font-size: 16px; /* Standard text */
    font-weight: 400; /* Normal */
}

Alignment and Decoration

You can center text, underline it, or transform it to uppercase.
css
123456 
.center-title {
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 2px; /* Spreads letters apart */
}

Line Height (Readability Secret)

The most important rule for readable paragraphs is giving them breathing room vertically.
css
12345 
p {
    /* 1.6 means 160% of the font-size */
    line-height: 1.6; 
    color: #4a5568;
}

4. Mini Project: Elegant Article

html
12345 
<div class="article">
    <h1 class="headline">The Art of Typography</h1>
    <p class="author">By Jane Doe</p>
    <p class="body-text">Typography is what language looks like. It is the visual manifestation of spoken words.</p>
</div>
css
12345678910111213141516171819202122232425262728 
.article {
    max-width: 650px;
    margin: 0 auto;
    font-family: &#039;Merriweather', serif; /* A nice reading font */
}

.headline {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: #1a202c;
    text-align: center;
}

.author {
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 2rem;
}

.body-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #2d3748;
}

5. MCQs

Q1: Which property increases the vertical space between lines of text? A) letter-spacing B) line-height C) word-spacing D) text-align *Answer: B*

6. Summary

Good typography is invisible; it makes reading effortless. Always pair a good font family with a healthy line-height and proper font-weight hierarchy.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter CSS Borders, Margins, Padding, and Box Model
Next Chapter CSS Display, Positioning, and Layout Basics

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1