Voor een responsive font gebruik je CSS

Met een paar CSS-commando's een responsive typography van je webfont

Wat zijn de fundamentele werkwijzen voor responsive webdesign en wat zijn de geschikte lettertypes? We geven je in dit artikel een overzicht hiervan en bieden je tevens een leidraad om een responsive font met behulp van CSS-commando's in te voeren.


Welk lettertype is geschikt voor responsive webdesign?

Om ervoor te zorgen dat jouw website op ieder beeldscherm goed wordt weergegeven en het design van je website dus optimaal is, gebruik je een responsive font op basis van vectoren. Daarbij kun je terugvallen op een kant-en-klaar lettertype: Google Fonts en Font Squirrel bieden je bijvoorbeeld voldoende keuze en zijn bovendien gratis. Let er bij de keuze van de typografie op dat het font leesbaar is en het juiste effect heeft. Voor titels mag het lettertype gerust iets speelser zijn – maar vermijd dit in de rest van de tekst, omdat dit ten koste van de leesbaarheid kan gaan.

De kleur van het lettertype moet in combinatie met de achtergrond van je website een optimaal contrast vormen. Het mag niet te flets zijn, want ook dit zorgt voor een verminderde leesbaarheid. Als je twijfelt, kun je met browsertools zoals Colour Contrast Check of Contrast-A de interactie tussen lettertype en achtergrondkleur weergeven en experimenteren met verschillende kleurencombinaties.


Een responsive font integreren met CSS Media Queries

Met de invoering van media queries in CSS3 heb je een nieuwe, handige mogelijkheid om responsive lettertypes te realiseren. Media queries herkennen bepaalde kenmerken van een apparaat zoals beeldschermresolutie, de breedte en hoogte van het browservenster en ook of het display gekanteld is of niet. Deze informatie wordt gebruikt om de weergave aan te passen aan de apparaten van de gebruikers.

Je kunt in CSS geen optimale responsive typografie invoeren door het aangeven van pixelwaarden. Hierbij gaat het namelijk om een statische grootte. Alleen bij gebruik van een flexibele maateenheid krijg je een zo responsive mogelijk lettertype. Daarom moet je relatieve eenheden zoals em, rem of procenten gebruiken om de grootte van een webfont te bepalen.

Het samenstellen en aanpassen van responsive typografie door middel van media queries doe je met de volgende CSS-commando's:

  • Met @font-face integreer je allereerst een webfont op je webpagina.
  • Om het lettertype aan te passen aan het gebruikte apparaat heb je een media querie nodig. Deze voer je uit via @media. Voor de apparaat-specifieke weergave zijn bovendien de maten van het browservenster (viewport) van belang. Als je @media combineert met screen en aanvult met min-width (minimale breedte) of max-width (maximale breedte), kun je het formaat van het lettertype vastleggen voor een bepaalde breedte van het beeldscherm, bijvoorbeeld @media screen and (min-width: 800px). Zo bepaal je wanneer het lettertype van grootte verandert.
  • De aanduiding font-size definieert het formaat van het lettertype – in pixels of in relatieve maateenheden zoals em (van het lettercorps afhankelijke maat van tekenbreedte). De eenheid em richt zich daarbij naar een vooraf vastgelegde grootte van het element dat met een em-waarde wordt weergegeven. Als de tekengrootte alleen door em wordt gedefinieerd, hangt de waarde af van het lettercorps van het oorspronkelijke element.

In de volgende alinea's kun je zien hoe je deze CSS-aanwijzingen kunt gebruiken.


Responsive titels

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

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).


rem

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;
}

CSS Viewport integreren

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 typography css

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.


Samenvatting: responsive font size is een belangrijk onderdeel van webdesign

Met een paar CSS-commando's zorg je al voor een responsive lay-out van je webfont. Na de invoering moet je het resultaat echter nog op zoveel mogelijk verschillende apparaten (of emulators) testen en eventueel verbeteren voordat je de website openbaar maakt.

Of je bij de invoering terugvalt op media queries of toch liever CSS Viewport gebruikt, hangt af van de situatie en is uiteindelijk een kwestie van smaak. Media queries zijn in vergelijking met viewporteenheden iets langzamer bij de aanpassing van het lettertype, maar worden door meerdere oude browsers ondersteund. Bovendien zijn er meer mogelijkheden om responsive typography te bewerkstelligen, bijvoorbeeld met element queries of het gebruik van een jQuery-plugin. Al deze methodes voldoen aan de eisen van een responsive font: voor responsive webdesign moet het lettertype zich altijd aan het zichtbare beeldformaat aanpassen. Hierbij komt het aan op de (relatieve) verandering van de tekengrootte en de regelafstand, evenals het gebruik van webfonts op basis van vectoren.

  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany