Line Height and Letter Spacing

Line Height and Letter Spacing (Beginner-Friendly Guide)

When you read text on a website, have you ever felt it was too cramped or too spread out? That feeling often comes from two simple settings: line height and letter spacing.

In this article, you’ll learn:

What line height and letter spacing are
How to change them using very simple HTML and CSS
Practical values you can start using today

No coding experience is required. We’ll go step by step, with short examples you can copy, paste, and tweak.

What Are Line Height and Letter Spacing?

Line height controls the space between lines of text.

Too small: lines are squished together and hard to read.
Too big: lines feel far apart and disconnected.

Letter spacing controls the space between letters in a word.

Too small: letters feel cramped.
Too big: words feel stretched and awkward.

Both are set using CSS (Cascading Style Sheets). CSS is just a way to tell the browser how things should look.

Basic Setup: Your First HTML + CSS File

Let’s start with a simple web page.

Step 1: Create an HTML file

Create a file named index.html and paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Line Height and Letter Spacing Demo</title>
  <style>
    /* We'll add our line-height and letter-spacing here later */
    body {
      font-family: Arial, sans-serif; /* Simple, clean font */
      padding: 20px;                 /* Space around the content */
    }
  </style>
</head>
<body>
  <h1>Line Height and Letter Spacing</h1>
  <p>
    This is a simple paragraph we will use to practice changing line height
    and letter spacing with CSS.
  </p>
</body>
</html>

Open this file in your browser (Chrome, Firefox, etc.). You’ll see a basic page with a heading and a paragraph. We’ll now adjust how that paragraph looks.

Step 2: Changing Line Height

The CSS property for line height is line-height.

You can write it in two main ways:

As a number (like 1.5) – this is a multiplier of the font size.
As a length (like 24px) – this is an exact value in pixels.

For beginners, using a number is usually easier and more flexible.

Example 1: Comparing Different Line Heights

Update the <style> section in your HTML to look like this:

<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
  }

  /* Very tight line height */
  .tight-lines {
    line-height: 1; /* Same as the font size */
  }

  /* Comfortable line height */
  .comfortable-lines {
    line-height: 1.6; /* 1.6 times the font size */
  }

  /* Very loose line height */
  .loose-lines {
    line-height: 2; /* Double the font size */
  }
</style>

Now change the <body> content to use three paragraphs:

<body>
  <h1>Line Height and Letter Spacing</h1>

  <h2>Tight lines (line-height: 1)</h2>
  <p class="tight-lines">
    This text uses a tight line height. The lines are very close together,
    which can make long paragraphs harder to read.
  </p>

  <h2>Comfortable lines (line-height: 1.6)</h2>
  <p class="comfortable-lines">
    This text uses a comfortable line height. There is a bit of space
    between each line, which helps your eyes move down the page more easily.
  </p>

  <h2>Loose lines (line-height: 2)</h2>
  <p class="loose-lines">
    This text uses a loose line height. The lines are far apart, which can
    look airy, but too much space can also feel disconnected.
  </p>
</body>

What you’ll see:

The first paragraph is cramped.
The second feels balanced and easy to read.
The third feels very spaced out.

For most websites, a line-height between 1.4 and 1.8 works well for normal text.

Try it yourself: Change line-height: 1.6; to 1.4, 1.8, and 2.2 in the .comfortable-lines class. Refresh the page each time and notice which one feels best to your eyes.

Step 3: Changing Letter Spacing

The CSS property for letter spacing is letter-spacing.

You usually set it using a length, such as:

0px (default, no extra space)
1px (a little extra space)
-0.5px (slightly tighter letters)

Example 2: Exploring Letter Spacing

Update your <style> so it includes:

  /* Normal letter spacing */
  .normal-spacing {
    letter-spacing: 0; /* Default spacing */
  }

  /* Wider letter spacing */
  .wide-spacing {
    letter-spacing: 2px; /* Extra space between letters */
  }

  /* Slightly tighter letter spacing */
  .tight-spacing {
    letter-spacing: -0.5px; /* Letters are a bit closer */
  }

