Web · Text and Font Styles
Line height and spacing
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Understanding Line Height
Line height (or line spacing) controls the vertical space between lines of text. It makes text more readable when set properly.
In CSS, we use the
line-height
property to control this spacing:
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
line-height: normal; /* Browser default, usually around 1.2 */
}
.tight {
line-height: 1; /* No extra space between lines */
}
.comfortable {
line-height: 1.5; /* 50% extra space */
}
.spacious {
line-height: 2; /* Double space */
}
</style>
</head>
<body>
<h3>Different Line Height Values</h3>
<p class="normal">Normal line height.<br>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class="tight">Tight line height (1).<br>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class="comfortable">Comfortable line height (1.5).<br>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class="spacious">Spacious line height (2).<br>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</body>
</html>
Line height can be specified in several ways:
- Unitless number (recommended):
line-height: 1.5;
- Pixel:
line-height: 24px;
- Percentage:
line-height: 150%;
- Keyword:
line-height: normal;
Best Practice
Using unitless values (like 1.5) is recommended because they're inherited proportionally. For good readability, most text should have a line-height between 1.4 and 1.8.
Exercise 2 — Line Height Best Practice
Which of the following is the recommended way to set line height for body text that will have varying font sizes?
Options
• ```line-height: 1.5;```
• ```line-height: 24px;```
• ```line-height: 150%;```
• ```line-height: 1.5em;```
Hint : Consider which value type scales best with different font sizes and passes down properly through inheritance.
Exercise 3 — Letter and Word Spacing
In addition to line height, CSS gives us control over the spacing between letters and words with two properties:
1.
letter-spacing
- Controls the space between characters
2.
word-spacing
- Controls the space between words
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
letter-spacing: normal;
word-spacing: normal;
}
.spaced-letters {
letter-spacing: 2px;
}
.tight-letters {
letter-spacing: -1px;
}
.spaced-words {
word-spacing: 10px;
}
.title-style {
letter-spacing: 4px;
text-transform: uppercase;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Letter and Word Spacing Examples</h3>
<p class="normal">Normal spacing: The quick brown fox jumps over the lazy dog.</p>
<p class="spaced-letters">Letter spacing (2px): The quick brown fox jumps over the lazy dog.</p>
<p class="tight-letters">Tight letter spacing (-1px): The quick brown fox jumps over the lazy dog.</p>
<p class="spaced-words">Word spacing (10px): The quick brown fox jumps over the lazy dog.</p>
<p class="title-style">STYLIZED TITLE EFFECT</p>
</body>
</html>
These properties accept the following values:
- Length values (px, em, rem)
- Percentage values (rarely used for spacing)
-
normal
keyword (the default spacing)
Negative Values
Both letter-spacing and word-spacing can take negative values to bring characters or words closer together, but be careful not to reduce readability.
Exercise 4 — Complete the Typography Styling
Complete the CSS to create a heading with appropriate spacing properties for a title.
h1.title {
font-family: Arial, sans-serif;
____: 1.2; /* Space between lines */
____: 2px; /* Space between letters */
____: 5px; /* Space between words */
text-transform: uppercase;
}
Options: line-height letter-spacing word-spacing text-spacing character-spacing line-spacing
Hint : Think about which CSS properties control the spacing between lines, letters, and words.
Exercise 5 — The Line Break Element <br>
The
<br>
element creates a line break in text. It's a self-closing tag, meaning it doesn't have a separate closing tag.
<!DOCTYPE html>
<html>
<body>
<h3>Using Line Breaks</h3>
<p>This is the first line.<br>This is the second line.<br>This is the third line.</p>
<h3>Address Example</h3>
<p>
Codémon Training Center<br>
123 Trainer Street<br>
Codéville, CO 12345<br>
United States
</p>
</body>
</html>
The
<br>
element is useful for content where line breaks are meaningful, such as:
- Addresses
- Poetry or song lyrics
- Short lines of dialogue
Avoid Misuse
Don't use <br> for creating space between paragraphs or for layout purposes. Instead, use CSS margins, padding, or other layout properties. Multiple <br> elements in a row is usually a sign of misuse.
Exercise 6 — Proper Use of <br> Element
Which of the following is the most appropriate use of the <br> element?
Options
• Creating line breaks in a postal address
• Adding space between paragraphs
• Creating space below a heading
• Positioning elements on a page
Hint : Think about when line breaks have semantic meaning versus when spacing should be handled with CSS.
Exercise 7 — The Horizontal Rule Element <hr>
The
<hr>
element creates a horizontal rule (line) in your document. It represents a thematic break or transition between topics.
<!DOCTYPE html>
<html>
<head>
<style>
.fancy-hr {
height: 2px;
background-color: #3498db;
border: none;
margin: 20px 0;
}
.gradient-hr {
height: 3px;
border: none;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
margin: 20px 0;
}
.dashed-hr {
border: none;
border-top: 2px dashed #888;
margin: 20px 0;
}
</style>
</head>
<body>
<h3>Default Horizontal Rule</h3>
<p>This is some text before the horizontal rule.</p>
<hr>
<p>This is some text after the horizontal rule.</p>
<h3>Styled Horizontal Rules</h3>
<hr class="fancy-hr">
<hr class="gradient-hr">
<hr class="dashed-hr">
</body>
</html>
Like
<br>
, the
<hr>
element is also self-closing. You can style it using CSS to change its appearance:
hr {
height: 2px; /* Thickness of the line */
background-color: #333; /* Color of the line */
border: none; /* Remove the default border */
margin: 20px 0; /* Space above and below */
}
Semantic Meaning
The <hr> element has semantic meaning - it indicates a transition in the content. Use it when there's a change in topic or theme, not just for decorative lines (which should be created with CSS instead).
Exercise 8 — Style a Horizontal Rule
Complete the CSS to create a custom-styled horizontal rule with a solid color.
hr.custom {
____ 3px; /* Thickness of the line */
____ none; /* Remove default border */
____ red; /* Set a solid color */
}
Options: height: border: background-color: color: width: outline:
Hint : To style a horizontal rule, set its height, remove the default border, and use a solid background color.
Exercise 9 — Spacing Properties and Elements
Match each spacing property or element with its correct purpose:
Items to match
• line-height
• letter-spacing
• <br>
• <hr>
Definitions
• Controls vertical spacing between lines of text
• Adjusts space between characters
• Creates a line break within text
• Creates a horizontal rule indicating a thematic break
Exercise 10 — Best Use of <hr> Element
Which scenario represents the most semantically appropriate use of the <hr> element?
Options
• Separating a series of Codémon descriptions that cover different elemental types
• Creating a decorative line at the top of every page
• Adding space between two paragraphs about the same topic
• Creating an underline effect beneath a heading
Hint : Consider the semantic meaning of <hr> as a thematic break rather than just a visual divider.