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

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.

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

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 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 förklarar spationering i allmänhet, och för just versaler kan du utgå från de här värdena.

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 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.

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

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 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 hjälper oavsett. Textlayout för inlägg i sociala medier visar hur nivåerna passar ihop.

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.