Lettertype groottes op het internet met CSS
Er zijn veel verschillende manieren om een grootte te definiëren in CSS. Je kunt hierbij spreken over twee verschillende categorieën: absoluut en relatief.
Absolute eenheden zijn vaste waarden die meestal verwijzen naar een fysieke eenheid. Als de waarde eenmaal is toegekend, kan de grootte niet worden gewijzigd door het wijzigen van een ander element.
Relatieve eenheden hebben geen vaste waarde, maar de grootte is afhankelijk van het element wat er boven ligt. Dit betekend dat de grootte gewijzigd kan worden door het bovenliggende element aan te passen.
Een kort overzicht van een aantal eenheden
Eepcnheid | Type | Omschrijving |
Px | Absoluut | 1 âviewport pixelâ |
Pt | Absoluut | 1 point is 1/72 van een inch |
Pc | Absoluut | 1 pica is gelijk aan 12 punten |
% | Relatief | Relatief aan het bovenliggende elements font grootte |
Em | Relatief | Relatief aan het bovenliggende elements font groote |
Rem | Relatief | (root em) Relatief tot de html font grootte |
Keyword | Relatief | xx-small, x-smal, small, medium, large, x-large, xx-large |
Vw | Relatief | 1/100ste van de breedte van de viewport |
Vh | Relatief | 1/100ste van de hoogte van de viewport |
Een complete lijst is natuurlijk op internet te vinden. Hier vind je een complete lijst met CSS-units.
Maar wat is nu eigenlijk het verschil tussen deze eenheden?
Het verschil tussen relatieve en absolute eenheden kan soms lastig te begrijpen zijn, daarom volgen er nu twee voorbeelden om dit duidelijker te maken.
Voorbeeld 1 â standaard instellingen
In een lege HTML pagina, zonder dat je een lettertype grootte aangeeft, worden de standaard instellingen gebruikt. In de meeste browsers betekend dat er voor de html en body tags een grootte van 100% wordt gebruikt. Dit betekend het volgende:
â100% = 1em = 1rem = 16px = 12ptâ
Dit betekend dat als je de grootte van je lettertype in een <p> op 100% zet en een andere <p> op 16px, deze dezelfde grootte zullen zijn. Zoals ook in de volgende afbeelding te zien is:
Voorbeeld 2 â absoluut en relatieve eenheden
Het verschil tussen absolute en relatieve eenheden kan het duidelijkst worden gezien als we de lettertype grootte van de html tag vergroten naar 200%. Dit zal in ons voorbeeld alleen effect hebben op de relatieve groottes.
Dit is het voordeel van het gebruik van relatieve eenheden. Met de mogelijkheid tot het eenvoudig schalen van lettertype groottes, kun je echte responsive websites maken, door alleen maar de grootte van de html tag aan te passen. Wilt u meer te weten komen over B2B Webdesign? Neem dan voor een vrijblijvend adviesgesprek en een bak koffie contact met ons op.
Andere blogartikelen
