Øvrige typografi-greb i praksis

Det her er små forbedringer, ikke fundamentet

De her greb er bedst, når basis allerede er god:

• fornuftig line-height
• tydeligt hierarki
• stabil flow-space
• rolig læsebredde

Brug dem til at løfte en god tekstopsætning, ikke til at redde en dårlig.

text-wrap: balance og text-wrap: pretty

text-wrap er en af de mest nyttige små forbedringer i moderne typografi.

Brug det typisk sådan:

• text-wrap: balance til korte overskrifter og labels
• text-wrap: pretty til paragraphs og lister

:is(h1, h2, h3) {
  text-wrap: balance;
}

:is(p, li) {
  text-wrap: pretty;
}

Det giver pænere linjebrud uden at du skal tvinge linebreaks ind i HTML.

text-box er en præcis forbedring, ikke en nødvendighed

text-box kan trimme overskydende plads omkring tekst og gøre kort, badges og hero-overskrifter mere præcise optisk.

Tænk i progressive enhancement:

• god standard uden text-box
• bedre alignment med text-box
• fallback hvis det er nødvendigt

initial-letter ændrer tonen i længere tekst

initial-letter er ikke et hverdagsgreb i alle UI’er, men det er nyttigt at kende, fordi det viser hvor meget ét lille typografisk valg kan ændre karakteren af et tekstafsnit.

Det fungerer bedst i mere editorial-lignende tekst end i almindelige cards og produkt-UI.

Gradient-text skal bruges med måde

Gradient-tekst er dekorativt. Det kan fungere på korte overskrifter, men bliver hurtigt for meget, hvis det bruges på lange tekstblokke.

God tommelfingerregel:

• korte hero-headlines: måske ja
• brødtekst: nej
• lav altid en læsbar fallback

Demo 1: text-box og fallback

Demo 2: initial-letter

Demo 3: Gradient-text

Mini-checkliste

1. Har du allerede en god basis, før du bruger de her greb?
2. Er effekten tydelig, men stadig læsbar?
3. Har du en rimelig fallback, hvis feature-støtten er ujævn?