font-size

De eigenschap font-size specificeert de grootte, of hoogte, van het lettertype. font-size heeft niet alleen invloed op het lettertype waarop het wordt toegepast, maar wordt ook gebruikt om de waarde van em, rem, en ex lengte-eenheden te berekenen.

p { font-size: 20px;}

font-size kan trefwoorden, lengte-eenheden of percentages als waarden accepteren. Het is echter belangrijk op te merken dat font-size een verplichte waarde is wanneer het wordt gedeclareerd als onderdeel van de font shorthand property. Als het niet in de shorthand is opgenomen, wordt de hele regel genegeerd.

Lengte-waarden (bijv. px, em, rem, ex, etc) die op font-size worden toegepast, kunnen niet negatief zijn.

Absolute trefwoorden en waarden

.element { font-size: small;}

Het accepteert de volgende absolute trefwoordwaarden:

• xx-small
• x-small
• small
• medium
• large
• x-largexx-large

Deze absolute waarden worden gekoppeld aan specifieke lettergrootten zoals die door de browser worden berekend. Maar je kunt ook twee trefwoordwaarden gebruiken die relatief zijn ten opzichte van de lettergrootte van het parent element.

Andere absolute waarden zijn mm (millimeters), cm (centimeters), in (inches), pt (punten) en pc (picas). Een punt is gelijk aan 1/72 van een inch, terwijl een pica gelijk is aan 12 punten – deze waarden worden meestal gebruikt voor gedrukte documenten.

Relatieve trefwoorden

.element { font-size: larger;}

• larger
• smaller

Bijv, als het parent element een lettergrootte heeft van small, zal een child element met een gedefinieerde relatieve grootte van larger de lettergrootte gelijk maken aan medium voor het child element.

Percentage waarden

.element { font-size: 110%;}

Percentage waarden, zoals het instellen van een font-size van 110%, zijn ook relatief ten opzichte van de font-grootte van het parent element, zoals te zien is in de demo hieronder:

Zie de Pen qdbELL door CSS-Tricks (@css-tricks) op CodePen.

De em eenheid

.element { font-size: 2em;}

De em eenheid is een relatieve eenheid gebaseerd op de berekende waarde van de lettergrootte van het parent element. Dit betekent dat child elementen altijd afhankelijk zijn van hun parent om hun font-grootte in te stellen. Bijvoorbeeld:

<div class="container"> <h2>This is a heading</h2> <p>This is some text.</p></div>

.container { font-size: 16px;}p { font-size: 1em;}h2 { font-size: 2em;}

In het bovenstaande voorbeeld zal de paragraaf een font-size van 16px hebben omdat 1 x 16 = 16px terwijl de kop 32px zal zijn omdat 2 x 16 = 32px. Er zijn veel voordelen aan het opschalen van het type afhankelijk van de font-grootte van het parent element, namelijk we kunnen elementen wikkelen binnen een container en weten dat alle kinderen altijd relatief ten opzichte van elkaar zullen zijn:

Zie de Pen Uitzoeken hoe de em unit werkt door CSS-Tricks (@css-tricks) op CodePen.

De rem-eenheid

In het geval van rem-eenheden is de font-grootte echter afhankelijk van de waarde van het root-element (of het html element).

html { font-size: 16px;}p { font-size: 1.5rem;}

In het bovenstaande voorbeeld is de rem eenheid gelijk aan 16px (omdat het is geërfd van het html/root element) en dus zal de lettergrootte voor alle alinea elementen berekend worden op 24px (1.5 x 16 = 24). In tegenstelling tot em eenheden, zal de paragraaf de styling van al zijn parents naast de root negeren.

Deze eenheid wordt ondersteund door de volgende browsers:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Works	Works	Works	Works	10+	Works	Works

De ex eenheid

.element { font-size: 20ex;}

Voor ex eenheden, 1ex gelijk zijn aan de berekende hoogte van de kleine letter x van het root element. Dus in het onderstaande voorbeeld is het html element ingesteld op 20px en alle andere font-maten worden bepaald door de x-hoogte van dat specifieke font.

Zie de Pen Uitzoeken hoe de ex unit werkt door CSS-Tricks (@css-tricks) op CodePen.

Experimenteer met de demo hierboven door de font-family te vervangen op het html element om te zien hoe de andere font-sizes veranderen.

Viewport units

.element-one { font-size: 100vh;}.element-two { font-size: 100vw;}

Viewport units, zoals vw en vh, stellen de font-size van een element in ten opzichte van de afmetingen van de viewport:

• 1vw = 1% van de viewport breedte
• 1vh = 1% van de viewport hoogte

Dus als we het volgende voorbeeld nemen:

.element { font-size: 100vh;}

Dit geeft aan dat de font-size van het element altijd 100% van de hoogte van de viewport moet zijn (50vh is dan 50%, 15vh is dan 15% enzovoort). Probeer in de onderstaande demo de hoogte van het voorbeeld te wijzigen om te zien hoe het type zich uitrekt:

Zie het voorbeeld Pen Sizing type met vh eenheden door CSS-Tricks (@css-tricks) op CodePen.

vweenheden zijn anders in die zin dat de hoogte van de lettervormen wordt bepaald door de breedte van de viewport, dus in de onderstaande demo moet u het browservenster horizontaal vergroten of verkleinen om deze wijzigingen te zien:

Zie het type Pen Sizing met vw-eenheden door CSS-Tricks (@css-tricks) op CodePen.

Deze eenheden worden ondersteund door de volgende browsers:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

Het is belangrijk op te merken dat er nog twee andere viewport-eenheden zijn: vmin en vmax. De eerste zal de waarden van vh en vw vinden en de font-size instellen als de kleinste van de twee terwijl vmax de font-size instelt op de grootste van deze twee waarden.

De ch eenheid

.element { font-size: 24ch;}

De ch eenheid is vergelijkbaar met de ex eenheid in die zin dat het de font-grootte van een element instelt in relatie tot de breedte van de 0 (nul) glyph van het lettertype:

Zie de Pen Sizing type met ch units door CSS-Tricks (@css-tricks) op CodePen.

Deze eenheid wordt ondersteund door:

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	Works	10+	Works	9+	Works	Works

Gerelateerde eigenschappen

• font
• font-familie
• font-stretch
• font-style
• font-variant
• font-weight