Tekst en Lettertypes
Lettertypes
Een ander woord voor lettertype is font. Een lettertype is de manier waarop letters, leestekens en cijfers worden weergegeven.
Fonts worden opgedeeld als volgt:
- De generic family
- Bijvoorbeeld: sans-serif, serif, …
- De font family
- Bijvoorbeeld: Arial, Times New Roman, …
Elke font family hoort bij één generic family. Zo is:
- Arial een sans-serif lettertype
- Times New Roman een een serif lettertype
In CSS bestaan er 3 generic families:
- Serif
- Dit zijn de lettertypes met kleine uiteindes aan elke letter.
- Font families hierin zijn:
- Times New Roman
- Georgia
- Sans-serif
- Dit zijn de lettertypes zonder (sans in het frans) kleine uiteindes aan elke letter.
- Font families hierin zijn:
- Arial
- Calibri
- Monospace
- Dit zijn de lettertypes waarvan elke letter exact evenveel ruimte inneemt op het scherm.
- Font families hierin zijn:
Courier NewRoboto Mono
Lettergroottes
In webdesign is het belangrijk om de grootte van je tekst te kunnen bepalen. Wat je echter niet mag doen is lettergroottes gebruiken om paragrafen er uit te laten zien als headings, of headings als paragrafen!
Gebruik daarom altijd de juiste HTML-tags, zoals <h1> - <h7> voor headings en <p> voor paragrafen.
De grootte van je lettertype kan een absolute of relatieve grootte zijn.
Absolute grootte
- Zet de tekstgrootte op een bepaalde grootte
- In sommige browsers is het niet mogelijk om de tekstgrootte te veranderen (nadelig voor bijvoorbeeld voor slechtziende mensen)
Wanneer de fysieke grootte van het scherm bekend is kan absolute grootte nuttig zijn. Absolute grootte wordt uitgedrukt in pixels (px).
De standaard grootte van letters in de browser van normale tekst (bijvoorbeeld in paragrafen) is 16px.
Relatieve grootte
- Hiermee wordt de tekstgrootte bepaald ten opzichte van andere elementen
- Hiermee kan een gebruiker de tekstgrootte aanpassen in de browser
Relatieve grootte wordt uitgedrukt in em. Met de standaardinstellingen van de meeste browsers komt 1em overeen met 16px.
De meeste browsers staan echter toe om de standaardgrootte te veranderen. Wanneer een gebruikt bijvoorbeeld de standaardgrootte veranderd naar 24px, dan zal bij die persoon 1em overeen komen met 24px in plaats van 16px.
TEXT PROPERTIES
In deze CODE hoofdstukken worden enkele belangrijke CSS stijlregels aangeleerd die je zeker nodig zult hebben.
Overzicht
| property | code | uitleg |
|---|---|---|
| De font-family property | font-family: Arial; |
De font-family property zorgt voor het lettertype van de tekst in een element.
De mogelijke waardes zijn:
|
| De font-size property | font-size: 25px; |
De font-size property zorgt voor de tekstgrootte in een element.
De mogelijke waardes zijn:
|
| De text-align property | text-align: center;
|
De text-align property zorgt voor de horizontale uitlijning van tekst in een element.
De mogelijke waardes zijn:
|
| De text-decoration property | text-decoration: underline;
|
De text-decoration property zorgt voor het toevoegen of verwijderen van lijnen door en rond de tekst. De meest bekende hiervan is onderlijnde tekst.
De mogelijke waardes zijn:
|
| De font-style property | font-style: italic;
|
De font-style property zorgt voor het schuin of rechtzetten van de letters in een tekst.
De mogelijke waardes zijn:
|
| De font-weight property | font-weight: bold;
|
De font-weight property zorgt voor het vet maken van de letters in een tekst.
De mogelijke waardes zijn:
|