Font size

Sinds CSS is het aantal manieren om de lettergrootte weer te geven enorm toegenomen. Waar de fonttag een getal gebruikte, kun je met css pixel, point, picas, em, ex, omschrijvingen en percentages (%) gebruiken.

Met behulp van font-size kun je weergeven in welke grootte het lettertype van een site moet worden weergegeven. Dit doe je bijvoorbeeld door font-size: 12px; toe te voegen aan je stijlblad. Welke typen kun je nu toevoegen aan font-size. Hieronder een kort overzicht.

Punten en picas
Wanneer je voor tekst op een scherm werkt kun je deze twee het beste niet gebruiken. Al kom je
ze toch veel tegen, ze zijn bedoeld voor design op papier. Een punt is 1/72 deel van een inch. Een
pica is 1/6 deel van een inch. Wanneer je print stijlbladen maakt kun je ze gebruiken. Anders
kun je ze beter vergeten.

Pixels
Aangezien een beeldscherm bestaat uit pixels wordt dit formaat veel gebruikt in webdesign.
Toch heeft dit formaat een nadeel. Het past zich niet aan aan de voorkeuren van de gebruiker.
Sommige gebruikers stellen namelijk hun standaardlettergrootte zelf in en dan op large. Maar
met pixels stel je de grootte vast voor de gebruiker en geldt de instelling van de computer
niet meer. Voor mensen die een groot lettertype echt nodig hebben is dit dus lastig.
In de wereld van printen hebben pixels al helemaal geen betekenis. Zet ze dus niet in je
stijl voor je printopdracht.

Em
De em is een relatief formaat. Met andere woorden, de instelling van de gebruiker bepaald wat
het formaat van de letter wordt. Deze wordt gebaseerd op de letter ‘M’ als basis letter.
Wanneer je deze manier gebruikt, blijft het voor gebruikers mogelijk om op hun computer
lettergrootte aan te passen als ze dat willen. Wanneer je de grootte op 1 zet, is dat in
wezen gelijk aan 100%, wanneer je dus kleiner wilt stel je em in op 0.9 en als je groter
wilt stel je in op 1.1em. Het volgende voorbeeld laat het resultaat zien.

font-size: 1em
font-size: 0.9em
font-size: 1.1em

Ex
Met Ex doe je hetzelfde, maar dan gebaseerd op de letter ‘X’. Alleen is deze manier nog niet
wijd verbreid. Moderne browsers ondersteunen deze vorm nog niet (goed). Het devies is dus om
deze vorm niet te gebruiken.

Percentages (%)
Net als em en ex luister je met deze instelling naar de gebruiker. Wanneer hij de instelling op
large (groot) zet dan is het lettertype groter dan met medium (middel).
100% is de instelling, 90% is kleiner en 110% is groter.

Omschrijvingen (relatief en absoluut)
De laatste manier is door omschrijvingen te gebruiken. Er zijn twee manieren, absoluut en
relatief. Absolute omschrijvingen zijn ‘xx-small’, ‘x-small’, ‘small’, ‘medium’, ‘large’,
‘x-large’ en ‘xx-large’.
Relatieve omschrijvingen zijn afgeleiden van de basisinstelling.
Larger is groter dan en smaller is kleiner dan de basisinstelling. Net als in percentages.

<p style=”font-size: 15px;”>Leuk dat deze tekst kleiner is dan
<em style=”font-size: larger;”>deze tekst</em></p>

Dit geeft het volgende resultaat:

Leuk dat deze tekst kleiner is dan
deze tekst

Alle CSS elementen