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

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

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 vertailee sitä muihin käsittelyihin. Retrohenkiset tekstitehosteet 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 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.

Paremmat vaihtoehdot tekstivarjolle

1. 1

   Siirrä sanat

   Etsi taustan rauhallisin ja tasaisin alue ja sijoita teksti sinne. Tämä ehkäisee useimmat ongelmat jo ennalta.

2. 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 sisältää peitteiden koodit.

3. 3

   Rauhoita taustaa

   Sävytä valokuva yhdellä tai kahdella värillä, vähennä kirkkaimpia kohtia tai valitse liukuväri, jossa on rauhallisempi alue.

4. 4

   Vahvista tekstiä

   Valitse paksumpi leikkaus ja suurempi koko. Reilun kokoinen lihavoitu päätteetön teksti erottuu useimmista taustoista ilman apua.

5. 5

   Vaihda mustetta

   Joskus tumma teksti vaalealla alueella toimii paremmin kuin valkoinen teksti varjolla. Valitse muste rivikohtaisesti koko suunnitelman sijaan.

Liukuväreissä tausta usein vaalenee tai tummenee kuvan eri kohdissa, joten yksi musteen väri ei sovi kaikille riveille. Teksti liukuvärin päällä kertoo, miten tämä huomioidaan, ja teksti levottomilla taustoilla 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ä.

/* 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;
}

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