CSS -lettergrootte
Lettertypegrootte
De font-sizeeigenschap bepaalt de grootte van de tekst.
Het kunnen beheren van de tekstgrootte is belangrijk bij webdesign. U mag echter geen aanpassingen aan de lettergrootte gebruiken om alinea's op koppen te laten lijken, of koppen op alinea's.
Gebruik altijd de juiste HTML-tags, zoals <h1> - <h6> voor koppen en <p> voor alinea's.
De waarde van de lettergrootte kan een absolute of relatieve grootte zijn.
Absolute maat:
- Stelt de tekst in op een opgegeven grootte
- Staat niet toe dat een gebruiker de tekstgrootte in alle browsers wijzigt (slecht om toegankelijkheidsredenen)
- Absolute grootte is handig als de fysieke grootte van de uitvoer bekend is
Relatieve grootte:
- Stelt de grootte in ten opzichte van omringende elementen
- Hiermee kan een gebruiker de tekstgrootte in browsers wijzigen
Opmerking: als u geen lettergrootte opgeeft, is de standaardgrootte voor normale tekst, zoals alinea's, 16px (16px=1em).
Lettergrootte instellen met pixels
Door de tekstgrootte met pixels in te stellen, heb je volledige controle over de tekstgrootte:
Voorbeeld
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Tip: Als u pixels gebruikt, kunt u nog steeds de zoomtool gebruiken om de grootte van de hele pagina te wijzigen.
Lettergrootte instellen met Em
Om gebruikers in staat te stellen het formaat van de tekst te wijzigen (in het browsermenu), gebruiken veel ontwikkelaars em in plaats van pixels.
1em is gelijk aan de huidige lettergrootte. De standaard tekstgrootte in browsers is 16px. De standaardgrootte van 1em is dus 16px.
De grootte kan worden berekend van pixels tot em met behulp van deze formule: pixels /16= em
Voorbeeld
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
In het bovenstaande voorbeeld is de tekstgrootte in em hetzelfde als in het vorige voorbeeld in pixels. Met de em-grootte is het echter mogelijk om de tekstgrootte in alle browsers aan te passen.
Helaas is er nog steeds een probleem met oudere versies van Internet Explorer. De tekst wordt groter dan het zou moeten als het groter wordt gemaakt, en kleiner dan het zou moeten als het kleiner wordt gemaakt.
Gebruik een combinatie van Percentage en Em
De oplossing die in alle browsers werkt, is om een standaard lettergrootte in procenten in te stellen voor het <body>-element:
Voorbeeld
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Onze code werkt nu prima! Het toont dezelfde tekstgrootte in alle browsers en stelt alle browsers in staat om in te zoomen of de tekst te vergroten of verkleinen!
Responsieve lettergrootte
De tekstgrootte is in te stellen met een vweenheid, oftewel de "viewport width".
Op die manier volgt de tekstgrootte de grootte van het browservenster:
Hallo Wereld
Wijzig het formaat van het browservenster om te zien hoe de lettergrootte wordt geschaald.
Voorbeeld
<h1 style="font-size:10vw">Hello World</h1>
Viewport is de grootte van het browservenster. 1vw = 1% van de breedte van de viewport. Als de viewport 50 cm breed is, is 1vw 0,5 cm.