# Tekstivarjo: milloin se auttaa ja mitä käyttää sen tilalla

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

Varjo on yleisin keino korjata huonosti erottuva teksti ja nopea tapa saada suunnitelma näyttämään vanhentuneelta. Tässä kerrotaan, milloin varjo on hyvä valinta ja mitä käyttää muulloin.

## The short version

- Tekstivarjo toimii parhaiten harkittuna tyylikeinona, kuten terävänä siirrettynä varjona ilman sumennusta, eikä huonon kontrastin korjauksena.
- Pehmeät hohteet ja sumeat kehät kirjainten ympärillä sumentavat reunoja ja saavat suunnitelman usein näyttämään halvalta ja vanhentuneelta.
- Ohut, kirjaimia myötäilevä varjo on perusteltu valinta liikkuvan videon tekstityksiin, joissa taustaa ei voi hallita.
- Sijoittelu, liukuväripeite, sävytetty tausta ja paksumpi leikkaus parantavat yleensä tekstin luettavuutta varjoa paremmin.
- CSS:n text-shadow saa arvokseen vaakasiirtymän, pystysiirtymän, valinnaisen sumennussäteen ja värin. Useita varjoja voi erottaa pilkuilla.

**Tekstivarjo** auttaa kahdessa tilanteessa: harkittuna tyylikeinona, yleensä terävänä muutaman pikselin siirrettynä varjona ilman sumennusta, sekä ohuena turvareunana liikkuvan videon tekstityksissä. Valokuvasta tai liukuväristä huonosti erottuvan tekstin pelastuskeinona siitä on yleensä haittaa. Pehmeät varjot ja hohteet sumentavat juuri niitä reunoja, joiden avulla silmä tunnistaa kirjaimet, ja saavat suunnitelman heti näyttämään vanhentuneelta. Paranna luettavuutta siirtämällä sanat rauhallisempaan kohtaan, lisäämällä liukuväripeite, sävyttämällä tausta tai valitsemalla paksumpi leikkaus.

## Tekstivarjojen eri tyypit

| Tyyppi | Ulkonäkö | Arvio |
| --- | --- | --- |
| Terävä siirretty varjo | Yhtenäinen kopio kirjaimista siirrettynä alas ja oikealle, ei sumennusta | Vahva tyyli: retrohenkinen, leikkisä ja julistemainen |
| Pitkä varjo | Useita siirrettyjä kopioita, jotka muodostavat vinon lohkon | Lähellä kolmiulotteista kohotusta oleva tyyli; käytä vain muutamaan sanaan |
| Hento pudotusvarjo | Pieni siirtymä, vähän sumennusta ja matala peittävyys | Tuskin näkyy useimmilla näytöillä; usein tarpeeton |
| Tiivis tekstitysreuna | Vähän siirtymää tai ei lainkaan, lyhyt sumennus, tumma väri | Sopii tekstityksiin ennakoimattoman videon päällä |
| Pehmeä hohde tai kehä | Leveä, sumea väripilvi jokaisen kirjaimen ympärillä | Vältä: suttaa kirjaimet ja näyttää halvalta |

Vain kaksi ensimmäistä ovat tyylivalintoja. Kaksi keskimmäistä ovat apukeinoja. Viimeisestä tavasta kannattaa luopua.

## Milloin tekstivarjo auttaa

### Terävänä, siirrettynä tyylikeinona

