Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Tekstopmaaktechnieken voor Leesbaarheid | Tekst Opmaken in CSS
CSS-Grondbeginselen

bookTekstopmaaktechnieken voor Leesbaarheid

line-height

De eigenschap line-height bepaalt de hoogte van een regel en wordt vaak gebruikt om de ruimte tussen tekstregels aan te passen. Standaard is line-height afhankelijk van het lettertype van de tekst en wordt deze bepaald door de browser.

line-height: multiplier | value in px | value in em | percent
  • multiplier is een waarde zonder eenheid (bijvoorbeeld 1.5). In dit geval zal de regelhoogte gelijk zijn aan de waarde die 1.5 keer groter is dan de waarde van font-size;
  • value in px is een specifieke waarde (bijvoorbeeld 24px) waaraan de regelhoogte gelijk zal zijn;
  • value in em is een waarde (bijvoorbeeld 1.4em) die vergelijkbaar werkt met de multiplier. De browser controleert de waarde van font-size, vermenigvuldigt deze met 1.4, en dit resultaat wordt de regelhoogte;
  • percent is een waarde (bijvoorbeeld 120%) die functioneert als een multiplier. De waarde van font-size wordt vermenigvuldigd met 1.2, wat de regelhoogte bepaalt.
index.html

index.html

styles.css

styles.css

copy

Uitvoer

letter-spacing

De eigenschap letter-spacing bepaalt de horizontale afstand tussen teksttekens.

letter-spacing: normal | value in px | value in em
  • normal is de standaardafstand tussen tekens;
  • value in px is een specifieke waarde die extra ruimte tussen tekens toevoegt;
  • value in em werkt vergelijkbaar met px, maar de afstand is relatief ten opzichte van de font-size.
index.html

index.html

styles.css

styles.css

copy

Uitvoer

word-spacing

De eigenschap word-spacing bepaalt de afstand tussen woorden in de tekst. Hiermee wordt de ruimte tussen woorden vergroot. Als er interpunctietekens in de tekst staan die direct aan woorden zijn geschreven, blijven deze aan de woorden vastzitten, omdat er geen extra ruimte tussen zit.

word-spacing: value | inherit | normal
  • value is een specifieke waarde die de ruimte tussen woorden instelt;
  • inherit erft de woordafstand van het bovenliggende element;
  • normal is de standaardruimte tussen woorden.
index.html

index.html

styles.css

styles.css

copy

Uitvoer

text-shadow

De eigenschap text-shadow voegt een schaduw toe aan de tekst.

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set past de horizontale positie van de schaduw aan. Positieve waarden verplaatsen de schaduw naar rechts, en negatieve waarden naar links;
  • Y set past de verticale positie van de schaduw aan. Positieve waarden verplaatsen de schaduw naar beneden, en negatieve waarden naar boven;
  • blur radius bepaalt hoe wazig de schaduw wordt weergegeven. Hogere waarden maken de schaduw zachter en meer diffuus. De standaardwaarde is 0 als deze niet is opgegeven;
  • color specificeert de kleur van de schaduw in elk geldig kleurformaat. Indien niet opgegeven, wordt standaard de tekstkleur gebruikt.
index.html

index.html

styles.css

styles.css

copy

Uitvoer

Opmerking

Bij tekstopmaak zijn er geen strikte regels die bepalen welke waarden in specifieke situaties moeten worden gebruikt. De keuze van tekstopmaakeigenschappen 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?

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

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 project?

Can you show more examples of using text-shadow with different colors or effects?

Awesome!

Completion rate improved to 2.56

bookTekstopmaaktechnieken voor Leesbaarheid

Veeg om het menu te tonen

line-height

De eigenschap line-height bepaalt de hoogte van een regel en wordt vaak gebruikt om de ruimte tussen tekstregels aan te passen. Standaard is line-height afhankelijk van het lettertype van de tekst en wordt deze bepaald door de browser.

line-height: multiplier | value in px | value in em | percent
  • multiplier is een waarde zonder eenheid (bijvoorbeeld 1.5). In dit geval zal de regelhoogte gelijk zijn aan de waarde die 1.5 keer groter is dan de waarde van font-size;
  • value in px is een specifieke waarde (bijvoorbeeld 24px) waaraan de regelhoogte gelijk zal zijn;
  • value in em is een waarde (bijvoorbeeld 1.4em) die vergelijkbaar werkt met de multiplier. De browser controleert de waarde van font-size, vermenigvuldigt deze met 1.4, en dit resultaat wordt de regelhoogte;
  • percent is een waarde (bijvoorbeeld 120%) die functioneert als een multiplier. De waarde van font-size wordt vermenigvuldigd met 1.2, wat de regelhoogte bepaalt.
index.html

index.html

styles.css

styles.css

copy

Uitvoer

letter-spacing

De eigenschap letter-spacing bepaalt de horizontale afstand tussen teksttekens.

letter-spacing: normal | value in px | value in em
  • normal is de standaardafstand tussen tekens;
  • value in px is een specifieke waarde die extra ruimte tussen tekens toevoegt;
  • value in em werkt vergelijkbaar met px, maar de afstand is relatief ten opzichte van de font-size.
index.html

index.html

styles.css

styles.css

copy

Uitvoer

word-spacing

De eigenschap word-spacing bepaalt de afstand tussen woorden in de tekst. Hiermee wordt de ruimte tussen woorden vergroot. Als er interpunctietekens in de tekst staan die direct aan woorden zijn geschreven, blijven deze aan de woorden vastzitten, omdat er geen extra ruimte tussen zit.

word-spacing: value | inherit | normal
  • value is een specifieke waarde die de ruimte tussen woorden instelt;
  • inherit erft de woordafstand van het bovenliggende element;
  • normal is de standaardruimte tussen woorden.
index.html

index.html

styles.css

styles.css

copy

Uitvoer

text-shadow

De eigenschap text-shadow voegt een schaduw toe aan de tekst.

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set past de horizontale positie van de schaduw aan. Positieve waarden verplaatsen de schaduw naar rechts, en negatieve waarden naar links;
  • Y set past de verticale positie van de schaduw aan. Positieve waarden verplaatsen de schaduw naar beneden, en negatieve waarden naar boven;
  • blur radius bepaalt hoe wazig de schaduw wordt weergegeven. Hogere waarden maken de schaduw zachter en meer diffuus. De standaardwaarde is 0 als deze niet is opgegeven;
  • color specificeert de kleur van de schaduw in elk geldig kleurformaat. Indien niet opgegeven, wordt standaard de tekstkleur gebruikt.
index.html

index.html

styles.css

styles.css

copy

Uitvoer

Opmerking

Bij tekstopmaak zijn er geen strikte regels die bepalen welke waarden in specifieke situaties moeten worden gebruikt. De keuze van tekstopmaakeigenschappen 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?

question mark

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

Select the correct answer

question mark

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

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2
some-alt