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

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.

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

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 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 forklarer sperring generelt; for versaler spesielt kan du bruke disse utgangspunktene.

Store versaler kan også trenge manuell kerning på vanskelige par som AV, LT og TY, der standardavstanden ser for bred ut. Sperring og 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.

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

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 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 hjelper uansett. Tekstoppsett for innlegg i sosiale medier viser hvordan nivåene passer sammen.

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.