# Tekstiin mukautuva tausta: näin Mark tekee tilaa

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

Useimmat taustat ovat kuvia, eivätkä kuvat tiedä, missä otsikkosi on. Mark tietää ja järjestäytyy niin, että sanat erottuvat ilman niiden taakse lisättyä laatikkoa.

## The short version

- Gradientlyn Mark on tekstiin mukautuva tausta, sillä se piirretään reaaliajassa ja tietää, missä suunnitelman sanat ovat.
- Mark siirtää rauhallisimman ja parhaan kontrastin tarjoavan alueensa sanojen taakse, tummentaa tai vaalentaa värejä kirjainten lähellä ja rauhoittaa levottomia yksityiskohtia.
- Reagointi ei käytä laatikoita, varjoja eikä sumennusta, joten tausta säilyy ehjänä ja sanat erottuvat.
- Valitset itse reagoinnin voimakkuuden: Pois, Huomaamaton, Hienovarainen, Selkeä tai Rohkea. Hienosäätöön käytät Sävy-, Rauhoitus-, Taipuma- ja Ulottuvuus-säätimiä.
- Mark piirretään uudelleen jokaiseen kokoon, joten se tekee sanoille tilaa niiden sijainnin mukaan jokaisessa muodossa.

Gradientlyn Mark on **tekstiin mukautuva tausta**. Se piirretään reaaliajassa eikä tallennu pelkäksi kuvaksi, joten se tietää, missä sanasi ovat, ja järjestäytyy niiden ympärille. Materiaalin rauhallisin ja parhaan kontrastin tarjoava alue siirtyy tekstin taakse, värit kirjainten lähellä tummenevat tai vaalenevat ja levottomat yksityiskohdat rauhoittuvat. Taustan päälle ei lisätä mitään. Ei laatikoita, varjoja eikä sumennusta, joten koko tausta säilyy ja sanat erottuvat silti.

## Tavalliset keinot parantaa luettavuutta ja niiden haitat

Aseta otsikko elävän liukuvärin tai valokuvan päälle, ja osa siitä katoaa taustaan. Tavalliset korjaukset peittävät taustaa, mikä tuntuu oudolta, jos juuri taustan vuoksi valitsit suunnitelman.

### Taustan peittäminen

- Yhtenäinen tai huurrettu laatikko sanojen takana
- Varjo jokaisessa kirjaimessa
- Tekstin takana olevan alueen sumennus
- Tumma peittokerros koko kuvan päällä

### Mark tekee tilaa

- Rauhallinen alue siirtyy sanojen kohdalle
- Värit kirjainten lähellä tummenevat tai vaalenevat
- Rae, harjanteet ja valonvälähdykset rauhoittuvat tekstin takana
- Muu tausta pysyy yhtä elävänä kuin ennen