Sumennukseton varjo, jota siirretään muutama prosentti kirjaimen korkeudesta ja jonka väri valitaan paletin kontrastisävystä, on vanha typografinen keino julisteissa, pakkauksissa ja kylteissä. Se näyttää varmalta ja hieman nostalgiselta. Käsittele sitä kuten muitakin tehosteita: yksi tehoste suunnitelmaa kohti, muutama suuri sana ja paksu kirjasin. [Tekstitehosteet](https://gradiently.design/fi/guide/text-effects) vertailee sitä muihin käsittelyihin. [Retrohenkiset tekstitehosteet](https://gradiently.design/fi/guide/retro-text-effect) esittelee sen lähisukulaiset, Kaksinkertainen- ja Jälki-käsittelyt.

### Videon tekstitysten takana

Tekstitykset ovat videokuvan päällä, joka muuttuu joka ruudussa, joten rauhallista kohtaa ei voi valita. Tiivis tumma varjo tai ohut ääriviiva pitää valkoisen tekstin luettavana, kun sen takana kulkee kirkas ikkuna. Pidä varjo kirjainten lähellä: lyhyt sumennus ja vähän siirtymää tai ei lainkaan. [Videotekstitysten suunnittelu](https://gradiently.design/fi/guide/video-captions-design) käsittelee kokoa ja sijoittelua.

## Milloin tekstivarjosta on haittaa

Kontrastin korjaaminen varjolla hoitaa vain oiretta. Tausta on yhä levoton, ja kirjainten ympärille on vain lisätty tahra. Pehmeät hohteet ovat pahin vaihtoehto, sillä ne levittävät sumean pilven jokaisen kirjaimen ympärille ja pehmentävät sen muodon määrittävää reunaa. Somejulkaisuissa ne myös kestävät pakkausta huonosti ja muuttuvat laikukkaiksi kaistoiksi.

### Varjo tukikeinona

- Pehmeä musta hohde valkoisessa tekstissä kuvan päällä
- Värillinen kehä otsikon ympärillä
- Varjo pienessä leipätekstissä
- Useita eri varjoja yhdessä suunnitelmassa
- Varjo, ääriviiva ja hohde samassa sanassa

### Parempi valinta

- Siirrä sanat rauhallisimpaan kohtaan
- Liukuväripeite kuvan yhdellä reunalla
- Pienelle riville suurempi ja paksumpi teksti
- Yhtenäinen tyyli koko sarjassa
- Yksi harkitusti valittu käsittely

## Paremmat vaihtoehdot tekstivarjolle

1. **Siirrä sanat** Etsi taustan rauhallisin ja tasaisin alue ja sijoita teksti sinne. Tämä ehkäisee useimmat ongelmat jo ennalta.
2. **Lisää liukuväripeite** Tumma sävy, joka häipyy pehmeästi läpinäkyväksi yhdellä reunalla, tuo kontrastia ilman näkyvää muotoa. [Luettava teksti valokuvissa](https://gradiently.design/fi/guide/readable-text-on-photos) sisältää peitteiden koodit.
3. **Rauhoita taustaa** Sävytä valokuva yhdellä tai kahdella värillä, vähennä kirkkaimpia kohtia tai valitse liukuväri, jossa on rauhallisempi alue.
4. **Vahvista tekstiä** Valitse paksumpi leikkaus ja suurempi koko. Reilun kokoinen lihavoitu päätteetön teksti erottuu useimmista taustoista ilman apua.
5. **Vaihda mustetta** Joskus tumma teksti vaalealla alueella toimii paremmin kuin valkoinen teksti varjolla. Valitse muste rivikohtaisesti koko suunnitelman sijaan.

Pystyjulkaisu, jossa lukee Auki myöhään ja tausta kulkee epätasaisena kirjainten takana

Sanat levottomalla tausta-alueella: juuri tässä moni turvautuu hohteeseen.

Sama julkaisu, jossa terävät kirjaimet erottuvat ilman varjoa liukuvärin rauhallisesta alueesta

Samat sanat, joiden takana tausta on rauhoitettu. Varjoa ei tarvita, ja kirjaimet pysyvät terävinä.

Liukuväreissä tausta usein vaalenee tai tummenee kuvan eri kohdissa, joten yksi musteen väri ei sovi kaikille riveille. [Teksti liukuvärin päällä](https://gradiently.design/fi/guide/text-on-gradient) kertoo, miten tämä huomioidaan, ja [teksti levottomilla taustoilla](https://gradiently.design/fi/guide/type-on-busy-backgrounds) käsittelee kuvioita ja tekstuureja.

## Tekstivarjo CSS:ssä

CSS:n `text-shadow`-ominaisuus saa arvokseen vaakasiirtymän, pystysiirtymän, valinnaisen sumennussäteen ja värin. Erota useat varjot pilkuilla; ensimmäiseksi lueteltu asettuu päällimmäiseksi. Käytä `em`-yksiköitä, jotta varjo skaalautuu kirjasinkoon mukana. Koko ohje on [MDN:ssä](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}
```

Kaksi hyödyllistä varjoa ja liukuväripeite, joka korvaa muut.

Automaattiset kontrastitarkistimet vertaavat tekstin väriä taustan väriin eivätkä huomioi varjoa. Jos työkalu ilmoittaa liian heikosta kontrastista, varjo voi näyttää paremmalta omalla näytölläsi mutta ei muuta mittaustulosta. Korjaa sen sijaan tausta tai muste. [CSS-tekstivarjo](https://gradiently.design/fi/guide/css-text-shadow) sisältää lisää toteutuksia verkkoon.

## Miten Gradiently huolehtii luettavuudesta

Gradientlyn lähtökohta on, ettei sanoja pitäisi joutua pelastamaan. Mark tietää, missä sanat ovat: sen rauhallisin ja parhaan kontrastin tarjoava alue siirtyy tekstin taakse, värit kirjainten lähellä tummenevat tai vaalenevat ja levottomat yksityiskohdat rauhoittuvat. Automaattinen muste valitsee sitten jokaiselle riville vaalean tai tumman tekstin Markin omasta paletista. Laatikot, varjot ja sumennus eivät kuulu tähän, ja valitset itse Markin reagoinnin voimakkuuden. Jos haluat syvyyttä tyylikeinoksi, Kohotettu-kirjainkäsittely luo syvät kirjaimet Markin väreissä ja Kaksinkertainen piirtää avoimet kirjaimet kahdesti. Molemmat ovat teräviä ilman sumennusta.

## FAQ

### Kannattaako tekstin luettavuutta parantaa varjolla?

Yleensä ei. Sijoittelu, liukuväripeite, rauhallisempi tausta tai paksumpi leikkaus tekevät tekstistä luettavaa sumentamatta kirjaimia.

### Mikä on terävä tekstivarjo?

Kirjainten kopio, jota siirretään alas ja sivulle ilman sumennusta, yleensä kontrastivärisenä. Se on harkittu tyylikeino, jota näkee julisteissa ja pakkauksissa.

### Miten lisään tekstivarjon CSS:llä?

Käytä `text-shadow: 0.06em 0.06em 0 #9a3412;`. Arvot ovat vaakasiirtymä, pystysiirtymä, sumennussäde ja väri.

### Parantaako tekstivarjo saavutettavuuden kontrastia?

Automaattiset tarkistimet vertaavat tekstin väriä taustaan eivätkä huomioi varjoa, joten varjo ei korjaa liian heikkoa kontrastisuhdetta. Korjaa tausta tai muste.

### Miksi hehkuvat tekstitehosteet näyttävät halvoilta?

Hohde levittää sumean pilven jokaisen kirjaimen ympärille, pehmentää reunoja ja muuttuu usein kaistaleiseksi kuvan pakkauksessa.