# Kerning: kirjainten välisten aukkojen korjaaminen

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

Useimmat tekstit eivät tarvitse käsityötä, koska hyvissä kirjasimissa on oma kerning. Suurissa otsikoissa ja sanalogoissa jokainen kömpelö aukko näkyy. Näin löydät ja korjaat ne.

## The short version

- Kerning säätää yhden tietyn kirjainparin, kuten A:n ja V:n tai T:n ja o:n, välistä tilaa.
- Hyvin tehdyissä kirjasimissa on satoja tai jopa tuhansia kerning-pareja, joten tavallinen leipäteksti tarvitsee harvoin käsin välistämistä.
- Käsin tehty kerning on tärkeintä suurissa otsikoissa, logoissa ja sanalogoissa, joissa epätasaiset aukot näkyvät.
- Kerningin tavoitteena on silmämääräisesti tasainen tila, ei yhtäläinen mitattu etäisyys.
- CSS:n `font-kerning: normal` ottaa kirjasimen sisäisen kerningin käyttöön. Selaimet käyttävät sitä yleensä oletuksena.

**Kerning** säätää kahden tietyn kirjaimen välistä tilaa niin, että sana näyttää tasaisesti välistetyltä. Jotkin muodot jättävät vierekkäin aukon: A:n vino viiva V:n vieressä tai T:n vaakaviiva pienen o:n yllä. Kerning tuo parit lähemmäs tai joskus siirtää liian tiiviin parin erilleen, kunnes välit näyttävät silmälle samoilta. Se eroaa yleisestä kirjainvälistyksestä, joka muuttaa koko rivin kaikkia välejä kerralla.

## Miksi jotkin kirjainparit tarvitsevat kerningiä

Kirjasimen jokainen kirjain on näkymättömässä laatikossa, jonka kummallakin puolella on hieman tilaa. Se toimii useimmissa yhdistelmissä, kuten n:n ja o:n tai h:n ja e:n välillä. Se ei toimi, kun muoto on yhdeltä puolelta avoin. Vinot viivat, ulkonevat haarat sekä pyöreät kirjaimet suorien vieressä jättävät valkoisia taskuja, jotka näyttävät puuttuvalta kirjaimelta.

| Pari | Aukon syy | Tavallinen korjaus |
| --- | --- | --- |
| AV, VA, AW, WA | Kaksi vinoa viivaa vetäytyy toisistaan | Tuo selvästi lähemmäs |
| To, Ta, Te, Ty | T:n vaakaviiva ulottuu tyhjän tilan ylle | Vie pienaakkonen vaakaviivan alle |
| LT, LY, LV | L:n jalka jättää aukon yläpuolelleen | Tuo lähemmäs, usein paljon |
| Yo, Ya, Wo, Vo | Vino suuraakkonen pyöreän pienaakkosen yllä | Vie sisemmäs kuten T-parit |
| P., F., T., Y. | Välimerkki jää ulokkeen alle | Siirrä piste tai pilkku sisäänpäin |
| r ja n, r ja m | Voivat tiukkoina sulautua yhdeksi kirjaimeksi | Avaa hieman, jos ne koskettavat |
| f ja sen jälkeen ), ? tai ’ | f:n koukku törmää | Siirrä hieman erilleen |

Yleisimmät kerning-ongelmia aiheuttavat parit. Kirjasimet korjaavat monia jo valmiiksi, mutta tarkista ne silmällä myös otsikkokoossa.

r:n ja n:n tapaus on vanhan typografivitsin pohja: liian tiukasti välistetty kerning näyttää sanalta keming. Se muistuttaa, että kerning toimii molempiin suuntiin.

## Milloin välistät käsin

Hyvä kirjasin sisältää kerning-taulukon eli listan pareista ja kunkin säädöstä. Siksi leipäteksti ja useimmat käyttöliittymätekstit on jo hoidettu. Käsin välistäminen kannattaa, kun teksti on suurta tai pysyvää.

