Units i praksis

Hvorfor bruge typografiske units?

rem er godt til generelle størrelser, men nogle gange vil du have værdier, der følger tekstens faktiske rytme eller højde. Der er lh, rlh, cap og rcap nyttige.

De hjælper især, når du vil styre:

• spacing der skal følge line-height
• alignment mellem tekst og ikoner
• mere præcis luft omkring overskrifter og labels

lh og rlh

• 1lh = elementets aktuelle line-height
• 1rlh = root-elementets line-height

Brug lh, når noget skal følge den lokale tekst. Brug rlh, når du vil have en mere stabil baseline på tværs af komponenter.

.card__body > * + * {
  margin-block-start: .75lh;
}

.section {
  padding-block: 2rlh;
}

En god tommelfingerregel:

• lh = lokal rytme
• rlh = global rytme

cap og rcap

• 1cap = højden på store bogstaver i elementets aktuelle font
• 1rcap = cap-højden baseret på root-fonten

Det er nyttigt, når du vil måle ud fra det, øjet faktisk aflæser, ikke bare den fulde fontboks.

Praktiske brugssituationer:

• ikoner, der skal flugte med en overskrift
• labels og badges, der skal passe til tekstens optiske højde
• finere justeringer i korte UI-elementer

.icon {
  block-size: 1cap;
}

.badge {
  min-block-size: 1.5rcap;
}

Hvornår er de bedre end rem?

Brug dem, når relationen til teksten er det vigtigste. Hvis du bare skal have en almindelig komponent-padding, er rem ofte stadig enklere.

Kort sagt:

• vælg rem, når du vil have en stabil generel størrelse
• vælg lh/rlh, når spacing skal følge rytmen
• vælg cap/rcap, når optisk højde er vigtigere end fontboksen

Demo 1: lh som praktisk unit

Denne øvelse viser den direkte forskel på at måle med line-height i stedet for en fast længde.

Demo 2: cap til optisk alignment

Her ser du forskellen på at måle mod cap-højden og mod line-height. Det er en lille øvelse, men den gør forskellen meget konkret.