Chapter 11. CSS: Styling Text and Images

Line-height and letter-spacing

Tag:

The line-height property is used for setting line height and the letter-spacing property is used for setting letter space. Both are important aspects that can increase the readability of your website.

line-height

The easiest way to specify line-height is using a single number. 1 means the same height as the current letter height. 1.5 means 1.5x the current letter height.

You can also use other length units like px, rem, em, or %. The default line-height value is 1. There are several preferences about line-height, but 1.5 is one of the most popular settings.

Practice 1

Objective:
Test different line-heights

1. Update the body section of the HTML file

Add the code below at the end of the <body> section in the chapter11.html file. In this code, we are adding the outline class to the <p> elements so that you can see line heights clearly.

chapter11.html

<h2>Line Height</h2>
<p class="outline">Line Height: Original</p>
<p class="outline" style="line-height: 1; ">
  <b>Line Height: 1</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="line-height: 1.5; ">
  <b>Line Height: 1.5</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="line-height: 2; ">
  <b>Line Height: 2</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="line-height: 20px; ">
  <b>Line Height: 20px</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="line-height: 30px; ">
  <b>Line Height: 30px</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<hr>

2. Update the CSS file

Open the practice.css file and add new code for adding styles to the outline class.

practice.css

.outline{
  border:1px dotted #26BCCE;
}

3. Check the result with a browser

Open chapter11.html with a browser.
You can see that the different line heights give you different impressions and readability.

You can also check the sample result here (Demo Site ).

demo code

letter-spacing

To set letter spacing, you can use a length unit like px, rem, em, or %. If you want to make the website responsive (make it adjust the size depending on device size), it is better to use relative units like rem, em, or %.

There is no single perfect answer for optimal letter spacing. It highly depends on where and how you use the letters – e.g., title, article body, or decorated promotional content on your websites. The optimal letter spacing can also differ by font family or language. If you don't have any specific reason, you can keep the default setting for letter-spacing.

Practice 2

Objective:
Test different letter-spacings

1. Update the body section of the HTML file

Add the code below at the end of the <body> section in the chapter11.html file.

chapter11.html

<h2>Letter Spacing</h2>
<p class="outline">Line Spacing: Original</p>
<p class="outline" style="letter-spacing: 0rem; ">
  <b>Line Spacing: 0rem</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="letter-spacing: 0.05rem; ">
  <b>Line Spacing: 0.05rem</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="letter-spacing: 0.1rem; ">
  <b>Line Spacing: 0.1rem</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="letter-spacing: 0.15rem; ">
  <b>Line Spacing: 0.15rem</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<hr>

2. Check the result with a browser

Open chapter11.html with a browser
You can see that the different letter spacing give you different impression and readability.

You can also check the sample result here (Demo Site ).

demo code

line-height

The easiest way to specify line-height is using a single number. 1 means the same height as the current letter height. 1.5 means 1.5x the current letter height.

Practice 1

Objective:
Test different line-heights

1. Update the body section of the HTML file

Add the code below at the end of the <body> section in the chapter11.html file. In this code, we are adding the outline class to the <p> elements so that you can see line heights clearly.

chapter11.html

<h2>Line Height</h2>
<p class="outline">Line Height: Original</p>
<p class="outline" style="line-height: 1; ">
  <b>Line Height: 1</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="line-height: 1.5; ">
  <b>Line Height: 1.5</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="line-height: 2; ">
  <b>Line Height: 2</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="line-height: 20px; ">
  <b>Line Height: 20px</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="line-height: 30px; ">
  <b>Line Height: 30px</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<hr>

2. Update the CSS file

Open the practice.css file and add new code for adding styles to the outline class.

practice.css

.outline{
  border:1px dotted #26BCCE;
}

3. Check the result with a browser

Open chapter11.html with a browser.
You can see that the different line heights give you different impressions and readability.

You can also check the sample result here (Demo Site ).

demo code

letter-spacing

Practice 2

Objective:
Test different letter-spacings

1. Update the body section of the HTML file

Add the code below at the end of the <body> section in the chapter11.html file.

chapter11.html

<h2>Letter Spacing</h2>
<p class="outline">Line Spacing: Original</p>
<p class="outline" style="letter-spacing: 0rem; ">
  <b>Line Spacing: 0rem</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="letter-spacing: 0.05rem; ">
  <b>Line Spacing: 0.05rem</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="letter-spacing: 0.1rem; ">
  <b>Line Spacing: 0.1rem</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<p class="outline" style="letter-spacing: 0.15rem; ">
  <b>Line Spacing: 0.15rem</b> – "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</p>
<hr>