Learn Text Formatting Techniques for Readability

line-height

The line-height property defines the height of a line and is often used to adjust the space between lines of text. By default, line-height depends on the text font and is determined by the browser.

line-height: multiplier | value in px | value in em | percent

multiplier is a value without units (e.g., 1.5). In this case, the line height will be the value that is 1.5 greater than the font-size value;
value in px is a specific value (e.g., 24px) to which the line height will be equal;
value in em is a value (e.g., 1.4em) that works similarly to the multiplier. The browser will check the font-size value, multiply that value by 1.4, and this result will be the line height;
percent is a value (e.g., 120%) that functions like a multiplier. The font-size value will be multiplied by 1.2, determining the line height value.

index.html

styles.css

Output

letter-spacing

The letter-spacing property sets the horizontal spacing between text characters.

letter-spacing: normal | value in px | value in em

normal is the default spacing between characters;
value in px is a specific value that adds extra space between characters;
value in em works similarly to px, but the spacing is relative to the font-size.

index.html

styles.css

Output

word-spacing

The word-spacing property defines the distance between words in the text. It increases the space between words. If there are any punctuation marks in the text, and they are written with words, then they will still be written together, as there is no space between them.

word-spacing: value | inherit | normal

value is a specific value that sets the space between words;
inherit inherits the word spacing from the parent element;
normal is the default spacing between words.

index.html

styles.css

Output

text-shadow

The text-shadow property adds a shadow to the text.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set adjusts the horizontal position of the shadow. Positive values move the shadow to the right, and negative values move it to the left;
Y set adjusts the vertical position of the shadow. Positive values move the shadow downward, and negative values move it upward;
blur radius defines how blurry the shadow appears. Higher values make the shadow softer and more diffused. The default value is 0 if not specified;
color specifies the shadow's color in any valid color format. If not specified, it defaults to the text color.

index.html

styles.css

Output

Note

In text formatting, there are no strict rules dictating which values must be used in specific situations. The choice of text formatting properties and values depends on the unique requirements of each project and the design vision.

1. Which CSS property is used to create a visual effect that adds a shadow to text?

2. Which CSS property adjusts the distance between words in a text?

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain the difference between line-height, letter-spacing, and word-spacing?

How do I choose the right values for these text properties in my project?

Can you show more examples of using text-shadow with different colors or effects?

Awesome!

Completion rate improved to 2.56

Swipe to show menu

line-height

line-height: multiplier | value in px | value in em | percent

multiplier is a value without units (e.g., 1.5). In this case, the line height will be the value that is 1.5 greater than the font-size value;
value in px is a specific value (e.g., 24px) to which the line height will be equal;
value in em is a value (e.g., 1.4em) that works similarly to the multiplier. The browser will check the font-size value, multiply that value by 1.4, and this result will be the line height;
percent is a value (e.g., 120%) that functions like a multiplier. The font-size value will be multiplied by 1.2, determining the line height value.

index.html

styles.css

Output

letter-spacing

The letter-spacing property sets the horizontal spacing between text characters.

letter-spacing: normal | value in px | value in em

normal is the default spacing between characters;
value in px is a specific value that adds extra space between characters;
value in em works similarly to px, but the spacing is relative to the font-size.

index.html

styles.css

Output

word-spacing

word-spacing: value | inherit | normal

value is a specific value that sets the space between words;
inherit inherits the word spacing from the parent element;
normal is the default spacing between words.

index.html

styles.css

Output

text-shadow

The text-shadow property adds a shadow to the text.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set adjusts the horizontal position of the shadow. Positive values move the shadow to the right, and negative values move it to the left;
Y set adjusts the vertical position of the shadow. Positive values move the shadow downward, and negative values move it upward;
blur radius defines how blurry the shadow appears. Higher values make the shadow softer and more diffused. The default value is 0 if not specified;
color specifies the shadow's color in any valid color format. If not specified, it defaults to the text color.

index.html

styles.css

Output

Note

In text formatting, there are no strict rules dictating which values must be used in specific situations. The choice of text formatting properties and values depends on the unique requirements of each project and the design vision.

1. Which CSS property is used to create a visual effect that adds a shadow to text?

2. Which CSS property adjusts the distance between words in a text?

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 2