Jokaiselle korjaukselle on paikkansa tavallisessa kuvassa. [Teksti liukuväritaustalla](https://gradiently.design/fi/guide/text-on-gradient) käsittelee niitä rehellisesti. Markin ero on siinä, että tausta osallistuu sen sijaan, että sitä peitettäisiin.

## Mitä Mark tekee sanojesi ympärillä

1. **Se asettuu** Materiaali siirtyy niin, että sanasi asettuvat sen rauhallisimpaan kohtaan. Otsikon taakse muuten osuva valo siirtyy sen ympärillä olevaan tyhjään tilaan.
2. **Se muuttaa sävyä** Kirjainten lähellä paletti siirtyy kohti tekstistä erottuvaa väriä: vaalean musteen takana tummemmaksi ja tumman musteen takana vaaleammaksi.
3. **Se rauhoittuu** Vääristymät, levottomuus ja pienet yksityiskohdat rauhoittuvat sanojen takana, jotta voimakas tekstuuri ei kulje ohuen kirjainviivan läpi.
4. **Se taipuu reunoilla** Kuviot kaartuvat hieman sanojen reunalla sen sijaan, että kulkisivat suoraan niiden läpi.

Museon myöhäisillan tapahtumajuliste, jossa liukuvärin kirkkain kohta on otsikon takana

Reagointi pois: materiaali kulkee sanojen läpi aivan kuten tavallisessa kuvassa.

Sama museojuliste, jossa liukuväri on asettunut rauhalliseksi ja tummemmaksi otsikon ja tietojen takana

Reagointi päällä: sama Mark asettaa tummemman ja rauhallisemman alueen tekstin taakse ja säilyttää värinsä muualla.

Reagointi toimii yhdessä [Automaattisen musteen](https://gradiently.design/fi/guide/auto-ink-legibility) kanssa. Se valitsee Markin vaalean tai tumman musteen jokaiselle riville. Tausta tekee tilan, ja Automaattinen muste valitsee siihen sopivan värin.

## Valitse taustan reagoinnin voimakkuus

Päätät itse, kuinka paljon Mark antaa tilaa sanoille. Tätä varten on Sanojen ympärillä -paneeli, jossa on aluksi viisi tasoa.

| Taso | Vaikutus | Sopiva käyttö |
| --- | --- | --- |
| Pois | Materiaali ei huomioi sanoja | Taustakuvat ja taidevedokset ilman tekstiä |
| Huomaamaton | Vaikuttaa vain tarvittaessa; kukaan ei huomaa | Suuret, vahvat otsikot rauhallisilla Markeilla |
| Hienovarainen | Tasapainoinen: ilme säilyy ja sanat erottuvat | Useimmat somejulkaisut ja tarinat |
| Selkeä | Sanat ovat aina etusijalla | Ruokalistat, hinnastot ja tapahtumatiedot |
| Rohkea | Suurin kontrasti ja hieman laajempi rauhoitettu alue | Pieni teksti, pitkät tekstit ja huoneen toiselta puolelta luettavat kyltit |

Viisi lähtökohtaa. Hienovarainen on järkevä oletus; nosta tasoa, kun teksti pienenee tai pitenee.

Tasojen alla on neljä hienosäätöä: **Sävy** määrittää, kuinka paljon materiaalin sävy muuttuu sanojen takana kontrastin parantamiseksi. **Rauhoitus** vähentää vääristymiä ja levottomuutta. **Taipuma** määrittää, kuinka paljon kuvio kaartuu sanojen reunoilla. **Ulottuvuus** päättää, vaikuttaako reagointi aivan jokaisen kirjaimen vieressä vai koko tekstikappaleen ympärillä.

> **Ulottuvuus on useimmille hyödyllisin säädin** Lyhyessä otsikossa pieni ulottuvuus pitää taustan elävänä aivan kirjainten vieressä. Kappaleessa tai luettelossa suurempi ulottuvuus rauhoittaa koko tekstille yhden selkeän alueen, jota on helpompi lukea.

## Miksi tämä auttaa kaikissa ko’oissa

Tavallinen taustakuva sommitellaan kerran. Kun rajaat sen tarinaksi, kirkas kohta voi osua suoraan otsikon taakse. Mark piirretään uudelleen jokaista muotoa varten, joten kun suunnitelma muuttuu julkaisusta tarinaksi ja banneriksi, sanatkin siirtyvät ja Mark tekee niille taas tilaa. Näin [sama ilme toimii kaikissa ko’oissa](https://gradiently.design/fi/guide/one-look-every-size).

- Julkaisu 1080×1350: 1080 × 1350
- Tarina 1080×1920: 1080 × 1920
- X-otsake 1500×500: 1500 × 500
- YouTube-pikkukuva 1280×720: 1280 × 720

Neljä muotoa ja neljä eri paikkaa otsikolle. Rauhallinen alue seuraa sanoja jokaisessa.

## Idean yksinkertainen toteutus CSS:llä

Verkossa voit soveltaa periaatetta tavalliseen liukuväriin: sijoita taustan tummin ja rauhallisin alue tekstin kohdalle ja jätä värit reunoille. Alue ei seuraa sanoja asettelun muuttuessa, mutta ratkaisu toimii paremmin kuin laatikko.

Rauhallinen, tumma alue tekstin takana: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

Teksti asettuu tummaan luumunväriseen ellipsiin vasemmalla alhaalla; persikka ja ruusu säilyvät elävinä reunoilla.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}
```

Siirrä ellipsi otsikkosi kohdalle. [CSS-liukuväri kuvan päällä](https://gradiently.design/fi/guide/css-gradient-overlay) näyttää saman keinon valokuvan päällä.

## Milloin reagointia kannattaa vähentää

Kaikki suunnitelmat eivät tarvitse parasta mahdollista luettavuutta. Puhelimen taustakuvassa ei ole sanoja, joten Pois on oikea valinta. Suuret näyttävät kirjaimet, kuten yksi sana koko julisteen leveydeltä, erottuvat usein sellaisinaan ja näyttävät paremmilta Huomaamaton-tasolla. Käyrät- ja Kohotettu-tyylisten kirjainkäsittelyjen oma kontrasti auttaa jo valmiiksi. Niitä käsitellään [kirjaintehosteiden oppaassa](https://gradiently.design/fi/guide/lettering-treatments). Säästä voimakkaat tasot tehtäviin, jotka tarvitsevat niitä: pieneen tekstiin, pitkiin tietoihin ja nopeasti luettavaan sisältöön.

## FAQ

### Miten Gradientlyn Mark mukautuu tekstiin?

Se siirtää rauhallisimman ja parhaan kontrastin tarjoavan alueensa sanojen taakse, tummentaa tai vaalentaa värejä kirjainten lähellä ja rauhoittaa yksityiskohtia ilman laatikoita, varjoja tai sumennusta.

### Voinko estää taustaa reagoimasta tekstiin?

Kyllä. Valitse reagoinnin tasoksi Pois, jolloin materiaali ei huomioi sanojasi. Tämä sopii taustakuviin ja suunnitelmiin ilman tekstiä.

### Minkä reagointitason valitsen?

Hienovarainen sopii useimpiin julkaisuihin ja tarinoihin. Käytä Selkeä- tai Rohkea-tasoa pienessä tai pitkässä tekstissä, ruokalistoissa ja kaukaa luettavissa suunnitelmissa.

### Toimiiko reagointi, kun muutan suunnitelman kokoa?

Kyllä. Mark piirretään uudelleen jokaiseen kokoon, joten se tekee sanoille tilaa niiden sijainnin mukaan uudessa muodossa.