- **Näytöllä noin yli 60 px:n otsikot**, joissa 2 px:n väli muuttuu näkyväksi aukoksi.
- **Logot ja sanalogot**, jotka nähdään tuhansia kertoja kaikissa ko’oissa. [Sanalogon suunnittelu](https://gradiently.design/fi/guide/wordmark-design) käsittelee aihetta lisää.
- **Pelkkä suuraakkosteksti**, jossa A:n, V:n, W:n ja Y:n kaltaiset vinot muodot kohtaavat useammin.
- **Julisteiden ja pikkukuvien rivit**, joissa kolme tai neljä sanaa kantaa koko suunnitelman.
- **Ilmaiset tai otsikkokirjasimet niukoilla kerning-taulukoilla**, joissa tavallisetkin parit voivat jäädä säätämättä.

Pystyjuliste, jossa sana WAVE on suurilla suuraakkosilla ja tasaisella kirjainvälistyksellä

Lähes kokonaan vinoista viivoista koostuva sana on välistyksen vaikein tapaus. Tarkista ennen vientiä, että W, A ja V asettuvat tasaisesti lomittain.

Pystymuotoinen tapahtumajulkaisu, jossa Tänään The Yardissa on suurena liukuvärin päällä

Englanninkielisen Tonight at The Yard -otsikon To, Th ja Ya mahtuvat yhteen lyhyeen riviin. Tässä koossa jokainen pari kannattaa tarkistaa ennen vientiä.

## Otsikon tai sanalogon kerning silmämääräisesti

Tavoite on tasainen *pinta-ala* kirjainten välissä, ei yhtäläinen mitattu etäisyys. Kaksi suoraa runkoa, kuten H ja I, tarvitsevat eniten tilaa. Suora ja pyöreä, kuten H ja O, hieman vähemmän. Kaksi pyöreää, kuten O ja C, vähiten. Vinoviivat ja ulokkeet tarvitsevat eniten korjausta.

1. **Aseta yleinen kirjainvälistys ensin** Päätä koko rivin välistys ennen parien säätämistä. Jos välistät parit ja muutat sen jälkeen koko rivin välistystä, puolet työstäsi kumoutuu.
2. **Työskentele kolmen kirjaimen ryhmissä** Katso kolmea kirjainta kerrallaan ja säädä keskimmäistä, kunnes sen molemmat välit vastaavat toisiaan. Siirry sitten yhden kirjaimen verran.
3. **Käännä ylösalaisin** Käännä sana tai katso sitä peilikuvana. Kun et enää lue sitä, näet kirjainten sijaan muodot ja välit.
4. **Sumenna tai siristä** Kevyt sumennus muuttaa välit harmaiksi läikiksi. Selvästi naapureitaan vaaleampi tai tummempi läikkä paljastaa korjattavan parin.
5. **Tarkista pienenä ja suurena** Katso sanaa sen käyttökoossa ja pienimmässä esiintymiskoossa. Vain julistekoossa välistetty sanalogo voi puuroutua favicon-koossa.
6. **Pidä tauko ja katso uudelleen** Palaa tauon jälkeen. Liian pitkä tuijotus vääristää silmämääräistä kerningiä, ja tuore katse löytää liian tiukaksi puristetun parin.

Useimmissa suunnittelutyökaluissa voit välistää asettamalla kohdistimen kahden kirjaimen väliin ja siirtämällä pikanäppäimellä. Adoben sovelluksissa yksikkö on em:n tuhannesosa, joten miinus 40 tuo paria lähemmäs 4 % kirjasinkoosta koosta riippumatta.

## Metrinen ja optinen kerning

Monet taittotyökalut tarjoavat kaksi automaattista tilaa. **Metrinen** kerning käyttää kirjasinsuunnittelijan määrittämiä pareja. **Optinen** ohittaa ne ja laskee välistyksen kirjainten ääriviivoista. Metrinen on hyvän kirjasimen parempi oletus, koska ihminen teki päätökset. Optinen voi pelastaa kirjasimen, jonka kerning-taulukko on huono tai puuttuu, ja auttaa kahden kirjasimen yhdistämisessä samaan sanaan.

### Vältä

- Leipätekstin välistäminen kirjain kerrallaan
- Välien mittaaminen viivaimella
- Kerning ennen yleistä kirjainvälistystä
- Tiivistäminen kirjainten kosketukseen asti
- Ilmaiskirjasimen väleihin luottaminen tarkistamatta

### Tee näin

- Jätä leipäteksti kirjasimen oman kerningin varaan
- Arvioi silmällä kolme kirjainta kerrallaan
- Aseta yleinen välistys, korjaa sitten parit
- Pidä hiuksenhieno väli, etenkin r:n ja n:n välillä
- Tarkista AV, To, LT ja Yo jokaisessa otsikossa

## Kerning CSS:ssä

Selaimet käyttävät kirjasimen kerningiä automaattisesti useimmissa teksteissä, mutta voit määrittää sen erikseen. [font-kerning](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) ottaa sisäiset parit käyttöön tai pois. CSS:ssä ei ole ominaisuutta yksittäisen parin säätöön, joten yhden otsikon tai logon tavallinen ratkaisu on kääriä kirjain span-elementtiin ja siirtää sitä negatiivisella marginaalilla tai kirjainvälistyksellä.

```css
/* Use the font's own kerning pairs everywhere */
body {
  font-kerning: normal;
}

/* Hand kerning one pair in a large headline: <h1>A<span class="k-av">V</span>A</h1> */
.k-av {
  margin-inline-start: -0.06em;
}

/* Monospaced code should never be kerned */
code, pre {
  font-kerning: none;
}
```

Käytä käsisäädöissä em-yksiköitä, jotta korjaus skaalautuu tekstin mukana. Välistä käsin vain otsikot, älä leipätekstiä.

Koko rivin välistys yhden parin sijaan on yleistä kirjainvälistystä, jota säädetään `letter-spacing`-ominaisuudella. [Yleinen kirjainvälistys ja kerning](https://gradiently.design/fi/guide/tracking-vs-kerning) selittää niiden yhteistyön rivivälin kanssa. [Kirjainvälistys](https://gradiently.design/fi/guide/letter-spacing) antaa lähtöarvot suuraakkosille, nimikkeille ja otsikoille.

Suurten tekstien harkitusta ilmeestä kertovat [otsikkokirjasimet](https://gradiently.design/fi/guide/display-fonts) ja [typografian perusteet](https://gradiently.design/fi/guide/typography-basics). Liukuväri- tai tekstuuritaustalla välistys on vain puolet luettavuudesta: hyvin välistettykin sana voi hajota sen takana vaihtuvan värin vuoksi. Gradientlyn Mark siirtää rauhallisimman alueen sanojen taakse ja valitsee vaalean tai tumman musteen riveittäin, joten huolellisesti välistetty otsikko on tasaisen luettava alusta loppuun.

## FAQ

### Mitä kerning tarkoittaa typografiassa?

Kerning säätää kahden tietyn kirjaimen, kuten A:n ja V:n, välistä tilaa niin, että sana näyttää tasaisesti välistetyltä.

### Mitä eroa kerningillä ja yleisellä kirjainvälistyksellä on?

Kerning muuttaa yhden kirjainparin väliä. Yleinen kirjainvälistys muuttaa rivin tai tekstilohkon kaikkia välejä kerralla.

### Pitääkö leipäteksti välistää käsin?

Harvoin. Hyvän kirjasimen omat kerning-parit hoitavat leipätekstin hyvin. Säästä käsityö otsikoihin, logoihin ja suureen näyttävään tekstiin.

### Käytänkö metristä vai optista kerningiä?

Käytä metristä hyvällä kirjasimella, koska suunnittelija määritti sen parit. Kokeile optista, kun sisäinen kerning on huono tai yhdistät kirjasimia.

### Miten teen kerningin CSS:llä?

`font-kerning: normal` ottaa kirjasimen sisäiset parit käyttöön. Säädä yhtä paria käärimällä kirjain span-elementtiin ja siirtämällä sitä pienellä negatiivisella marginaalilla em-yksiköissä.