# Versaaliteksti: milloin isot kirjaimet auttavat

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

Isot kirjaimet antavat tunnisteelle arvovaltaa ja otsikolle painoa, mutta muuttavat kappaleen seinäksi. Näin valitset versaalien paikan, välistyksen ja oikean verkkototeutuksen.

## The short version

- Versaaliteksti sopii parhaiten lyhyisiin tunnisteisiin, yläotsikoihin, painikkeisiin ja muutaman sanan otsikoihin.
- Isot kirjaimet ovat samankorkuisia, joten versaalisanat menettävät nopeaa tunnistamista auttavan vaihtelevan ääriviivan.
- Versaalit tarvitsevat lisävälistystä: pienille tunnisteille noin 0,08em-0,12em ja suurille otsikoille 0,01em-0,03em.
- Kirjoita verkkoteksti normaalisti ja muuta se versaaleiksi CSS:n text-transformilla, jotta kopiointi, käännökset ja ruudunlukijat saavat luonnolliset sanat.
- Pitkät jaksot, leipäteksti ja jo valmiiksi voimakas sisältö kannattaa pitää tavallisessa kirjainkoossa.

**Versaaliteksti** auttaa lyhyenä: otsikon pieni yläteksti, tunniste, painike, päivämäärä tai kahden tai kolmen sanan otsikko. Pitkänä se haittaa. Isot kirjaimet ovat samankorkuisia, joten sanasta tulee tunnistettavan muodon sijaan suorakulmio. Lause hidastaa lukemista ja tuntuu huutamiselta. Lyhyesti ja lisävälistyksellä versaalit tuovat järjestystä ja arvovaltaa. Kaikkialla käytettyinä ne latistavat hierarkian.

## Miksi versaalit ovat vaikeampia lukea

Pienaakkosissa on yläpidennyksiä (b, d, h, k) ja alapidennyksiä (g, p, y). Ne antavat sanalle oman ääriviivan, josta harjaantunut lukija tunnistaa tutun sanan tavaamatta. Versaaleissa jokainen kirjain on samojen kahden linjan välissä. Ääriviivasta tulee laatikko ja lukijan on katsottava kirjaimia tarkemmin. Kahdessa tai kolmessa sanassa se käy, kappaleessa väsyttää.

Pystyjulkaisu, jossa otsikko, päivä ja tiedot kilpailevat huomiosta isoilla kirjaimilla

Kaikki versaaleilla: mikään ei erotu, sillä kaikki huutaa.

Sama julkaisu, jossa vain päivä on pienellä versaalitekstillä ja muut tekstit tavallisessa kirjainkoossa

Versaalit vain pienessä ylätekstissä. Otsikko ja tiedot ovat nopeampia lukea tavallisessa kirjainkoossa.

## Milloin versaalit toimivat

- **Ylätekstit ja tunnisteet**: pieni luokka tai päivä otsikon yllä, kuten *UUTTA* tai *JAKSO 12*. Versaalit kertovat sen olevan tunniste, ei sisältöä.
- **Navigointi ja painikkeet**: lyhyet silmäiltävät sanat, joissa kaikki kohdat ovat samaa tyyppiä.
- **Yhden tai kolmen sanan otsikot**: *ALE*, *NYT AUKI*, *LOPPUUNMYYTY*. Tekstilohkon muoto on osa suunnitelmaa.
- **Nimilogot ja logot**: moni vahva logo on versaaleilla, jolloin sana nähdään kiinteänä kuvana lukemisen sijaan.
- **Datatunnisteet ja taulukko-otsikot**: lyhyet versaaliotsikot erottuvat alla olevista arvoista.

## Milloin versaalit haittaavat

### Vältä versaaleja

- Leipätekstissä ja kappaleissa
- Yli noin neljän sanan otsikoissa
- Sivun kaikissa otsikoissa yhtä aikaa
- Kauno- ja koristekirjasimissa
- Rauhallisuutta tai ystävällisyyttä vaativissa viesteissä
- Lakiteksteissä ja ehdoissa

### Hyviä versaaleilla

- Ylätekstit ja tunnisteet
- Painikkeet ja navigointi
- Yhden tai kolmen sanan otsikot
- Tukevat groteskit ja slab-antiikvat
- Alennukset, avaukset ja kiireelliset kyltit
- Taulukkojen ja kaavioiden otsikot

