You’ve learned how text can be defined by font family, weight, style, and transformations. Now you’ll learn about some ways text can be displayed or laid out within the element’s container.
Letter Spacing
The letter-spacing
property is used to set the horizontal spacing between the individual characters in an element. It’s not common to set the spacing between letters, but it can sometimes help the readability of certain fonts or styles. The letter-spacing
property takes length values in units, such as 2px
or 0.5em
.
p { letter-spacing: 2px; }
In the example above, each character in the paragraph element will be separated by 2 pixels.
Word Spacing
You can set the space between words with the word-spacing
property. It’s also not common to increase the spacing between words, but it may help enhance the readability of bolded or enlarged text. The word-spacing
property also takes length values in units, such as 3px
or 0.2em
.
h1 { word-spacing: 0.3em; }
In the example above, the word spacing is set to 0.3em
. For word spacing, using em
values are recommended because the spacing can be set based on the size of the font.
Line Height
We can use the line-height
property to set how tall we want each line containing our text to be. Line height values can be a unitless number, such as 1.2
, or a length value, such as 12px
, 5%
or 2em
.
p { line-height: 1.4; }
In the example above, the height between lines is set to 1.4
. Generally, the unitless value is preferred since it is responsive based on the current font size. In other words, if the line-height
is specified by a unitless number, changing the font size will automatically readjust the line height.
Text Alignment
The text-align
property, which you may already be familiar with from the CSS Visual Rules lesson, aligns text to its parent element.
h1 { text-align: right; }
In the example above, the <h1>
element is aligned to the right side, instead of the default left.
Instructions
Let’s put these new properties to work! In style.css, set the letter spacing of the <h1>
element to 0.3em
.
In style.css, set the word spacing in the .banner p
ruleset to 0.25em
.
In style.css, set the line height in the .banner p
ruleset to 1.4
.
In style.css, set the text alignment of the <p>
elements to justify
.