# Tekst med store bogstaver: hvornår det hjælper, og hvornår det skader

[Canonical HTML page](https://gradiently.design/da/guide/all-caps-typography)

Versaler giver en label autoritet og en overskrift vægt, og gør et afsnit til en mur. Her er, hvor store bogstaver fortjener deres plads, hvor meget afstand de skal have, og hvordan du sætter dem rigtigt på nettet.

## The short version

- Tekst med store bogstaver virker bedst til korte labels, overlinjer, knapper og overskrifter på få ord.
- Versaler har samme højde, så ord med store bogstaver mister den varierede kontur, der hjælper folk med at genkende dem hurtigt.
- Store bogstaver har brug for ekstra bogstavafstand: omkring 0,08em til 0,12em til små labels og 0,01em til 0,03em til store overskrifter.
- På nettet bør du skrive teksten med almindelige bogstaver og anvende versaler med CSS text-transform, så kopiering, oversættelse og skærmlæsere får de naturlige ord.
- Lange passager, brødtekst og alt, der allerede er højt, bør stå med almindelig sætningsstil.

**Tekst med store bogstaver** hjælper, når den er kort: en overlinje over en overskrift, en label, en knap, en dato eller en overskrift på to eller tre ord. Den skader, når den bliver lang. Versaler har alle samme højde, så et ord med store bogstaver bliver et almindeligt rektangel i stedet for en genkendelig form, og en hel sætning af dem er langsommere at læse og virker som råben. Brugt kort og med lidt ekstra bogstavafstand giver versaler orden og autoritet. Brugt til alt flader de hierarkiet ud.

## Hvorfor store bogstaver er sværere at læse

Små bogstaver har overlængder (b, d, h, k) og underlængder (g, p, y). Sammen giver de hvert ord en karakteristisk kontur, og øvede læsere bruger den kontur til at genkende kendte ord uden at stave dem. Med versaler sidder hvert bogstav mellem de samme to linjer. Konturen bliver en æske, og læseren må kigge nøjere på hvert bogstav. Over to eller tre ord er det fint. Over et afsnit er det trættende.

Et opslag i højformat, hvor overskrift, dato og detaljer alle er sat med store bogstaver og konkurrerer om opmærksomheden

Alt med versaler: intet skiller sig ud, fordi alt råber.

Det samme opslag, hvor kun datoen står med små versaler, og overskrift og detaljer står med almindelige bogstaver

Versaler gemt til den lille overlinje. Overskriften og detaljerne læses hurtigere med almindelige bogstaver.

## Hvornår store bogstaver virker

- **Overlinjer og kickere**: en lille kategori eller dato over overskriften, som *NYHED* eller *AFSNIT 12*. Versaler fortæller læseren, at det er en label, ikke indhold.
- **Navigation og knapper**: korte ord, der er lette at skimme, hvor hvert punkt er den samme slags ting.
- **Korte overskrifter på et til tre ord**: *UDSALG*, *NU ÅBENT*, *UDSOLGT*. Blokkens form bliver en del af designet.
- **Ordmærker og logoer**: mange stærke logoer er sat med versaler, hvor ordet ses som et fast billede frem for at blive læst.
- **Datalabels og tabeloverskrifter**: korte versaler over kolonner holder dem adskilt fra værdierne nedenunder.

## Hvornår store bogstaver skader

### Hold uden for versaler

- Brødtekst og afsnit
- Overskrifter længere end cirka fire ord
- Alle overskrifter på en side på én gang
- Håndskrift- og dekorative skrifttyper
- Budskaber, der skal føles rolige eller venlige
- Juridisk tekst og vilkår

### Godt med versaler

- Overlinjer og labels
- Knapper og navigation
- Overskrifter på et til tre ord
- Solide sans- og slab-skrifttyper
- Udsalg, åbninger og presserende skilte
- Overskrifter i tabeller og diagrammer

Håndskriftsskrifttyper fortjener en særlig advarsel: deres versaler er designet til at starte ord, ikke til at stå sammen, og et ord i håndskriftsversaler er ofte næsten ulæseligt. Tonen betyder også noget. Versaler lyder højt, hvilket passer til et udsalg og underminerer en undskyldning. Hvis du vælger mellem skrivemåder til overskrifter mere generelt, dækker [sætningsstil og titelstil](https://gradiently.design/da/guide/title-case-vs-sentence-case) de mere dæmpede muligheder.

## Hvor meget bogstavafstand store bogstaver har brug for

Skrifttyper er afstandsindstillet til små bogstaver. Versaler side om side, med deres lige sider og brede former, ser trange ud ved standardafstand. Når du åbner afstanden, får hvert bogstav luft, og ordet bliver lettere at skimme. Jo mindre tekst, jo mere afstand har den brug for. [Bogstavafstand](https://gradiently.design/da/guide/letter-spacing) forklarer afstand generelt. For versaler specifikt kan du bruge disse udgangspunkter.

| Brug | Størrelse | Bogstavafstand |
| --- | --- | --- |
| Lille label eller overlinje | 11 til 13 px på skærm, 28 til 32 px på et opslag på 1080 px | 0,08em til 0,12em |
| Knap eller navigation | 14 til 16 px | 0,04em til 0,08em |
| Underoverskrift med versaler | 18 til 24 px | 0,04em til 0,06em |
| Stor overskrift med versaler | 48 px og op | 0,01em til 0,03em |
| Kæmpe displayord | 120 px og op | 0 til 0,02em, tjek par med øjet |

Udgangsværdier i em, så afstanden skalerer med størrelsen. Justér med øjet til din skrifttype.

Store versaler kan også have brug for håndkerning på akavede par som AV, LT og TY, hvor standardafstanden ser for bred ud. [Tracking og kerning](https://gradiently.design/da/guide/tracking-vs-kerning) forklarer forskellen på de to justeringer.

## Sådan bruger du text-transform uppercase i CSS

Skriv ordene med almindelige bogstaver i din HTML, og anvend versaler med CSS. Kopiering, søgeresultater og oversættelsesværktøjer får så naturlig tekst, og du undgår risikoen for, at en skærmlæser behandler et ord skrevet med versaler som en forkortelse og staver det. Det lader dig også skifte mening senere uden at skrive noget om.

```css
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  /* Raise hyphens, brackets and colons to suit capitals, if the font has it */
  font-feature-settings: "case" 1;
}

/* Small capitals: lowercase letters drawn as smaller capitals */
.label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}
```

Funktionen `case` løfter tegnsætning, så den sidder centreret på versaler. `all-small-caps` giver et mere dæmpet alternativ til fulde versaler.

Sæt også sidens `lang`-attribut. `text-transform` følger sprogets regler, hvilket betyder noget for ord som det tyrkiske i med prik, og [MDN-referencen](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) beskriver, hvordan hvert sprog håndteres. Oversatte labels er ofte længere end de engelske, og versaler gør dem endnu bredere, så lad der være plads i knapper og faner.

## Store bogstaver på opslag på sociale medier

På en telefon kan versaler i små størrelser holde bedre end små bogstaver, fordi deres former er enklere. Det gør versaler til et godt valg til de små detaljer på et opslag: en dato, et profilnavn, et sidetal på en karrusel. Til overskriften bør du kun bruge versaler, hvis den er meget kort. Ellers læses almindelige bogstaver hurtigere i det øjeblik, nogen giver et opslag. En solid [overskriftsskrifttype](https://gradiently.design/da/guide/headline-fonts) hjælper under alle omstændigheder. [Tekstlayout til opslag på sociale medier](https://gradiently.design/da/guide/text-hierarchy-social) viser, hvordan niveauerne passer sammen.

En lodret story med NU ÅBENT med store versaler, en lille overlinje med versaler og en detaljelinje med almindelige bogstaver

To ord, der virker med versaler, mens de længere detaljer står med almindelige bogstaver nedenunder.

I Gradiently skriver Designeren overskrifter og detaljer for dig og lægger dem ud på din Mark, og hvert ord forbliver redigerbart i Studio bagefter. Automatisk tekstfarve holder små labels med versaler lige så læselige som overskriften ved at vælge lys eller mørk skrift til hver linje ud fra Markens palet.

## FAQ

### Er tekst med store bogstaver sværere at læse?

Ved mere end nogle få ord, ja. Versaler har samme højde, så ord mister deres genkendelige kontur og tager længere tid at læse.

### Hvor meget bogstavafstand skal store bogstaver have?

Omkring 0,08em til 0,12em til små labels, 0,04em til 0,06em til underoverskrifter og 0,01em til 0,03em til store overskrifter.

### Skal jeg skrive med versaler eller bruge text-transform uppercase?

Brug `text-transform: uppercase` på tekst med almindelige bogstaver. Kopiering, oversættelse og skærmlæsere får så de naturlige ord.

### Ligner overskrifter med store bogstaver råben?

Lange gør. Et til tre ord med versaler virker selvsikkert. En hel sætning virker som råben.