# Ääriviivateksti: ontot kirjaimet, jotka silti erottuvat

[Canonical HTML page](https://gradiently.design/fi/guide/outline-text)

Ontot kirjaimet näyttävät julisteessa teräviltä ja katoavat puhelimessa muita tehosteita helpommin. Näin valitset kestävän kirjasimen, viivan ja asettelun sekä kaikissa selaimissa toimivan CSS:n.

## The short version

- Ääriviivateksti näyttää vain kunkin kirjaimen reunan ja jättää sisustan ontoksi, jolloin tausta näkyy läpi.
- Ääriviivateksti erottuu parhaiten vahvalla päätteettömällä tai laattapäätteisellä kirjasimella, avoimilla muodoilla, suuressa koossa ja noin 2-4 prosentin viivanleveydellä suhteessa kirjasinkokoon.
- Yksi ääriviivasana yhden täytetyn rinnalla antaa lukijalle ankkurin ja jättää ääriviivan rytmiksi koko viestin sijaan.
- CSS:ssä ääriviivateksti tehdään -webkit-text-stroke-määrityksellä ja läpinäkyvällä värillä, joita kaikki suuret selaimet tukevat.
- Vältä pienen tekstin, ohuiden leikkausten ja käsialakirjasimien ääriviivoja, koska ohut viiva katoaa puhelinnäytöllä ensimmäisenä.

**Ääriviivateksti** näyttää vain kirjaimen reunan, jättäen sisustan ontoksi ja taustan näkyviin. Se erottuu kolmella ehdolla: vahva kirjasin avoimine muotoineen, luettavan paksu viiva noin 2-4 prosenttia kirjasinkoosta sekä suuri koko rauhallisella taustalla. Varmin asettelu yhdistää yhden täytetyn sanan yhteen ääriviivasanaan, jotta silmä saa ensin jotain tukevaa luettavaa.

## Miksi ääriviivatekstiä on vaikea lukea

Tunnistamme kirjaimet niiden kiinteistä muodoista. Ääriviiva poistaa massan ja jättää joka vetoon kaksi ohutta viivaa, ulko- ja sisäreunan. Suuressa koossa silmä täydentää muodon. Pienessä koossa tai hiusviivalla viivat sumenevat yhteen tai katoavat taustaan. Levoton pohja pahentaa ongelmaa, koska ontto sisusta näyttää kaiken tekstuurin.

### Ei toimi

- Ohuet tai normaalivahvuiset leikkaukset
- Alle 1 prosentin hiusviivat suhteessa kokoon
- Käsiala- tai vahvakontrastiset antiikvat
- Kokonaiset lauseet ääriviivoina
- Alle noin 60 px:n teksti julkaisuissa
- Kirjaimista läpi näkyvä yksityiskohtainen kuva

### Toimii

- Black-, Heavy- tai Extra Bold -leikkaukset
- Noin 2-4 prosentin viivat suhteessa kokoon
- Vankat päätteettömät, laattapäätteiset tai groteskikirjasimet
- Yksi tai kaksi ääriviivasanaa, muu teksti täytettynä
- Julkaisun otsikkokoot 120 px:stä ylöspäin
- Rauhallinen liukuväri tai tasainen taustaväri

## Kirjasimen ja viivan valinta

Aloita vahvuudesta. Black- tai Extra Bold -leikkauksen leveät vedot kuvaavat selkeää muotoa vielä ääriviivoina. Avoimet kirjaimet auttavat: O:n, A:n ja e:n pyöreät sisäaukot pysyvät näkyvissä sulkeutumisen sijaan. Archivo Black, Anton tai vahva groteski ovat hyviä lähtökohtia. [Lihavat kirjasimet](https://gradiently.design/fi/guide/bold-fonts) tarjoaa lisää.

| Kirjasinkoko | Viivanleveys | Käyttö |
| --- | --- | --- |
| 60 px | 2 px | Onton sanan vähimmäiskoko, vain tasaisella pohjalla |
| 120 px | 3-4 px | 1080 px leveän somejulkaisun otsikot |
| 200 px | 5-7 px | Suuret yksittäiset sanat ja julisteiden rivit |
| 400 px | 10-14 px | Ylisuuret taustasanat ja bannerit |

Viivanleveys noin 2-4 prosenttia kirjasinkoosta. Paksunna ohuissa leikkauksissa, ohenna vain kirjainten alkaessa tukkeutua.

Väri on yhtä tärkeä kuin leveys. Vaalea viiva tummalla erottuu helpommin kuin tumma vaalealla, koska vaaleat viivat näyttävät hieman leviävän. Ota viivan väri taustan vaaleimmasta tai tummimmasta osasta, jotta se kuuluu designiin. Liukuvärillä tarkista kohta, jossa pohja on lähimpänä viivan väriä: ääriviiva katoaa siellä ensin.

## Asettelut, joissa ääriviivateksti toimii

- **Täytetty ja ontto pari:** *Kesä* täytettynä, *Sessiot* ääriviivana. Täytetty sana ankkuroi, ääriviiva rytmittää.
- **Toistuva sana:** sama sana kolmessa tai neljässä kerroksessa, yksi täytettynä ja loput ääriviivoina, luo kaiun tai liikkeen tuntua. [Retrotekstitehosteet](https://gradiently.design/fi/guide/retro-text-effect) käsittelee sukua olevia kaksois- ja jälki-ilmeitä.
- **Taustasana:** valtava ääriviivasana pienemmän täytetyn otsikon takana toimii tekstuurina tekstin sijaan. Syvyyttä onttojen muotojen sijaan tarjoaa [3D-tekstitehoste](https://gradiently.design/fi/guide/3d-text-effect).
- **Ääriviiva osoitettaessa tai toisessa tilassa:** verkossa ontto painike tai linkki, joka täyttyy valittaessa.

Pystyjulkaisu, jossa Sessiot lukee hyvin suurella ja pieni Kesä-yläteksti sen yläpuolella

Yksi suuri sana ääriviivakirjaimille sopivassa muodossa: lyhyt ja vahva, pienet täytetyt lisätiedot alla.

Kesän musiikkisarjan pystytarina, jonka otsikkona on Sessiot

Sama sana tarinassa. Korkea kuva antaa tilaa toistaa sanaa alas sivulle, kerran täytettynä ja muuten onttona.

## Näin teet ääriviivatekstin CSS:llä

Ominaisuus on `-webkit-text-stroke`. Etuliitteestä huolimatta se toimii kaikissa suurissa selaimissa ja kuuluu verkkoyhteensopivuusstandardiin. Aseta tekstiväri läpinäkyväksi onttoa sanaa varten tai säilytä täyttö reunustetulle kiinteälle kirjaimelle. [MDN:n ohje](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) antaa yksityiskohdat.

```css
.outline {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: #fafaf9; /* fallback: solid letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 0.03em #fafaf9; /* about 3% of the size */
  }
}

/* Solid and hollow pair */
.outline-pair .solid { color: #fafaf9; }
.outline-pair .hollow {
  color: transparent;
  -webkit-text-stroke: 0.03em #fafaf9;
}
```

`em`-viiva skaalautuu kirjasinkoon mukana. `@supports` säilyttää täytetyt kirjaimet siellä, missä ominaisuutta ei tueta.

> **Viiva syö kirjainta** CSS keskittää viivan kirjaimen reunalle, joten puolet osuu sisään. Paksu reunaviiva täytetyssä sanassa saa kirjaimen näyttämään ohuemmalta ja voi sulkea pienet sisäaukot. SVG:ssä `paint-order: stroke` piirtää viivan täytön taakse ja välttää tämän.

Ruudunlukijat lukevat ääriviivatekstin normaalisti, koska se on edelleen oikeaa tekstiä. Pidä se sellaisena: älä muuta verkkosivun ääriviivaotsikoita kuviksi. Kontrasti on jäljelle jäävä riski, koska työkalut mittaavat nyt läpinäkyvää tekstiväriä. Tarkista viiva taustaa vasten silmällä ja kontrastintarkistimella käyttäen viivan väriä. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) käsittelee suhteet.

## Ulkoreunaviiva ja sisäviiva: kaksi sukulaistyyliä

Ääriviivakirjainten sukulaiset säilyttävät enemmän kiinteää muotoa. **Ulkoreunaviiva** piirtää täytetyn kirjaimen ulkopuolelle viivan ja erottaa sen taustasta tarran reunuksen tavoin. **Sisäviiva** leikkaa jokaiseen vetoon ohuen viivan, kuten kaiverretussa ja viktoriaanisessa otsikkotyypissä sekä monissa kauppakylteissä. Molemmat ovat täysin onttoa sanaa luettavampia, joten ne sopivat pienempään tekstiin. Laajempaa tehosteperhettä käsittelee [tekstitehosteet](https://gradiently.design/fi/guide/text-effects).

1. **Valitse sana** Yksi tai kaksi viestin kantavaa sanaa, ei koskaan lausetta.
2. **Aseta vahvaksi ja suureksi** Black-leikkaus otsikkokoossa. Ääriviivakirjaimet eivät kuulu leipätekstiin.
3. **Valitse ontto, ulko- tai sisäviiva** Ontto tuo draamaa, ulkoviiva nostaa sanan levottomalta pohjalta ja sisäviiva käsityömäisen kylttitunnelman.
4. **Ota väri taustasta** Käytä sen vaaleinta tai tumminta sävyä, jotta viiva kuuluu designiin.
5. **Tarkista puhelimessa** Katso julkaisua oikeassa koossa. Jos ääriviiva välkkyy tai katoaa, paksunna viivaa tai täytä sana.

Gradientlyn kirjaintehosteet kattavat tämän perheen ilman käsin rakennettuja kerroksia: Sisäviiva kaivertaa viivan kirjaimen sisään, Kaksinkertainen piirtää avoimet kirjaimet kahdesti, Jälki jättää ääriviivat perään ja Käyrät ympäröi sanat korkeuskäyrillä. Taustan Mark siirtää rauhallisimman alueensa sanojen taakse, joten ontto tai sisäviivainen otsikko saa vakaan pohjan. Liukuvärikirjaimet ovat eri tekniikka, jota käsittelee [liukuväriteksti CSS:llä](https://gradiently.design/fi/guide/css-gradient-text).

## FAQ

### Miten teen ääriviivatekstin CSS:llä?

Aseta tekstille `color: transparent` ja `-webkit-text-stroke: 0.03em #ffffff`. Etuliitteellinen ominaisuus toimii kaikissa suurissa selaimissa.

### Mikä kirjasin sopii parhaiten ääriviivatekstiin?

Vahva päätteetön tai laattapäätteinen kirjasin avoimilla muodoilla, kuten Archivo Black tai Anton. Ohuet leikkaukset ja käsialat hajoavat ääriviivoina.

### Kuinka paksu tekstin ääriviivan pitää olla?

Noin 2-4 prosenttia kirjasinkoosta: 120 px:n otsikolle noin 3-4 px.

### Onko ääriviivateksti saavutettavaa?

Ruudunlukijat lukevat sen normaalisti, mutta kontrasti voi jäädä heikoksi. Käytä sitä vain suurissa sanoissa ja tarkista viivan väri taustaa vasten.