Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Text Formatting Techniques for Readability | Styling Text in CSS
CSS Fundamentals

bookText Formatting Techniques for Readability

line-height

line-height controls the vertical spacing between lines of text. Browsers set a default value based on the font, but you can customize it using several formats:

line-height: multiplier | value in px | value in em | percent
  • multiplier unitless value like 1.5 multiplies the font-size;
  • value in px specific height, e.g., 24px;
  • value in em relative value, similar to multiplier (1.4em = font-size Γ— 1.4);
  • percent works like multiplier (120% = font-size Γ— 1.2).
index.html

index.html

styles.css

styles.css

copy

Output

letter-spacing

letter-spacing sets horizontal spacing between characters.

letter-spacing: normal | value in px | value in em
  • normal: default spacing;
  • value in px: fixed extra spacing;
  • value in em: spacing relative to font-size.
index.html

index.html

styles.css

styles.css

copy

Output

word-spacing

The word-spacing adjusts the distance between words.

word-spacing: value | inherit | normal
  • value: custom spacing;
  • inherit: uses the parent element’s spacing;
  • normal: default spacing.
index.html

index.html

styles.css

styles.css

copy

Output

text-shadow

text-shadow adds shadows to text. It accepts four values:

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set: horizontal shift;
  • Y set: vertical shift;
  • blur radius: softness of the shadow (0 = sharp);
  • color: any valid color, defaults to current text color.
index.html

index.html

styles.css

styles.css

copy

Output

Note
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?

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

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 design?

Can you show more creative uses of text-shadow?

bookText Formatting Techniques for Readability

Swipe to show menu

line-height

line-height controls the vertical spacing between lines of text. Browsers set a default value based on the font, but you can customize it using several formats:

line-height: multiplier | value in px | value in em | percent
  • multiplier unitless value like 1.5 multiplies the font-size;
  • value in px specific height, e.g., 24px;
  • value in em relative value, similar to multiplier (1.4em = font-size Γ— 1.4);
  • percent works like multiplier (120% = font-size Γ— 1.2).
index.html

index.html

styles.css

styles.css

copy

Output

letter-spacing

letter-spacing sets horizontal spacing between characters.

letter-spacing: normal | value in px | value in em
  • normal: default spacing;
  • value in px: fixed extra spacing;
  • value in em: spacing relative to font-size.
index.html

index.html

styles.css

styles.css

copy

Output

word-spacing

The word-spacing adjusts the distance between words.

word-spacing: value | inherit | normal
  • value: custom spacing;
  • inherit: uses the parent element’s spacing;
  • normal: default spacing.
index.html

index.html

styles.css

styles.css

copy

Output

text-shadow

text-shadow adds shadows to text. It accepts four values:

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set: horizontal shift;
  • Y set: vertical shift;
  • blur radius: softness of the shadow (0 = sharp);
  • color: any valid color, defaults to current text color.
index.html

index.html

styles.css

styles.css

copy

Output

Note
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?

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 2
some-alt