CSS Lettertypen
Lettertypen ook wel genoemd fonts, spelen een zeer belangrijke rol in het maken van een website. Het kiezen van het juiste lettertype heeft een enorme impact op hoe de lezers een website ervaren. Het is belangrijk om een lettertype te gebruiken dat gemakkelijk te lezen is. Het lettertype voegt waarde toe aan je tekst. Het is ook belangrijk om de juiste kleur en tekstgrootte voor het lettertype te kiezen.
Lettertypen stijlen met CSS
Het kiezen van het juiste lettertype en de juiste stijl is erg cruciaal voor de leesbaarheid van tekst op een pagina. CSS biedt verschillende eigenschappen voor lettertypen die gebruikt kunnen worden om vast te leggen in welk lettertype en in welke grootte en vorm de tekst in een element moet worden weergegeven.
 |
De lettertype-eigenschappen zijn: font-family, font-style, font-weight, font-size en font-variant. |
font-family
De font-family eigenschap bepaalt welk lettertype gebruikt moet worden bij de weergave van de tekst. Deze eigenschap kan verschillende door komma's gescheiden lettertypenamen bevatten als een fallback systeem, zodat als het eerste lettertype niet aanwezig is op of ondersteund wordt door het systeem van de gebruiker, de browser het tweede probeert te gebruiken, enzovoort.Geef daarom altijd eerst het lettertype op dat je wilt gebruiken, en vervolgens alle lettertypen die daarna gebruikt kunnen worden, als het eerste niet beschikbaar is. Je zou de lijst moeten beëindigen met een generieke font-familie waarvan er vijf van zijn.
|
Generieke font-families zijn: serif, sans-serif, monospace, cursive en fantasy |
De meest voorkomende lettertype familie-namen die in webdesign worden gebruikt, zijn serif en sans-serif, omdat ze beter geschikt zijn om te lezen. Hoewel monospace lettertypen vaak worden gebruikt om code weer te geven, omdat in dit lettertype elke letter dezelfde ruimte in beslag neemt, ziet het eruit als getypte tekst.
De cursive lettertypen zien eruit als een handschrift. Het fantasy lettertype wordt niet veel gebruikt vanwege de slechte beschikbaarheid in alle besturingssystemen.
Verschil serif en sans-serif
Serif is een lettertype dat wordt gekenmerkt door decoratieve voetjes van de letters. Met andere woorden, het is gemakkelijk om dit lettertype te herkennen aan de kleine lijnen die achter de randen van de letters die in dit lettertype zijn getypt, te zien zijn. Zie de onderstaande afbeelding:
Voorbeelden van fonts
| Generieke font-familie | Lettertypen namen |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
CSS Font-style
De eigenschap font-style wordt gebruikt om de stijl van het lettertype voor de tekstinhoud van een element in te stellen. De font-style kan normaal, cursief of schuin naar rechts hellend zijn. De standaardwaarde is normaal. Laten we het volgende voorbeeld uitproberen om te begrijpen hoe het in principe werkt.
Voorbeeld:
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
 |
