5.1 The line-height Property
Text parameters like line-height, letter-spacing, and word-spacing are super important in styling text on web pages. They let you control line spacing, letter spacing, and word spacing, respectively. Let's dive into each of these properties.
The line-height property defines the height of a line of text. It sets the distance between the baselines of neighboring text lines, affecting the text's density and readability.
Values:
- Numeric value: relative value without units (e.g., 1.5) that multiplies with the current font size
- Percentage value: relative value in percentage based on the current font size (e.g., 150%)
- Absolute value: value in fixed units (e.g., pixels) (e.g., 24px)
- Keyword
normal: the default value, typically equal to 1.2
Example usage:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">This is text with normal line height. This is text with normal line height.</p>
<p class="one-point-five">This is text with a line height of 1.5. This is text with a line height of 1.5.</p>
<p class="double">This is text with double line height. This is text with double line height.</p>
</body>
5.2 The letter-spacing Property
The letter-spacing property sets the space between characters in the text, essentially the additional space between symbols. It can be used to improve readability or create visual effects.
Values:
- Accepts the following values:
px,em,rem,pt,normal - Absolute value: value in fixed units (e.g., pixels — 2px)
- Negative value: reduces the space between symbols (e.g., -1px)
- Keyword
normal: the default value, equal to 0 (no extra space)
Example usage:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">This is text with normal letter spacing.</p>
<p class="wide">This is text with increased letter spacing.</p>
<p class="narrow">This is text with reduced letter spacing.</p>
</body>
5.3 The word-spacing Property
The word-spacing property sets the space between words in the text. It adds or removes space between words, which can be used to improve readability or create visual effects.
Values:
- Absolute value: value in fixed units (e.g., pixels) (e.g., 4px)
- Negative value: reduces the space between words (e.g., -2px)
- Keyword
normal: the default value, equal to the standard word spacing (usually 0)
Example usage:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">This is text with normal word spacing.</p>
<p class="wide">This is text with increased word spacing.</p>
<p class="narrow">This is text with reduced word spacing.</p>
</body>
GO TO FULL VERSION