Stryg for at vise menuen

God typografi forbedrer læsbarhed og visuel struktur. I dette kapitel fokuserer vi på egenskaber, der styrer afstand og subtile visuelle effekter for tekst: line-height, letter-spacing, word-spacing og text-shadow.

Disse egenskaber hjælper med at gøre tekst lettere at læse og visuelt afbalanceret.

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 enhedsløst tal 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: bruger forælderens afstand;
normal: standardafstand.

index.html

styles.css

Output

text-shadow

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

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

X set: horisontal forskydning;
Y set: vertikal forskydning;
blur radius: blødhed af skyggen (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 de unikke krav for hvert projekt samt designvisionen.

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 1. Kapitel 7

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

Tekstformatering for Bedre Læsbarhed

Disse egenskaber hjælper med at gøre tekst lettere at læse og visuelt afbalanceret.

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 enhedsløst tal 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: bruger forælderens afstand;
normal: standardafstand.

index.html

styles.css

Output

text-shadow

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

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

X set: horisontal forskydning;
Y set: vertikal forskydning;
blur radius: blødhed af skyggen (0 = skarp);
color: enhver gyldig farve, standard er nuværende tekstfarve.

index.html

styles.css

Output

Bemærk

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 7