Lära 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?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 12

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Svep för att visa menyn

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?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 12