Voor een responsive font gebruik je CSS

Responsive titels maken met media queries

Titels worden in CSS aangegeven met de afkortingen h1, h2 en h3. Je kunt een titel met de eenheid em verschillende relatieve formaten toewijzen. Het volgende voorbeeld laat zien hoe je de responsive font size in de eerste titel (h1) van een normale afbeelding (font-size: 100%) in verschillende relatieve groottes weergeeft:

body {font-size: 100%}

h1 {font-size: 3em;}

@media screen and (max-width: 64em) {
    h1 {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 50em) {
    h1 {
        font-size: 2em;
    }
}

@media screen and (max-width: 30em) {
    h1 {
        font-size: 1.5em;
    }
}

In dit voorbeeld worden er voor h1 vier verschillende weergavemogelijkheden vastgelegd: de betreffende font-size van h1 (3em; 2,5em; 2em; 1,5em). Wanneer een van deze drie tekengroottes wordt ingezet, hangt af van de vensterbreedte van de gebruikte browser, die afhankelijk is van de maximumwaarde (max-width). De breedte is in dit voorbeeld vastgelegd via de maateenheid em. Er is vooraf geen tekengrootte vastgelegd, dus richt de waarde van em zich naar de standaardinstelling van de browser – in de regel 16 pixels. Daarmee geldt in dit geval dat 1em = 16px. Hiermee kunnen verschillende breedtes worden berekend waaraan je de tekengrootte kunt aanpassen – het aantal pixels van de vensterbreedte deel je daarbij door 16. In ons voorbeeld is de responsive font size van h1 dus gericht op vier verschillende breedtes:

• Meer dan 1024 pixels
• Tot 1024 pixels (1024 : 16 = 64em)
• Tot 800 pixels (800 : 16 = 50em)
• Tot 480 pixels (480 : 16 = 30em)

Natuurlijk kun je nog veel meer van deze zogenaamde breakpoints invoeren voor de heroriëntering van de tekengrootte. Zo kun je de titels nog preciezer aanpassen.

Bij langere titels kan het voorkomen dat ze op het einde van de regel worden onderbroken. In dat geval moet je ook de regelafstand aanpassen in verhouding tot de titel. Hoe dit moet, zie je hieronder.

Een lopende tekst responsive maken met em

Net als bij de titels leg je voor een alinea (p) een tekengrootte van 100% vast. Ook hier wordt het lettercorps gedefinieerd door de eenheid em. Het invoeren van verschillende tekengroottes, die zich oriënteren aan de vier eerder gedefinieerde vensterbreedtes, ziet er in CSS als volgt uit:

body {font-size: 100%}

p {font-size: 1.5em;}

@media screen and (max-width: 64em) {
    body {
        font-size: 90%em;
    }
}

@media screen and (max-width: 50em) {
    body {
        font-size: 75%;
    }
}

@media screen and (max-width: 30em) {
    body {
        font-size: 50%;
    }
}

Aangezien een body-waarde van 100 procent in de meeste browsers neerkomt op 16 pixels, is het standaard letterformaat van de tekst (font-size: 1,5em) in ons voorbeeld 24 pixels (1,5 * 16 = 24). En aan de hand van de font-size- aanwijzingen (90%, 75%, 50%) met betrekking tot de body past de tekengrootte zich aan de breedte van het venster aan. Zo heb je in slechts een paar stappen een responsive font size.

Zodra je de lopende tekst van je webpagina responsive vormgeeft, moet je niet alleen de font size, maar ook de regelafstand voortdurend aanpassen. Volgens een van de typografische grondbeginselen moet de regelafstand toenemen naarmate de regels van een tekst breder worden. Een andere globale richtlijn stelt: de regelafstand moet bij de lopende tekst tussen de 120 en 140 procent van de gebruikte tekengrootte liggen (1,2em tot 1,4em). De waarde hangt echt ook altijd af van het gebruikte lettertype.

Met het gebruik van de eenheid em kun je de regelafstand eenvoudig afstemmen op de tekengrootte. Dit doe je met de aanwijzing line-height (regelhoogte):

body {font-size: 100%}

p {font-size: 1.5em;}
     line-height: 1.em;
}

h1, h2, h3 {line-height: 1.2em;}

In ons voorbeeld bedraagt de regelafstand van de lopende tekst 130 procent (1.3em) van de tekengrootte en bij titels 120 procent (1.2em).

Lopende tekst responsive maken met rem

