# Tekst i versaler: når store bokstaver hjelper og når de skader

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

Store bokstaver gir en etikett autoritet og en overskrift tyngde, og gjør et avsnitt til en vegg. Her er hvor versaler gjør seg fortjent til plassen, hvor mye du skal sperre dem, og hvordan du setter dem riktig på nettet.

## The short version

- Tekst i versaler fungerer best for korte etiketter, overlinjer, knapper og overskrifter på noen få ord.
- Store bokstaver har samme høyde, så ord i versaler mister den varierte omrisset som hjelper folk å kjenne dem igjen raskt.
- Versaler trenger ekstra sperring: rundt 0,08em til 0,12em for små etiketter og 0,01em til 0,03em for store overskrifter.
- På nettet skriver du teksten med vanlige bokstaver og gjør den om til versaler med CSS text-transform, så kopiering, oversettelse og skjermlesere får de naturlige ordene.
- Lange tekstpartier, brødtekst og alt som allerede er høylytt bør stå med vanlig stor forbokstav.

**Tekst i versaler** hjelper når den er kort: en overlinje over en overskrift, en etikett, en knapp, en dato eller en overskrift på to eller tre ord. Den skader når den blir lang. Store bokstaver har alle samme høyde, så et ord i versaler blir et enkelt rektangel i stedet for en gjenkjennelig form, og en hel setning med dem er tregere å lese og oppleves som roping. Brukt kort og med litt ekstra sperring gir versaler orden og autoritet; brukt til alt, flater de ut hierarkiet.

## Hvorfor versaler er vanskeligere å lese

Små bokstaver har oversving (b, d, h, k) og undersving (g, p, y). Sammen gir de hvert ord et særpreget omriss, og øvede lesere bruker det omrisset til å kjenne igjen kjente ord uten å stave dem. I versaler står hver bokstav mellom de samme to linjene. Omrisset blir en boks, og leseren må se nøyere på hver bokstav. Over to eller tre ord går det fint. Over et avsnitt er det slitsomt.

Et stående innlegg der overskrift, dato og detaljer alle er satt i store bokstaver og konkurrerer om oppmerksomheten

Alt i versaler: ingenting skiller seg ut fordi alt roper.

Det samme innlegget med bare datoen i små versaler og overskrift og detaljer med vanlige bokstaver

Versaler bare i den lille overlinjen. Overskriften og detaljene leses raskere med vanlige bokstaver.

## Når versaler fungerer

- **Overlinjer og stikktitler**: en liten kategori eller dato over overskriften, som *NYHET* eller *EPISODE 12*. Versalene forteller leseren at det er en etikett, ikke innhold.
- **Navigasjon og knapper**: korte ord som er lette å skumme, der hvert element er samme type ting.
- **Korte overskrifter på ett til tre ord**: *SALG*, *NÅ ÅPENT*, *UTSOLGT*. Formen på blokken blir en del av designet.
- **Ordmerker og logoer**: mange sterke logoer er satt i versaler, der ordet ses som et fast bilde i stedet for å leses.
- **Dataetiketter og tabelloverskrifter**: korte overskrifter i versaler over kolonner holder dem atskilt fra verdiene under.

## Når versaler skader

### Hold unna versaler

- Brødtekst og avsnitt
- Overskrifter lengre enn rundt fire ord
- Alle overskrifter på en side samtidig
- Skriveskrift og dekorative skrifttyper
- Budskap som skal føles rolige eller vennlige
- Juridisk tekst og vilkår

### Bra i versaler

- Overlinjer og etiketter
- Knapper og navigasjon
- Overskrifter på ett til tre ord
- Robuste groteske og egyptienne-skrifter
- Salg, åpninger og hastemeldinger
- Overskrifter i tabeller og diagrammer

