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

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.

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

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

   Valitse koko ja paksuus

   Välit riippuvat molemmista. Päätä ne ensin, sillä paksumpi leikkaus tai suurempi koko tarvitsee eri arvot.

2. 2

   Aseta riviväli

   Päätä rivien tiiviys. Otsikot tiiviimmin, kappaleet väljemmin.

3. 3

   Aseta tyylin kirjainväli

   Käytä samaa kirjainväliarvoa koko otsikko-, tunnus- tai leipätekstityylissä. Pidä se yhtenäisenä suunnitelmassa.

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

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

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

Pidä arvot samassa paikassa, jotta jokainen sivu käyttää saman tehtävän teksteissä samoja välejä. Se on typografiajärjestelmän 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.