# Kirjainväli, parivälistys ja riviväli: typografian välit

[Canonical HTML page](https://gradiently.design/fi/guide/tracking-vs-kerning)

Kolme sanaa kolmelle eri välille. Jos sekoitat ne, korjaat väärää kohtaa. Tässä kerrotaan, mitä kukin säätää, mistä aloittaa ja mitkä arvot toimivat lähtökohtina.

## The short version

- Kirjainväli muuttaa rivin tai tekstialueen kaikkien kirjainten välejä yhtä aikaa.
- Parivälistys muuttaa yhden tietyn kirjainparin, kuten A:n ja V:n, väliä.
- Riviväli on tekstirivien pystysuuntainen etäisyys, jota CSS ja useimmat sovellukset kutsuvat rivikorkeudeksi.
- Aseta ensin koko tyylin riviväli ja kirjainväli. Säädä sitten yksittäisiä kirjainpareja vain suuressa tekstissä.
- Suuret otsikot tarvitsevat yleensä hieman tiiviimmän kirjain- ja rivivälin, kun taas versaali ja pieni teksti tarvitsevat enemmän kirjainväliä.

**Kirjainväli ja parivälistys** eroavat vaikutusalueeltaan. Kirjainväli eli tracking säätää valinnan jokaisen kirjaimen väliä, jolloin kokonainen otsikko avautuu tai tiivistyy tasaisesti. Parivälistys eli kerning säätää yhtä tiettyä paria, esimerkiksi sanan WAVE A:ta ja V:tä, ja korjaa kirjasimen jättämän aukon. Kolmas, riviväli eli leading, ei liity vierekkäisiin kirjaimiin: se on pystysuuntainen etäisyys tekstiriviltä seuraavalle.

| Termi | Mitä se muuttaa | Vaikutusalue | CSS-nimi |
| --- | --- | --- | --- |
| Kirjainväli | Kaikkien kirjainten väli | Sana, rivi tai kappale | `letter-spacing` |
| Parivälistys | Yhden kirjainparin väli | Kaksi merkkiä | `font-kerning` (vain päällä tai pois) |
| Riviväli | Rivien väli | Kappale tai tekstilaatikko | `line-height` |

Kolme väliä yhdellä silmäyksellä. Kaksi toimii vaakasuunnassa, yksi pystysuunnassa, ja vain yksi koskee yksittäistä paria.

## Mitä kirjainväli tarkoittaa typografiassa

Kirjainväli on tasainen muutos. Valitse rivi, lisää kirjainväliä, ja jokainen väli kasvaa saman verran. Sillä muutat tekstin *rakennetta*: ilmavaksi ja muodolliseksi tai tiiviiksi ja iskeväksi. Suunnitteluohjelmissa sitä mitataan em-yksikön tuhannesosina (Adobe) tai prosenttina kirjasinkoosta (Figma). CSS:ssä nimi on `letter-spacing`, ja paras yksikkö on em, jotta väli skaalautuu tekstin mukana.

Kirjainväliä tarvitaan kolmessa tilanteessa. Suuret otsikot näyttävät yleensä väljiltä oletusväleillään, joten pieni negatiivinen kirjainväli tiivistää niitä. Versaalit näyttävät ahtailta, sillä isot kirjaimet on suunniteltu pienten rinnalle. Ne tarvitsevat siis positiivista kirjainväliä. Hyvin pieni teksti, kuten tunnukset ja juridiset rivit, on helpompaa lukea hieman ilmavampana. [Kirjainväli](https://gradiently.design/fi/guide/letter-spacing) käsittelee tilanteet tarkemmin.

## Mitä parivälistys tarkoittaa

Parivälistys on paikallinen korjaus. Jotkin kirjainparit jättävät näkyvän aukon tai törmäävät toisiinsa myös hyvin välistetyssä kirjasimessa: AV, To, LT, Yo ja P, jota seuraa piste. Kirjasimissa on näille pareille taulukko ja automaattinen säätö, joten leipätekstin parivälistykseen ei tarvitse puuttua. Otsikoissa, logoissa ja sanamerkeissä yhtä tai kahta paria voi silti joutua säätämään käsin. [Parivälistys](https://gradiently.design/fi/guide/kerning) sisältää hankalien parien listan ja keinon korjata niitä silmämääräisesti.

## Mitä riviväli tarkoittaa typografiassa

Leading saa nimensä lyijysuikaleista, jotka painajat asettivat metallikirjasinten rivien väliin. Nykyään se on rivikorkeus: etäisyys perusviivalta seuraavalle. Liian pieni väli saa ylä- ja alapidennykset törmäämään, liian suuri hajottaa rivit erillisiksi ajatuksiksi. Yleensä mitä pidempi rivi ja pienempi teksti, sitä enemmän riviväliä tarvitaan. [Rivikorkeus ja rivin pituus](https://gradiently.design/fi/guide/line-height-and-line-length) kertoo miksi.

Pystyjulkaisu, jossa väljä versaalinen UUSI KAUSI on tiiviin Kevätmallisto nyt saatavilla -otsikon yläpuolella

Kunkin säädön paikka: väljä kirjainväli versaalissa yläotsikossa, tiivis kirjain- ja riviväli otsikossa ja tavalliset välit tietorivillä.

Pystymallinen toimituksellinen julkaisu, jossa väljä tunnus NUMERO 04 ja otsikko Muistiinpanoja studiosta

Julkaisumainen asettelu. Pienet tekstit, tunnus ja alaotsikko, tuntuvat rauhallisemmilta reilulla rivivälillä ja hieman väljällä kirjainvälillä.

## Mitä säädetään ensin: kirjainväli, parivälistys vai riviväli

Etene suurimmasta päätöksestä pienimpään. Rivi- ja kirjainväli määrittävät tyylin; parivälistys viimeistelee loput. Väärä järjestys saa sinut tekemään oman työsi uudelleen.

1. **Valitse koko ja paksuus** Välit riippuvat molemmista. Päätä ne ensin, sillä paksumpi leikkaus tai suurempi koko tarvitsee eri arvot.
2. **Aseta riviväli** Päätä rivien tiiviys. Otsikot tiiviimmin, kappaleet väljemmin.
3. **Aseta tyylin kirjainväli** Käytä samaa kirjainväliarvoa koko otsikko-, tunnus- tai leipätekstityylissä. Pidä se yhtenäisenä suunnitelmassa.
4. **Säädä yhä aukolliset kirjainparit** Vain suuressa tai pysyvässä tekstissä. Etsi AV-, To-, LT- ja vastaavat parit ja säädä niitä yksi kerrallaan.
5. **Tarkista todellisessa koossa** Katso tulosta koossa, jossa ihmiset näkevät sen. Suurennettuna oikealta näyttävät välit voivat tuntua puhelimella löysiltä.

## Kirjain- ja rivivälin lähtöarvot

Nämä ovat järkeviä oletuksia, eivät lakeja. Kirjasimet eroavat, eikä kapea näyttökirjasin käyttäydy kuten leveä geometrinen päätteetön kirjasin. Aloita näistä ja luota sitten silmääsi.

| Tekstin tehtävä | Kirjainväli (CSS) | Kirjainväli (Adobe-yksiköt) | Riviväli |
| --- | --- | --- | --- |
| Leipäteksti, 14-20 px | 0 | 0 | 1,4-1,6 |
| Otsikko, vähintään 48 px | -0,01em ... -0,03em | -10 ... -30 | 1,0-1,15 |
| Hyvin suuri teksti, vähintään 120 px | -0,02em ... -0,04em | -20 ... -40 | 0,9-1,05 |
| Versaalitunnukset | 0,06em ... 0,12em | 60-120 | 1,2-1,3 |
| Pieni teksti, alle 13 px | 0,01em ... 0,02em | 10-20 | 1,4-1,5 |

CSS:n em ja Adoben em-tuhannesosat kuvaavat samaa kirjainväliä: `0.05em` on 50 yksikköä. Riviväli näytetään kirjasinkoon kertoimena.

### Tavalliset virheet

- Jokaisen parin säätö, kun kirjainväli on väärä
- Leipätekstin tiivistäminen suuremman sanamäärän vuoksi
- Oletusriviväli kolmirivisessä otsikossa
- Versaali ilman lisäkirjainväliä
- Eri kirjainväli sarjan jokaisessa otsikossa

### Parempi tapa

- Korjaa ensin kirjainväli, sitten jäljelle jäävät parit
- Muokkaa sen sijaan tekstiä
- Laske otsikon riviväli noin 1,1:een
- Avaa versaalia vähintään `0.06em`
- Yksi arvo tyylille, kirjattuna brändisääntöihin

## Kirjainväli, parivälistys ja riviväli CSS:ssä

```css
:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

Kirjoita `line-height` ilman yksikköä ja `letter-spacing` em-yksikköinä, jotta molemmat skaalautuvat kirjasinkoon mukana.

Pidä arvot samassa paikassa, jotta jokainen sivu käyttää saman tehtävän teksteissä samoja välejä. Se on [typografiajärjestelmän](https://gradiently.design/fi/guide/brand-typography-system) ydin. Sama pätee somejulkaisuihin: päätä välit kerran, kirjaa ne brändisääntöihin ja käytä uudelleen. Gradientlyssä brändipaketti sisältää otsikko- ja leipätekstikirjasimesi, ja Designer käyttää niitä uusia kokoja sommitellessaan. Teksti pysyy siis yhtenäisenä neliöjulkaisusta tarinaan.

## FAQ

### Mitä eroa on kirjainvälillä ja parivälistyksellä?

Kirjainväli muuttaa valinnan kaikkien kirjainten välejä. Parivälistys muuttaa yhden tietyn kirjainparin väliä.

### Onko leading sama kuin rivikorkeus?

Käytännössä kyllä. Leading on perinteinen painotermi, ja CSS sekä useimmat suunnitteluohjelmat kutsuvat rivien etäisyyttä rivikorkeudeksi.

### Säädänkö ensin kirjainvälin vai parivälistyksen?

Kirjainvälin. Se määrittää yleisen välistyksen. Parivälistys korjaa sitten muutamat yhä epätasaiset parit, ja sitä tarvitaan vain suuressa tekstissä.

### Mikä on kirjainvälin CSS-nimi?

`letter-spacing`. Käytä em-yksikköä, kuten `0.05em`, jotta väli säilyy suhteellisena kirjasinkoon muuttuessa.

### Mikä rivikorkeus leipätekstillä pitäisi olla?

Noin 1,4-1,6 kertaa kirjasinkoko leipätekstissä ja noin 1,0-1,15 suurissa otsikoissa.