Versaaliteksti: milloin isot kirjaimet auttavat

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

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

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 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 selittää yleisen välistyksen. Versaaleille kokeile näitä lähtöarvoja.

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

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

Aseta myös sivun lang-attribuutti. text-transform noudattaa kielisääntöjä, mikä merkitsee esimerkiksi turkin pisteellisessä i:ssä. MDN:n ohje 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 auttaa kummassakin. Somejulkaisun tekstiasettelu näyttää tasojen yhteensovituksen.

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.