Then add these lines inside <body> (below your previous examples or instead of them, your choice):

  <h2>Normal letter spacing</h2>
  <p class="normal-spacing">
    This sentence has normal letter spacing. It looks the way the browser
    normally displays text.
  </p>

  <h2>Wide letter spacing (2px)</h2>
  <p class="wide-spacing">
    This sentence has wider letter spacing. Each letter has a bit more room,
    which can look nice in titles or logos.
  </p>

  <h2>Tight letter spacing (-0.5px)</h2>
  <p class="tight-spacing">
    This sentence has slightly tighter letter spacing. The letters are closer
    together, which can be useful for large headings.
  </p>

What you’ll see:

The normal text looks unchanged.
The wide-spacing text looks more open and airy.
The tight-spacing text feels more compact.

Important: For body text (long paragraphs), keep letter spacing close to 0. Extreme values can make text hard to read.

Try it yourself: Change 2px to 1px, 3px, and 4px in .wide-spacing to see how it affects legibility. Notice when it starts to look awkward.

Step 4: Combining Line Height and Letter Spacing

Often, you’ll use line height and letter spacing together.

A common pattern is:

More generous line height for paragraphs
Slightly increased letter spacing for headings

Example 3: Styling Headings and Paragraphs

Let’s create a simple page layout.

Update your <style> again:

<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
    line-height: 1.6;      /* Good default for most text */
  }

  h1 {
    font-size: 32px;
    letter-spacing: 1px;   /* Slightly more space between letters */
    line-height: 1.2;      /* Tighter for large titles */
  }

  h2 {
    font-size: 24px;
    letter-spacing: 0.5px; /* A bit of spacing for subheadings */
    line-height: 1.3;
  }

  p {
    font-size: 16px;
    line-height: 1.7;      /* Comfortable for reading */
    letter-spacing: 0;      /* Normal letter spacing */
  }
</style>

And use this inside <body>:

<body>
  <h1>Welcome to My Blog</h1>
  <h2>Designing with Readability in Mind</h2>
  <p>
    Good typography is not just about choosing a nice font. It is also about
    making the text comfortable to read. Line height and letter spacing are
    simple tools that can have a big impact.
  </p>
  <p>
    By adjusting these values, you can guide your reader's eye and make your
    content feel more polished and professional, even with very basic code.
  </p>
</body>

What you’ll see:

The main title (h1) looks bold and clear, with a bit more space between letters.
The subtitle (h2) is smaller but still stands out.
Paragraphs are easy to read, with comfortable spacing between lines.

Try it yourself:

Increase h1 letter-spacing to 3px and see if it still looks good.
Reduce p line-height to 1.3 and notice how it affects readability.

Step 5: Simple Rules of Thumb

When you’re just starting, it helps to have some default values you can rely on.

Here are some beginner-friendly starting points:

Paragraph text (p)
- font-size: 16px;
- line-height: 1.5 to 1.8
- letter-spacing: 0;
Main headings (h1)
- Larger font size (e.g., 28px–36px)
- line-height: 1.1 to 1.3
- letter-spacing: 0.5px to 1.5px (small increase)
Subheadings (h2, h3)
- Medium font size (e.g., 20px–26px)
- line-height: 1.2 to 1.4
- letter-spacing: 0 to 1px

These are starting points, not strict rules. Adjust based on how things feel when you look at them.

Extra Practice: Your Own Style Experiment

Here’s a mini challenge you can try.

Create three different classes for paragraphs:
- .reading-mode – very comfortable for long reading
- .compact-mode – tighter text to fit more on the screen
- .headline-mode – looks like a short, punchy quote
Give each one its own line-height and letter-spacing.

Example:

.reading-mode {
  line-height: 1.8;
  letter-spacing: 0.2px;
}

.compact-mode {
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.headline-mode {
  line-height: 1.1;
  letter-spacing: 1px;
  font-weight: bold;
}

Add three <p> elements using these classes and see how each one feels. This kind of small experiment is a powerful way to learn.

Quick Recap & What’s Next

You’ve just learned how to control how text feels on a page using two simple CSS properties:

line-height controls the space between lines. For body text, values between 1.4 and 1.8 are usually comfortable.
letter-spacing controls the space between letters. Use small adjustments, especially for headings, and keep body text close to 0.

You also:

Built a simple HTML page
Tried different values and saw how they change readability
Combined line height and letter spacing for a more professional look

From here, a great next step is to explore font size, font family, and font weight. Combined with what you’ve learned about line height and letter spacing, you’ll be able to design text that’s not only nice to look at, but also easy to read.

Keep experimenting, keep tweaking, and celebrate each small improvement—you’re already thinking like a web designer.

Mudzinga