Lettertype groottes op het internet met CSS

Geschreven door: op dinsdag 30 juni 2015

Leestijd:

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. Onder andere hier.

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:

lettertype groottes 1

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.

Lettertype groottes 2

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. 


Andere blogartikelen

  • Css grid

    Geschreven door: op dinsdag 20 februari 2018

    Css grid is een vernieuwende manier voor het indelen van content op website pagina’s. Met behulp van css wordt de uiterlijk van een website bepaald. Doormiddel van een grid is het mogelijk om gemakkel ...

    Bekijk het artikel »
  • CSS vendor prefixes

    Geschreven door: op dinsdag 20 februari 2018

    Bij CSS is het voor een aantal stijl regels mogelijk om aan te geven in welke browser deze gebruikt moet worden. Hiervoor wordt het type browser toegevoegd voor de stijl regel. Dit wordt een prefix (o ...

    Bekijk het artikel »
  • CSS auto prefixer

    Geschreven door: op dinsdag 20 februari 2018

    In een eerder blog over vendor prefixes was te zien hoe met behulp van prefixes experimentele stijling regels voor specifieke browser toegepast kunnen worden. Hoewel het gebruik van prefixes in deze ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
Google adwords
TelefoonE-mail

whitepaper-customer-selfservice-1.png

Bedien uw klanten optimaal met customer selfservice

Download de whitepaper