# Text med versaler: när det hjälper och när det stjälper

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

Versaler ger en etikett auktoritet och en rubrik tyngd, och gör ett stycke till en vägg. Här är var versaler förtjänar sin plats, hur mycket du ska glesa ut dem och hur du sätter dem rätt på webben.

## The short version

- Text med versaler fungerar bäst för korta etiketter, överrader, knappar och rubriker på några få ord.
- Versaler har samma höjd, så ord med enbart versaler förlorar den varierade kontur som hjälper folk att känna igen dem snabbt.
- Versaler behöver extra bokstavsavstånd: cirka 0,08 em till 0,12 em för små etiketter och 0,01 em till 0,03 em för stora rubriker.
- På webben skriver du texten med vanliga gemener och lägger på versaler med CSS text-transform, så att kopiering, översättning och skärmläsare får de naturliga orden.
- Långa stycken, brödtext och allt som redan är högljutt ska stå med vanlig stor bokstav i början av meningen.

**Text med versaler** hjälper när den är kort: en överrad ovanför en rubrik, en etikett, en knapp, ett datum eller en rubrik på två eller tre ord. Den stjälper när den blir lång. Versaler har alla samma höjd, så ett ord med versaler blir en slät rektangel i stället för en igenkännbar form, och en mening av dem är långsammare att läsa och låter som skrik. Använda kort och med lite extra bokstavsavstånd ger versaler ordning och auktoritet, men används de till allt plattar de ut hierarkin.

## Därför är versaler svårare att läsa

Gemener har överlängder (b, d, h, k) och underlängder (g, p, y). Tillsammans ger de varje ord en särskiljande kontur, och vana läsare använder den konturen för att känna igen välkända ord utan att stava dem. I versaler sitter varje bokstav mellan samma två linjer. Konturen blir en ruta, och läsaren måste titta noggrannare på varje bokstav. Över två eller tre ord är det bra. Över ett stycke är det tröttande.

Ett inlägg i porträttformat där rubriken, datumet och detaljerna alla är satta i versaler och konkurrerar om uppmärksamheten

Allt i versaler: inget sticker ut eftersom allt skriker.

Samma inlägg med bara datumet i små versaler och rubriken och detaljerna med vanlig stor bokstav i början

Versaler sparade till den lilla överraden. Rubriken och detaljerna läses snabbare med vanliga gemener.

## När versaler fungerar

- **Överrader och ingressrubriker**: en liten kategori eller ett datum ovanför rubriken, som *NYHET* eller *AVSNITT 12*. Versaler säger åt läsaren att det är en etikett, inte innehåll.
- **Navigering och knappar**: korta, skanningsbara ord där varje post är samma sorts sak.
- **Korta rubriker på ett till tre ord**: *REA*, *NU ÖPPET*, *SLUTSÅLT*. Blockets form blir en del av designen.
- **Ordbilder och logotyper**: många starka logotyper är satta i versaler, där ordet ses som en fast bild snarare än läses.
- **Dataetiketter och tabellrubriker**: korta rubriker i versaler ovanför kolumner håller dem skilda från värdena under.

## När versaler stjälper

### Håll borta från versaler

- Brödtext och stycken
- Rubriker längre än ungefär fyra ord
- Varje rubrik på en sida på en gång
- Skrivstil och dekorativa typsnitt
- Budskap som ska kännas lugna eller vänliga
- Juridisk text och villkor

### Bra i versaler

- Överrader och etiketter
- Knappar och navigering
- Rubriker på ett till tre ord
- Robusta sans- och slab-typsnitt
- Rea, öppningar och brådskande skyltar
- Tabell- och diagramrubriker

