Web typography basics

Typography is how text looks and feels on a page.

Good typography makes your content easier to read. It also helps headings, paragraphs, buttons, and labels feel organized.

In CSS, typography is controlled with properties such as font-family, font-size, line-height, text-align, and simple formatting rules.

What web typography means

Web typography means choosing and styling text for a website.

It is not only about making text bigger or smaller. It also includes:

• which font is used
• how large the text is
• how much space sits between lines
• whether text is aligned left, center, or right
• whether text is bold, italic, uppercase, or underlined

The goal is simple: make text clear and comfortable to read.

Font family

The font-family property tells the browser which font to use.

You usually write more than one font name. This list is called a font stack. The browser tries the first font. If that font is not available, it tries the next one.

The last value should be a generic font family, such as sans-serif, serif, or monospace.

If a font name has spaces, wrap it in quotes:

Use one or two font families on a page. Too many fonts can make a design feel messy.

Font size

The font-size property controls how large text appears.

Two beginner-friendly units are px and rem.

• px gives a fixed size.
• rem scales from the root font size of the page.

In many browsers, 1rem is usually 16px, so 2rem is usually 32px.

Prefer rem for text sizes. If a visitor increases their browser's default font size for readability, rem text scales with it, but px text stays fixed.

Use readable text sizes. Very small body text is hard to read, especially on phones.

Line height

The line-height property controls the vertical space between lines of text.

Think of it as breathing room inside a paragraph.

A unitless value like 1.6 is common. It means the line height is 1.6 times the current font size.

Low line height can make paragraphs feel crowded. A value around 1.5 or 1.6 is often easier to read for body text.

Text alignment

The text-align property controls how text lines up horizontally.

Common values include:

• left: aligns text to the left
• center: centers text
• right: aligns text to the right
• justify: stretches lines so both edges line up

Center alignment works well for short headings.

For long paragraphs, left alignment is usually easier to read. Centered paragraphs make it harder for the eye to find the next line.

Simple text formatting

CSS also has properties for simple text formatting.

Useful formatting properties:

• font-weight: controls boldness, such as normal or bold
• font-style: controls slant, such as normal or italic
• text-transform: changes casing, such as uppercase, lowercase, or capitalize
• text-decoration: adds or removes lines, such as underline or none

Be careful with underlines. On the web, underlined text usually means a link.

Runnable example: article card typography

This example combines font family, font size, line height, alignment, and text formatting.

Try changing the CSS values and run the example again.

<article class="article-card">
  <p class="category">CSS basics</p>
  <h2>Learning web typography</h2>
  <p class="summary">
    Clear text helps visitors read your page without effort. Good font size and line height can make
    a simple article feel more polished.
  </p>
  <a href="#">Read more</a>
</article>

<style>
  .article-card {
    max-width: 420px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .category {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
  }

  .article-card h2 {
    font-size: 1.8rem;
    line-height: 1.2;
  }

  .summary {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
  }
</style>

The card uses one font stack, a larger heading, readable paragraph spacing, and uppercase category text.

Common beginner mistakes

• Using too many fonts: One or two font families is usually enough.
• Forgetting fallback fonts: End a font stack with a generic family like sans-serif.
• Making text too small: Body text should be comfortable to read.
• Using tight line height: Paragraphs need enough vertical space.
• Centering long paragraphs: Center alignment is better for short text.
• Underlining normal text: Underlines can make regular text look clickable.

Mini task

Look at this CSS:

Which property should you add if you want more vertical breathing room between lines of text?

Check the quiz answers below when you are ready.

Short quiz with answers

1. Which CSS property chooses the font?
2. If the root font size is 16px, what size is 2rem?
3. Why should "Times New Roman" be wrapped in quotes?

Answers:

1. font-family.
2. 32px.
3. Because the font name contains spaces.

Mini task answer: add line-height.

Small challenge

Style the profile text below.

Your goals:

• Set a sans-serif font stack on .profile.
• Make the name uppercase.
• Make the name normal weight.
• Give the paragraph a comfortable line height.

<div class="profile">
  <h3 class="name">Jane Doe</h3>
  <p class="bio">I am learning how typography makes text easier to read on the web.</p>
</div>

<style>
  .profile {
  }

  .name {
  }

  .bio {
  }
</style>

One possible solution:

Summary

• font-family chooses the font and should include fallback fonts.
• font-size controls how large text appears.
• line-height controls vertical space between lines.
• text-align controls horizontal text alignment.
• font-weight changes boldness.
• font-style can make text italic.
• text-transform changes text casing.
• text-decoration adds or removes lines, such as underlines.