Kaunokirjasimia pitää varoa erityisesti. Niiden isot kirjaimet on suunniteltu sanan alkuun, eivät vierekkäin. Pelkistä isoista kaunokirjaimista koostuva sana on usein lähes lukukelvoton. Äänensävykin merkitsee: versaalit ovat äänekkäitä, mikä sopii aleen mutta heikentää anteeksipyyntöä. [Tavallinen kirjainkoko ja otsikkokoko](https://gradiently.design/fi/guide/title-case-vs-sentence-case) käsittelee rauhallisempia vaihtoehtoja.

## Kuinka paljon välistystä versaalit tarvitsevat

Fonttien välit on suunniteltu pienaakkosille. Vierekkäisten versaalien suorat sivut ja leveät muodot näyttävät ahtailta oletusväleillä. Lisävälistys antaa kirjaimille tilaa ja helpottaa silmäilyä. Pieni teksti tarvitsee enemmän tilaa. [Kirjainvälistys](https://gradiently.design/fi/guide/letter-spacing) selittää yleisen välistyksen. Versaaleille kokeile näitä lähtöarvoja.

| Käyttö | Koko | Kirjainvälistys |
| --- | --- | --- |
| Pieni tunniste tai yläteksti | 11-13 px näytöllä, 28-32 px koon 1080 px julkaisussa | 0,08em-0,12em |
| Painike tai navigointi | 14-16 px | 0,04em-0,08em |
| Versaaliväliotsikko | 18-24 px | 0,04em-0,06em |
| Suuri versaaliotsikko | 48 px ja enemmän | 0,01em-0,03em |
| Valtava näyttösana | 120 px ja enemmän | 0-0,02em, tarkista parit silmällä |

Lähtöarvot em-yksiköissä, joten välistys skaalautuu koon mukana. Säädä fontillesi silmämääräisesti.

Suuret versaalit voivat tarvita käsin parivälistystä hankalissa pareissa kuten AV, LT ja TY, joissa oletusväli näyttää liian leveältä. [Yleisvälistys ja parivälistys](https://gradiently.design/fi/guide/tracking-vs-kerning) selittää eron.

## text-transform uppercase CSS:ssä

Kirjoita HTML:n sanat normaalisti ja käytä CSS:ää versaaleihin. Kopiointi, hakutulokset ja käännöstyökalut saavat luonnollisen tekstin. Samalla vältät ruudunlukijan riskin tulkita isoilla kirjoitettu sana lyhenteeksi ja tavata se. Voit myös muuttaa mielesi myöhemmin kirjoittamatta uudelleen.

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

`case`-ominaisuus nostaa välimerkit versaalien keskelle. `all-small-caps` antaa täysiä versaaleja rauhallisemman vaihtoehdon.

Aseta myös sivun `lang`-attribuutti. `text-transform` noudattaa kielisääntöjä, mikä merkitsee esimerkiksi turkin pisteellisessä i:ssä. [MDN:n ohje](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) kertoo kielten käsittelystä. Käännetyt tunnisteet ovat usein englantia pidempiä, ja versaalit leventävät niitä lisää. Jätä tilaa painikkeisiin ja välilehtiin.

## Versaalit somejulkaisuissa

Puhelimessa pienet versaalit voivat näkyä pieniä pienaakkosia paremmin yksinkertaisempien muotojensa vuoksi. Siksi ne sopivat julkaisun pieniin tietoihin: päivään, käyttäjätunnukseen tai karusellin sivunumeroon. Käytä otsikossa versaaleja vain hyvin lyhyenä. Muuten tavallinen kirjainkoko on nopeampi lukea. Tukeva [otsikkofontti](https://gradiently.design/fi/guide/headline-fonts) auttaa kummassakin. [Somejulkaisun tekstiasettelu](https://gradiently.design/fi/guide/text-hierarchy-social) näyttää tasojen yhteensovituksen.

Pystytarina, jossa NYT AUKI on suurilla versaaleilla, pieni yläteksti versaaleilla ja tukirivi tavallisesti

Kaksi versaaleilla toimivaa sanaa ja pidemmät tiedot alla tavallisessa kirjainkoossa.

Gradientlyssä Designer kirjoittaa otsikot ja tiedot sekä asettelee ne Markillesi. Kaikki sanat pysyvät muokattavina Studiossa. Automaattinen muste pitää pienet versaalitunnisteet otsikon tavoin luettavina valitsemalla kullekin riville vaalean tai tumman tekstin Markin paletista.

## FAQ

### Onko versaaliteksti vaikeampaa lukea?

Useamman kuin muutaman sanan kohdalla kyllä. Sama korkeus hävittää sanan tunnistettavan ääriviivan ja hidastaa lukemista.

### Kuinka paljon välistystä versaalit tarvitsevat?

Noin 0,08em-0,12em pienille tunnisteille, 0,04em-0,06em väliotsikoille ja 0,01em-0,03em suurille otsikoille.

### Pitäisikö kirjoittaa isoilla vai käyttää text-transform uppercasea?

Käytä `text-transform: uppercase` tavalliselle tekstille. Kopiointi, käännökset ja ruudunlukijat saavat silloin luonnolliset sanat.

### Näyttävätkö versaaliotsikot huutamiselta?

Pitkät näyttävät. Yhdestä kolmeen sanaa versaaleilla on itsevarma, kokonainen lause huutaa.