In de praktijk worden beide vaak cursief genoemd als stijlnaam. Het gebruik van de term "oblique"' komt minder vaak voor de weergave door browsers van de waarden italic en oblique zal echter hetzelfde zijn. |
CSS Font-size
Met de font-size eigenschap kun je de grootte van de letters van de tekst bepalen. Je kunt dat op verschillende manieren doen b.v. met trefwoorden, percentages, pixels, enz.
Font-size instellen met pixels
Door de tekstgrootte met pixels in te stellen, heb je volledige controle over de grootte van de tekst.
Font-size instellen met EM
Om gebruikers in staat te stellen het formaat van de tekst te wijzigen (in het browser), 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.Stel dat je een lettergrootte van 20px instelt op het body-element, dan is 1em 20px en 2em is 40px. Als je de lettergrootte echter nergens op de pagina hebt ingesteld, dan gebruikt de browser de standaard waarden die normaal gesproken 16px is. Als dit het geval is dan is 1em = 16px en 2em = 32px.
Voorbeeld:
h1 {
font-size: 2em; /* 32px/16px=2em */
}
p {
font-size: 0.875em; /* 14px/16px=0.875em */
}
Font-size percentages en EM
Zoals je in het bovenstaande voorbeeld hebt gezien, ziet de berekening van em waarden er niet zo eenvoudig uit. Om dit allemaal wat makkelijker te maken, is er een mooie berekening voor. Dit doen we door de lettergrootte voor het body element in te stellen op 62,5% (dat is 62,5% van de standaard 16px), wat overeenkomt met 10px, of 0,625em.Nu kun je de lettergrootte voor alle elementen met em instellen en het is ook nog gemakkelijk te onthouden, door de px-waarde te delen door 10. Dit doen we op de volgende manier 10px=1em, 12px=1.2em, 14px=1.4em, 16px=1.6em, enzovoort. Laten we de volgende voorbeeld eens uitproberen.
Voorbeeld:
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
h1 {
font-size: 2.5em; /* 2.5em = 25px */
}
p {
font-size: 1.4em; /* 1.4em = 14px */
}
p span {
font-size: 2em; /* 2em = 28px */
}
Root font-size instellen met REM
Met de komst van CSS3 is het nog eenvoudiger om de font-size in te stellen, hier is de functie rem (root em) geïntroduceerd, die altijd relatief is ten opzichte van de lettergrootte van het root element html, ongeacht waar het element zich in het document bevindt.Dit betekent dat 1rem gelijk is aan de lettergrootte van het html element, dat in de meeste browsers standaard 16px is. Laten we de volgende voorbeeld proberen om te begrijpen hoe het echt werkt.
Voorbeeld:
html {
font-size: 62.5%; /* font-size 1rem = 10px */
}
body {
font-size: 1.6rem; /* 1.6rem = 16px */
}
h1 {
font-size: 2.5rem; /* 2.5rem = 25px */
}
p {
font-size: 1.4rem; /* 1.4rem = 14px */
}
p span {
font-size: 2rem; /* 2rem = 20px (geen 28px) */
}
Font-size met sleutelwoorden
CSS biedt verschillende sleutelwoorden die je kunt gebruiken om de lettergroottes te definiëren. Bij het bepalen van de grootte van de letters kun je gebruik maken van de absolute sleutelwoorden xx-small, x-small, small, medium, large, x-large en xx-large. Je kunt met deze sleutelwoorden niet een exacte grootte vastleggen in punten of pixels, die in elke situatie en voor elke browser en elk lettertype gelijk is.Terwijl een relatieve lettergrootte kan worden opgegeven met behulp van de sleutelwoorden: smaller of larger. Laten we de volgende voorbeeld proberen en kijken hoe het werkt.
Voorbeeld:
body {
font-size: large;
}
h1 {
font-size: larger;
}
p {
font-size: smaller;
}
Responsive font-size
De tekstgrootte kan worden ingesteld met een vw eenheid, dit betekent "viewport-width", op deze manier volgt de tekstgrootte de grootte van het browservenster.
Voorbeeld:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:5vw;">Responsive voorbeeld</h1>
<p style="font-size:3vw;">Wijzig het formaat van het browservenster om te zien hoe de tekstgrootte wordt geschaald.</p>
<p>Viewport is de grootte van het browservenster. 1vw = 1% van de breedte van het venster.</p>
</body>
</html>
Font weight
De font-weight eigenschap bepaalt het gewicht van de letters. Het gewicht geeft aan hoe donker of vet de letters moeten worden weergegeven. Bij toenemend gewicht worden de letters donkerder of vetter gedrukt.
Deze eigenschap kan één van de volgende waarden aannemen:
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 en inherit.
|
Met de waarde bold geef je aan dat de tekst vet moet worden weergegeven. |
Font variant
De font-variant eigenschap bepaalt of kleine letters in de vorm van kleine hoofdletters moeten worden weergegeven. Je gebruikt daarvoor de waarde small-caps.
|
De waarde normal verwijdert de kleine hoofdletters uit de tekst die al op die manier zijn opgemaakt. |