Skrivstilar förtjänar en särskild varning: deras versaler är ritade för att inleda ord, inte för att sitta ihop, och ett ord i skrivstilsversaler är ofta nästan oläsligt. Tonen spelar också roll. Versaler läses som högljudda, vilket passar en rea och undergräver en ursäkt. Om du väljer mellan stilar för rubriker mer allmänt tar [gemener eller versaler i rubriker](https://gradiently.design/sv/guide/title-case-vs-sentence-case) upp de lugnare alternativen.

## Hur mycket bokstavsavstånd versaler behöver

Typsnitt är avståndsatta för gemener. Versaler som står bredvid varandra, med sina raka sidor och breda former, ser trånga ut med standardavstånd. Att öppna spationeringen ger varje bokstav utrymme och gör ordet lättare att skanna. Ju mindre text, desto mer avstånd behöver den. [Bokstavsavstånd](https://gradiently.design/sv/guide/letter-spacing) förklarar spationering i allmänhet, och för just versaler kan du utgå från de här värdena.

| Användning | Storlek | Bokstavsavstånd |
| --- | --- | --- |
| Pytteliten etikett eller överrad | 11 till 13 px på skärm, 28 till 32 px på ett inlägg på 1080 px | 0,08 em till 0,12 em |
| Knapp eller navigering | 14 till 16 px | 0,04 em till 0,08 em |
| Underrubrik i versaler | 18 till 24 px | 0,04 em till 0,06 em |
| Stor rubrik i versaler | 48 px och uppåt | 0,01 em till 0,03 em |
| Enormt displayord | 120 px och uppåt | 0 till 0,02 em, kontrollera par med ögat |

Startvärden i em, så att avståndet skalar med storleken. Justera med ögat för ditt typsnitt.

Stora versaler kan också behöva manuell kerning på besvärliga par som AV, LT och TY, där standardgapet ser för brett ut. [Spationering eller kerning](https://gradiently.design/sv/guide/tracking-vs-kerning) förklarar skillnaden mellan de två justeringarna.

## Använda text-transform uppercase i CSS

Skriv orden med vanliga gemener i din HTML och lägg på versaler med CSS. Kopiering, sökresultat och översättningsverktyg får då naturlig text, och du undviker risken att en skärmläsare tolkar ett ord skrivet i versaler som en förkortning och stavar det. Det låter dig också ändra dig senare utan att skriva om något.

```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` lyfter skiljetecken så att de sitter centrerade på versaler. `all-small-caps` ger ett lugnare alternativ till fulla versaler.

Sätt också sidans `lang`-attribut. `text-transform` följer språkregler, vilket spelar roll för ord som det turkiska i med prick, och [MDN-referensen](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) noterar hur varje språk hanteras. Översatta etiketter är ofta längre än de engelska, och versaler gör dem ännu bredare, så lämna plats i knappar och flikar.

## Versaler i inlägg på sociala medier

På en telefon kan versaler i små storlekar hålla bättre än små gemener, eftersom deras former är enklare. Det gör versaler till ett bra val för de små detaljerna i ett inlägg: ett datum, ett användarnamn, ett sidnummer i en karusell. För rubriken, använd versaler bara om den är mycket kort, annars läses vanlig stor bokstav i början snabbare i det ögonblick någon ger ett inlägg. Ett robust [rubriktypsnitt](https://gradiently.design/sv/guide/headline-fonts) hjälper oavsett. [Textlayout för inlägg i sociala medier](https://gradiently.design/sv/guide/text-hierarchy-social) visar hur nivåerna passar ihop.

En stående story med NU ÖPPET i stora versaler, en liten överrad i versaler och en detaljrad med vanlig stor bokstav

Två ord som fungerar i versaler, med de längre detaljerna i vanlig stor bokstav under.

I Gradiently skriver Designer rubriker och detaljer åt dig och lägger ut dem på din Mark, och varje ord förblir redigerbart i Studio efteråt. Auto-bläck håller små etiketter i versaler lika läsbara som rubriken genom att välja ljus eller mörk text för varje rad ur Markens palett.

## FAQ

### Är text med versaler svårare att läsa?

För mer än några ord, ja. Versaler har en och samma höjd, så orden förlorar sin igenkännbara kontur och tar längre tid att läsa.

### Hur mycket bokstavsavstånd ska versaler ha?

Cirka 0,08 em till 0,12 em för små etiketter, 0,04 em till 0,06 em för underrubriker och 0,01 em till 0,03 em för stora rubriker.

### Ska jag skriva med versaler eller använda text-transform uppercase?

Använd `text-transform: uppercase` på text med vanliga gemener. Kopiering, översättning och skärmläsare får då de naturliga orden.

### Ser rubriker med versaler ut som skrik?

Långa gör det. Ett till tre ord i versaler läses som tryggt, men en hel mening läses som skrik.