Aprenda Text 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

styles.css

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

styles.css

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

styles.css

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

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?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 1. Capítulo 12

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Deslize para mostrar o 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

styles.css

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

styles.css

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

styles.css

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

styles.css

Output

Note

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?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 1. Capítulo 12