In dit hoofdstuk bespreken we uitgebreid de verschillende eenheden in HTML en CSS die worden gebruikt om de grootte, afstand, en positie van elementen op een webpagina te specificeren. Een grondige kennis van deze eenheden is cruciaal voor het ontwerpen van webpagina's die niet alleen responsief zijn, maar ook optimaal toegankelijk voor een breed scala aan apparaten en schermgroottes.
Pixels (px) zijn een absolute maateenheid. Eén pixel komt overeen met één beeldpunt op het scherm van een apparaat. Het gebruik van pixels zorgt voor een nauwkeurige controle over de grootte en positie van elementen, maar het kan ook leiden tot inconsistenties over verschillende schermresoluties.
Gebruik pixels voor het definiëren van de grootte van elementen die een consistente grootte moeten hebben op alle apparaten, zoals iconen, afbeeldingen of grafische knoppen.
Proportionele eenheden zijn flexibel en passen zich aan de omringende tekst of elementen aan. Hieronder worden twee gangbare proportionele eenheden besproken.
De 'em' eenheid heeft zijn wortels in de typografie, waar het traditioneel de breedte van de hoofdletter 'M' in een bepaald lettertype en -grootte aangeeft. In de context van webdesign is 'em' aangepast als een relatieve maateenheid die verwijst naar de lettergrootte van het huidige element waarop het wordt toegepast. Het is bijzonder nuttig voor het creëren van schaalbare en responsieve tekst en lay-outs, aangezien een 'em' zich automatisch aanpast aan de basistekstgrootte van het element, de pagina, of de browserinstellingen van de gebruiker.
<style>
p {
font-size: 2em; /* De tekstgrootte is tweemaal de basistekstgrootte */
margin: 1em; /* De marge is gelijk aan de huidige tekstgrootte */
}
</style>
<p>Deze tekst is aangepast met 'em' eenheden.</p>De 'rem' (Root EM) eenheid is relatief aan de lettergrootte van het root html element. Het verschil met 'em' is dat 'em' afhankelijk is van de lettergrootte van zijn directe of dichtstbijzijnde ouder, terwijl 'rem' altijd relatief is aan de basislettergrootte van het document.
<style>
html {
font-size: 18px; /* Dit stelt de basis lettergrootte voor het document in */
}
h1 {
font-size: 2rem; /* Dit zal 36px zijn omdat het gebaseerd is op de basisgrootte van 18px */
margin-bottom: 1rem; /* Dit stelt een marge in van 18px, opnieuw gebaseerd op de basisgrootte */
}
</style>
<h1>Deze koptekst is aangepast met rem.</h1>Percentage is een veelzijdige relatieve eenheid, nuttig voor het creëren van responsieve ontwerpen die zich aanpassen aan de grootte van het bovenliggende element of het viewport. Bijvoorbeeld, het instellen van een breedte van 50% voor een element betekent dat het de helft van de breedte van zijn parent-element inneemt.
.container { width: 50%; }Vh en vw zijn eenheden gebaseerd op het viewport van het apparaat, wat ze ideaal maakt voor het ontwerpen van interfaces die zich aanpassen aan verschillende schermgroottes. 'Vh' staat voor viewport height en 'vw' voor viewport width.
.banner { height: 50vh; width: 100vw; }Bij het kiezen van eenheden is het essentieel om het doel en de context van elk element zorgvuldig te overwegen. Aspecten zoals toegankelijkheid, gebruiksvriendelijkheid, en cross-browser compatibiliteit spelen een cruciale rol. Het is ook raadzaam om de ontworpen webpagina's uitvoerig te testen op verschillende apparaten en schermgroottes om de uniformiteit en functionaliteit van de gebruikersinterface te garanderen.
In de praktijk is het mengen van verschillende eenheden soms onvermijdelijk. Wees echter bedachtzaam en zorg dat je keuzes de gebruiksvriendelijkheid en toegankelijkheid niet ondermijnen. Tools zoals CSS Grid en Flexbox kunnen ook bijdragen aan het effectief managen van ruimte en lay-out op webpagina's, complementair aan het gebruik van de juiste maateenheden.
In dit hoofdstuk hebben we een grondige duik genomen in de wereld van HTML en CSS-eenheden. Met deze kennis ben je nu uitgerust om webpagina's te creëren die niet alleen esthetisch aantrekkelijk zijn, maar ook functioneel en toegankelijk voor een breed publiek op diverse apparaten.
Voor een optimale leesbaarheid en gebruikservaring op het web is een minimale tekstgrootte van 1rem vaak aangewezen. Dit komt overeen met de standaard tekstgrootte van veel browsers (16px) en biedt een evenwicht tussen leesbaarheid en esthetiek. Afhankelijk van de specifieke context en doelgroep kan het soms wenselijk zijn om de tekstgrootte aan te passen voor optimale leesbaarheid en toegankelijkheid.
<style>
html {
font-size: 16px; /* Dit stelt de basisgrootte van het rootelement in */
}
p {
font-size: 1rem; /* Dit zorgt voor een goede balans tussen leesbaarheid
en esthetiek op het web */
}
</style>
<p>Deze paragraaf is ingesteld op een tekstgrootte die zorgt voor een goede leesbaarheid
op diverse apparaten en schermgroottes.</p>Test altijd hoe je website eruitziet en functioneert op verschillende apparaten en schermgroottes om ervoor te zorgen dat je content toegankelijk en leesbaar is voor een breed publiek.
Voor een coherente hiërarchie en leesbaarheid is het belangrijk om ook de lettergrootte voor de bodytext, zoals paragrafen, vast te stellen. Hieronder staan de aanbevolen lettergroottes voor koppen en bodytext met 'rem' eenheden en hun equivalenten voor drukwerk.
/* Basis font-size instellen op het root-element */
html {
font-size: 100%; /* Dit komt overeen met 16px, ongeveer 12pt */
}
/* Lettergrootte voor bodytext */
body, p {
font-size: 1rem; /* 16px, ongeveer 12pt */
}
/* Lettergroottes voor koppen */
h1 {
font-size: 2.5rem; /* 40px, ongeveer 30pt */
}
h2 {
font-size: 2rem; /* 32px, ongeveer 24pt */
}
h3 {
font-size: 1.75rem; /* 28px, ongeveer 21pt */
}
h4 {
font-size: 1.5rem; /* 24px, ongeveer 18pt */
}
h5 {
font-size: 1.25rem; /* 20px, ongeveer 15pt */
}
h6 {
font-size: 1rem; /* 16px, hetzelfde als de basis font-size voor bodytext, ongeveer 12pt */
}
De 'rem' eenheden zorgen voor consistentie in lettergroottes op verschillende apparaten en bij verschillende schermresoluties. De vergelijking met punten (pt) maakt het makkelijker om de online stijlen af te stemmen op gedrukte materialen, voor een uniforme branding en communicatie.