In plaats van em kun je voor een responsive, lopende tekst ook de relatieve maateenheid rem (“root em”) gebruiken. Deze oriënteert zich namelijk aan het basiselement html (in tegenstelling tot de em-eenheid). Dit zorgt ervoor dat de font size zich direct aanpast aan de volledige inhoud van het basiselement. Vooral bij complexe verknopingen van elementen is dit een voordeel tegenover em. Het gebruik van rem voor responsive typography ziet er in CSS bijvoorbeeld zo uit:

html {font-size: 100%}

p {font-size: 1.5rem;}

h1 {font-size: 3rem;}

h2 {font-size: 2.5rem;}

h3 {font-size: 2rem;}

De rem-eenheid wordt echter niet door alle oude browserversies ondersteund. Bij browsers als Firefox, Chrome, Safari, Edge of Opera is dat niet problematisch, omdat nagenoeg niemand de verouderde versies van deze browsers nog gebruikt. Vooral de ontbrekende ondersteuning van eerdere versies van Internet Explorer van Microsoft kan tot problemen leiden. Er is pas ondersteuning voor rem-eenheden vanaf versie 9. Als je dus ook de gebruikers van oudere browserversies een aantrekkelijke weergave wilt presenteren, moet je een zogeheten Fallback-variant met behulp van pixels inbouwen. Dit ziet er in ons voorbeeld als volgt uit:

html {font-size: 100%}

p {
  font-size: 24px;
  font-size: 1.5rem;
}

h1 {
  font-size: 48px;
  font-size: 3rem;
}

h2 {
  font-size: 40px;
  font-size: 2.5rem;
}

h3 {
  font-size: 32px;
  font-size: 2rem;
}

Responsive typography via een CSS Viewport integreren

Een andere variant voor het integreren van een responsive webfont is het gebruik van CSS-viewporteenheden. Met viewport wordt in webdesign de grootte van het browservenster bedoeld. Ook via CSS Viewport kun je de pagina-inhoud laten reageren op de breedte van het venster en aan de betreffende grootte laten aanpassen. Het voordeel ten opzichte van het gebruik van media queries is dat het aanpassingsproces aan een nieuw vensterformaat sneller verloopt.

Via de CSS-viewporteenheden vw (“viewport width”) en vh (“viewport height”) leg je de breedte en de hoogte vast in verhouding tot de grootte van het browservenster. Ook staan met vmax (“viewport maximum”) en vmin (“viewport minimum”) twee eenheden ter beschikking die de grootte bepalen in verhouding tot de hoogte of de breedte van het venster. Welke maat wordt gebruikt als basis hangt van de specifieke eenheid af: bij vmin bepaalt de lagere waarde en bij vmax bepaalt de hogere waarde welke viewport maatgevend is. Alle viewporteenheden zijn procentuele gegevens (bijvoorbeeld 10vw = 10 procent van de vensterbreedte). Bij een viewport van 640 x 380 pixels zou vmax zich oriënteren aan de 640 pixels (de hogere waarde). In dit geval geldt dat de waarde 10vmax = 64px (640 : 10).

Net als de rem-maateenheden worden ook de viewporteenheden niet door alle browserversies ondersteund – in dit geval zijn het er zelfs nog meer. Een overzicht hiervan vind je hier.

Responsive titels en lopende tekst maken met CSS Viewport

Met de viewportmaateenheden kun je zowel titels als de lopende teksten uitlijnen. Het invoeren van de viewportaanwijzingen is vergelijkbaar met het gebruik van rem-eenheden bij de media queries – beide eenheden zijn relatief. Het volgende codefragment kan de lopende tekst (p) en de titels (h1, h2, h3) responsive vormgeven met viewporteenheden.

p  {font-size: 2vmin;}

h1 {font-size: 5vw;}

h2 {font-size: 4vh;}

h3 {font-size: 3vmin;}

Met deze CSS-commando's leg je vast dat de tekens van de lopende tekst (p) altijd 2 procent van de vensterbreedte of -hoogte zijn (font-size: 2vmin) – al naar gelang welke waarde lager is. Daarmee wordt gegarandeerd dat het lettertype ook bij kleinere browservensterformaten altijd dezelfde verhouding heeft.

Verder is de grootte van de eerste titel (h1) altijd 5 procent van de vensterbreedte (font-size: 5vw), de tweede (h2) is altijd 4 procent van de vensterhoogte (font-size: 4vh). De derde en laatste titel (h3) is door de waarde 3vmin altijd 1 procent groter dan de lopende tekst, omdat deze de waarde 2vmin heeft. Door deze vier CSS-aanwijzingen staan het lettercorps van de lopende tekst en de drie verschillende titels altijd in dezelfde verhouding tot elkaar – ongeacht hoe groot het browservenster is.