Lære Teknikker til Tekstformatering for Læsbarhed

line-height

line-height styrer den lodrette afstand mellem tekstlinjer. Browsere angiver en standardværdi baseret på skrifttypen, men du kan tilpasse den ved hjælp af flere formater:

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

multiplier enheds- og talværdi som 1.5 ganger font-size;
value in px specifik højde, f.eks. 24px;
value in em relativ værdi, svarende til multiplier (1.4em = font-size × 1.4);
percent fungerer som multiplier (120% = font-size × 1.2).

index.html

styles.css

Output

letter-spacing

letter-spacing angiver den horisontale afstand mellem tegn.

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

normal: standardafstand;
value in px: fast ekstra afstand;
value in em: afstand relativ til font-size.

index.html

styles.css

Output

word-spacing

word-spacing justerer afstanden mellem ord.

word-spacing: value | inherit | normal

value: brugerdefineret afstand;
inherit: anvender forælderens afstand;
normal: standardafstand.

index.html

styles.css

Output

text-shadow

text-shadow tilføjer skygger til tekst. Den accepterer fire værdier:

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

X set: vandret forskydning;
Y set: lodret forskydning;
blur radius: skyggeblødhed (0 = skarp);
color: enhver gyldig farve, standard er nuværende tekstfarve.

index.html

styles.css

Output

Bemærk

Ved tekstformatering findes der ingen faste regler for, hvilke værdier der skal anvendes i bestemte situationer. Valget af tekstformateringsegenskaber og værdier afhænger af det enkelte projekts unikke krav og det ønskede designudtryk.

1. Hvilken CSS-egenskab bruges til at skabe en visuel effekt, der tilføjer en skygge til tekst?

2. Hvilken CSS-egenskab justerer afstanden mellem ord i en tekst?

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 2

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores 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?

Stryg for at vise menuen

line-height

line-height styrer den lodrette afstand mellem tekstlinjer. Browsere angiver en standardværdi baseret på skrifttypen, men du kan tilpasse den ved hjælp af flere formater:

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

multiplier enheds- og talværdi som 1.5 ganger font-size;
value in px specifik højde, f.eks. 24px;
value in em relativ værdi, svarende til multiplier (1.4em = font-size × 1.4);
percent fungerer som multiplier (120% = font-size × 1.2).

index.html

styles.css

Output

letter-spacing

letter-spacing angiver den horisontale afstand mellem tegn.

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

normal: standardafstand;
value in px: fast ekstra afstand;
value in em: afstand relativ til font-size.

index.html

styles.css

Output

word-spacing

word-spacing justerer afstanden mellem ord.

word-spacing: value | inherit | normal

value: brugerdefineret afstand;
inherit: anvender forælderens afstand;
normal: standardafstand.

index.html

styles.css

Output

text-shadow

text-shadow tilføjer skygger til tekst. Den accepterer fire værdier:

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

X set: vandret forskydning;
Y set: lodret forskydning;
blur radius: skyggeblødhed (0 = skarp);
color: enhver gyldig farve, standard er nuværende tekstfarve.

index.html

styles.css

Output

Bemærk

1. Hvilken CSS-egenskab bruges til at skabe en visuel effekt, der tilføjer en skygge til tekst?

2. Hvilken CSS-egenskab justerer afstanden mellem ord i en tekst?

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 2