Leer Tekstopmaaktechnieken voor Leesbaarheid

line-height

line-height regelt de verticale afstand tussen tekstregels. Browsers stellen standaard een waarde in op basis van het lettertype, maar deze kan worden aangepast met verschillende notaties:

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

multiplier een eenheidsloze waarde zoals 1.5 vermenigvuldigt de font-size;
value in px specifieke hoogte, bijvoorbeeld 24px;
value in em relatieve waarde, vergelijkbaar met multiplier (1.4em = font-size × 1.4);
percent werkt als multiplier (120% = font-size × 1.2).

index.html

styles.css

Uitvoer

letter-spacing

letter-spacing bepaalt de horizontale afstand tussen tekens.

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

normal: standaardafstand;
value in px: vaste extra afstand;
value in em: afstand relatief aan font-size.

index.html

styles.css

Uitvoer

word-spacing

De word-spacing past de afstand tussen woorden aan.

word-spacing: value | inherit | normal

value: aangepaste afstand;
inherit: gebruikt de afstand van het bovenliggende element;
normal: standaardafstand.

index.html

styles.css

Uitvoer

text-shadow

text-shadow voegt schaduwen toe aan tekst. Het accepteert vier waarden:

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

X set: horizontale verschuiving;
Y set: verticale verschuiving;
blur radius: zachtheid van de schaduw (0 = scherp);
color: elke geldige kleur, standaard de huidige tekstkleur.

index.html

styles.css

Uitvoer

Opmerking

Bij tekstopmaak zijn er geen strikte regels die bepalen welke waarden in specifieke situaties moeten worden gebruikt. De keuze van tekstopmaak-eigenschappen en waarden hangt af van de unieke vereisten van elk project en de ontwerpvisie.

1. Welke CSS-eigenschap wordt gebruikt om een visueel effect toe te voegen dat een schaduw aan tekst geeft?

2. Welke CSS-eigenschap past de afstand tussen woorden in een tekst aan?

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

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?

Veeg om het menu te tonen

line-height

line-height regelt de verticale afstand tussen tekstregels. Browsers stellen standaard een waarde in op basis van het lettertype, maar deze kan worden aangepast met verschillende notaties:

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

multiplier een eenheidsloze waarde zoals 1.5 vermenigvuldigt de font-size;
value in px specifieke hoogte, bijvoorbeeld 24px;
value in em relatieve waarde, vergelijkbaar met multiplier (1.4em = font-size × 1.4);
percent werkt als multiplier (120% = font-size × 1.2).

index.html

styles.css

Uitvoer

letter-spacing

letter-spacing bepaalt de horizontale afstand tussen tekens.

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

normal: standaardafstand;
value in px: vaste extra afstand;
value in em: afstand relatief aan font-size.

index.html

styles.css

Uitvoer

word-spacing

De word-spacing past de afstand tussen woorden aan.

word-spacing: value | inherit | normal

value: aangepaste afstand;
inherit: gebruikt de afstand van het bovenliggende element;
normal: standaardafstand.

index.html

styles.css

Uitvoer

text-shadow

text-shadow voegt schaduwen toe aan tekst. Het accepteert vier waarden:

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

X set: horizontale verschuiving;
Y set: verticale verschuiving;
blur radius: zachtheid van de schaduw (0 = scherp);
color: elke geldige kleur, standaard de huidige tekstkleur.

index.html

styles.css

Uitvoer

Opmerking

1. Welke CSS-eigenschap wordt gebruikt om een visueel effect toe te voegen dat een schaduw aan tekst geeft?

2. Welke CSS-eigenschap past de afstand tussen woorden in een tekst aan?

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2