Skriveskrifter fortjener en egen advarsel: de store bokstavene deres er laget for å starte ord, ikke for å stå sammen, og et ord i skriveskrift med bare versaler er ofte nesten uleselig. Tonen betyr også noe. Versaler leses som høylytte, noe som passer et salg og undergraver en unnskyldning. Vurderer du ulike stiler for store bokstaver i overskrifter mer generelt, dekker [vanlig setningsform eller stor forbokstav i hvert ord](https://gradiently.design/nb/guide/title-case-vs-sentence-case) de roligere alternativene.

## Hvor mye sperring versaler trenger

Skrifttyper er spasiert for små bokstaver. Versaler side om side, med rette sider og brede former, ser trange ut med standard avstand. Å åpne sperringen gir hver bokstav plass og gjør ordet lettere å skumme. Jo mindre teksten er, jo mer luft trenger den. [Bokstavavstand](https://gradiently.design/nb/guide/letter-spacing) forklarer sperring generelt; for versaler spesielt kan du bruke disse utgangspunktene.

| Bruk | Størrelse | Sperring |
| --- | --- | --- |
| Bitteliten etikett eller overlinje | 11 til 13 px på skjerm, 28 til 32 px på et innlegg på 1080 px | 0,08em til 0,12em |
| Knapp eller navigasjon | 14 til 16 px | 0,04em til 0,08em |
| Mellomtittel i versaler | 18 til 24 px | 0,04em til 0,06em |
| Stor overskrift i versaler | 48 px og opp | 0,01em til 0,03em |
| Enormt display-ord | 120 px og opp | 0 til 0,02em, sjekk par på øyemål |

Startverdier i em, så avstanden skalerer med størrelsen. Juster på øyemål for skrifttypen din.

Store versaler kan også trenge manuell kerning på vanskelige par som AV, LT og TY, der standardavstanden ser for bred ut. [Sperring og kerning](https://gradiently.design/nb/guide/tracking-vs-kerning) forklarer forskjellen på de to justeringene.

## Slik bruker du text-transform uppercase i CSS

Skriv ordene med vanlige bokstaver i HTML-en og gjør dem om til versaler med CSS. Da får kopiering, søkeresultater og oversettelsesverktøy naturlig tekst, og du unngår risikoen for at en skjermleser behandler et ord skrevet i versaler som en forkortelse og staver det ut. Det lar deg også ombestemme deg senere uten å skrive noe på nytt.

```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;
}
```

Funksjonen `case` løfter tegnsetting så den står midt på versalene. `all-small-caps` gir et roligere alternativ til fulle versaler.

Sett også sidens `lang`-attributt. `text-transform` følger språkregler, noe som betyr noe for ord som den tyrkiske i-en med prikk, og [MDN-referansen](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) beskriver hvordan hvert språk håndteres. Oversatte etiketter er ofte lengre enn engelske, og versaler gjør dem enda bredere, så la det være plass i knapper og faner.

## Versaler i innlegg i sosiale medier

På en telefon kan versaler i små størrelser holde bedre enn små bokstaver, fordi formene er enklere. Det gjør versaler til et godt valg for de bittesmå detaljene på et innlegg: en dato, et brukernavn, et sidetall i en karusell. Til overskriften bruker du versaler bare hvis den er svært kort; ellers leses vanlig setningsform raskere i det øyeblikket noen gir et innlegg. En robust [skrifttype for overskrifter](https://gradiently.design/nb/guide/headline-fonts) hjelper uansett. [Tekstoppsett for innlegg i sosiale medier](https://gradiently.design/nb/guide/text-hierarchy-social) viser hvordan nivåene passer sammen.

En vertikal story med NÅ ÅPENT i store versaler, en liten overlinje i versaler og en detaljlinje med vanlige bokstaver

To ord som fungerer i versaler, med de lengre detaljene i vanlig setningsform under.

I Gradiently skriver Designer overskrifter og detaljer for deg og setter dem opp i Marken din, og hvert ord forblir redigerbart i Studio etterpå. Auto-tekstfarge holder små etiketter i versaler like lesbare som overskriften ved å velge lys eller mørk skrift for hver linje fra Markens palett.

## FAQ

### Er tekst i versaler vanskeligere å lese?

For mer enn noen få ord, ja. Versaler har én høyde, så ordene mister det gjenkjennelige omrisset og tar lengre tid å lese.

### Hvor mye sperring bør versaler ha?

Rundt 0,08em til 0,12em for små etiketter, 0,04em til 0,06em for mellomtitler og 0,01em til 0,03em for store overskrifter.

### Bør jeg skrive med store bokstaver eller bruke text-transform uppercase?

Bruk `text-transform: uppercase` på tekst med vanlige bokstaver. Da får kopiering, oversettelse og skjermlesere de naturlige ordene.

### Ser overskrifter i versaler ut som roping?

Lange gjør det. Ett til tre ord i versaler leses som selvsikkert; en hel setning leses som roping.