# Retro-tekstitehosteet: Riso, Kaksinkertainen ja Jälki

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

Vintagehenkinen teksti ei vaadi suodatinpakettia. Edullisesta painamisesta, offsetjulisteista ja vanhoista alkuteksteistä lainatut kolme tehostetta hoitavat lähes kaiken.

## The short version

- Useimmat retro-tekstitehosteet perustuvat kolmeen käsittelyyn: risopainon kohdistusvirheeseen, siirrettyyn kaksoiskuvaan ja toistuvien kopioiden jälkeen.
- Riso jäljittelee risopainoa, jossa kaksi painoväriä ovat hieman eri kohdissa ja sekoittuvat päällekkäisillä alueilla.
- Kaksinkertainen sijoittaa sanan taakse yhtenäisen kopion, joka on siirretty hieman sivuun ja väritetty kontrastisävyllä.
- Jälki toistaa sanan useita kertoja sen takana, jokainen kopio kauempana, ja tuo mieleen vauhdin tai 70-luvun alkutekstit.
- Retro-tehosteet toimivat parhaiten muutamassa suuressa sanassa ja lihavassa fontissa, sommittelun omilla väreillä ja yksi tehoste kerrallaan.

Lähes kaikki **retro-tekstitehosteet** perustuvat kolmeen käsittelyyn. **Riso** jäljittelee edullista kaksiväripainoa, jossa värit osuvat hieman eri kohtiin. **Kaksinkertainen** sijoittaa sanan taakse toisella värillä tehdyn yhtenäisen kopion, kuin silkkipainon väärin kohdistetun kerroksen. **Jälki** toistaa sanan sen takana askel kerrallaan, kuin 1970-luvun alkutekstissä tai liikkeessä. Kaikki toimivat muutamassa suuressa sanassa ja lihavassa fontissa, sommittelun väreillä ja yksi tehoste kerrallaan.

| Tehoste | Ulkonäkö | Tunnelma | Sopii |
| --- | --- | --- | --- |
| Riso | Kaksi hieman eri kohtiin painettua väriä, jotka sekoittuvat päällekkäin | Käsintehty, indie, pienlehti | Kirjakaupat, kahvilat, keikat, luovat studiot |
| Kaksinkertainen | Yhtenäinen kaksoiskuva hieman sanan takana | Rohkea, pophenkinen, silkkipaino | Alennukset, katumuoti, lanseeraukset |
| Jälki | Useita asteittain etääntyviä kopioita | Liike, 70-luku, psykedeelisyys | Musiikki, tapahtumat, kesäkampanjat |

Kolme käsittelyä ja kolme eri sävyä. Valitse viestin tunnelman mukaan, älä näyttävyyden perusteella.

## Riso-tekstitehoste

Risografi on sapluunapainokone. Jokaisella painovärillä on oma sapluuna ja rumpu, joten kaksivärinen työ painetaan kahtena kerroksena. Kerrokset osuvat harvoin täysin kohdakkain: kumpaakin väriä pilkistää reunasta ja päällekkäiseen kohtaan syntyy kolmas väri. Risovärien fluoresoivista pinkeistä, kirkkaista sinisistä ja aurinkoisista keltaisista on tullut oma tyylinsä, jota pienlehdet, riippumattomat kustantajat ja kuvittajat suosivat.

- Fluoresoiva pinkki: #ff48b0
- Keskisininen: #0078bf
- Keltainen: #ffe800
- Sinivihreä: #00838a
- Kirkkaanpunainen: #f15060
- Päällystämätön paperi: #f4efe6

Suosittujen risopainovärien näyttövastineet luonnonvalkoisella paperisävyllä. Valitse kaksi väriä: pinkki ja sininen tai keltainen ja sinivihreä ovat klassisia pareja.

Pidä siirtymä pienenä, muutaman prosentin suuruisena kirjaimen korkeudesta. Anna värien *kertoutua* päällekkäin sen sijaan, että toinen peittäisi toisen. Lisää kirjaimiin hieman rakeisuutta, jos mahdollista: oikea risoväri asettuu päällystämättömälle paperille epätasaisesti. Pinkin ja sinisen päällekkäisyydestä syntyvä syvä violetti tekee vaikutelmasta uskottavan.

## Kaksinkertainen-tekstitehoste

Kaksinkertainen on tekniikoista yksinkertaisin: sanan takana on yksi yhtenäinen kopio kontrastivärillä, hieman sivuun siirrettynä. Tulos muistuttaa silkkipainoa tai tarraa ja näyttää itsevarmalta ja graafiselta. Tavallisen varjon sijaan kaksoiskuva on terävä ja värikäs, ei tumma ja pehmeä. Siirrä kopiota rohkeasti noin 5:stä 8:aan prosentin verran kirjaimen korkeudesta. Liian pieni siirtymä näyttää virheeltä.

- Lämmin pohja, syvänpunainen kopio: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Minttupohja, tummansininen kopio: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Violetti pohja, pinkki kopio: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Kaksinkertaiselle sopivia pohjia. Kopion värin tulee erottua sekä taustasta että etummaisista kirjaimista.

## Jälki-tekstitehoste

Jälki toistaa sanan sen takana neljästä kahdeksaan kertaa, jokaisen kopion hieman kauempana. Kun kopioiden väri vaihtuu esimerkiksi lämpimän auringonlaskupaletin läpi, syntyy tunnistettava 70-luvun alkuteksti-ilme. Kun läpinäkyvyys kasvaa, sana tuntuu juuri saapuneen liikkeessä. Pidä askelvälit tasaisina ja suunta samana. Satunnainen rytmi näyttää rikkoutuneelta, ei vintagelta.

Pystyjulkaisu, jossa Aika siistiä on suurena lämpimän liukuvärin päällä ja kattotapahtuman tiedot alla

Lyhyt, voimakas otsikko lämpimällä pohjalla: juuri tällaista muotoa Jälki tai Kaksinkertainen tarvitsee.

Pystysuuntainen tarinakansi pienkustantajien messuille, numero otsikon yläpuolella ja tiedot alla

Pienlehtimessujen tarina, jonka otsikkoon kaksivärinen risopinta sopisi luontevasti.

## Retro-tekstitehosteet CSS:llä

Kaikki kolme voi toteuttaa `text-shadow`-ominaisuudella ja Rison kohdalla lisäksi sekoitustilalla. Määritä siirtymät `em`-yksiköissä, jotta tehoste skaalautuu fonttikoon mukana. Säilytä teksti aitona ja valittavana.

```css
/* Double: one crisp echo */
.double {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #b91c1c;
}

/* Trail: repeated copies through a warm palette */
.trail {
  color: #fff7ed;
  text-shadow:
    0.04em 0.04em 0 #fbbf24,
    0.08em 0.08em 0 #f97316,
    0.12em 0.12em 0 #ea580c,
    0.16em 0.16em 0 #c2410c,
    0.20em 0.20em 0 #7c2d12;
}

/* Riso: two inks multiplied, slightly out of register */
.riso {
  position: relative;
  color: #0078bf;
  mix-blend-mode: multiply;
}
.riso::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ff48b0;
  transform: translate(0.04em, -0.03em);
  mix-blend-mode: multiply;
}
```

Kirjoita Risoa varten sana kahdesti: `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. Multiply toimii vaalealla pohjalla kuin oikea muste paperilla. Jotkin ruudunlukijat lukevat myös luodun sisällön, joten sana saattaa kuulua kahdesti.

> **Riso tarvitsee vaalean pohjan** Multiply tummentaa kuten muste paperilla, joten se katoaa tummalla taustalla. Käytä tummassa sommittelussa Kaksinkertainen-tehostetta.

## Näin käytät retro-tekstitehosteita hyvin

1. **Aloita sopivasta fontista** Lihava ja yksinkertainen fontti tai pehmeä 70-luvun antiikva. [Retro-fontit](https://gradiently.design/fi/guide/retro-fonts) esittelee kirjasimia vuosikymmenittäin.
2. **Käsittele kahdesta viiteen sanaa** Vain otsikko. Lisätiedot pysyvät tasaisina ja selkeinä.
3. **Poimi värit taustasta** Kaksoiskuvan, jäljen tai toisen painovärin tulee kuulua sommittelun nykyiseen palettiin.
4. **Tee siirtymästä tarkoituksellinen** Risossa pieni, Kaksinkertaisessa rohkeampi ja Jäljessä tasaisin askelin.
5. **Käytä yhtä tehostetta sommittelussa** Riso, Jälki ja ääriviiva yhdessä ovat naamiaisasu. Yksi tehoste on tietoinen valinta.

### Vältä

- Jälkeä pitkässä otsikossa
- Risovärejä mustalla taustalla
- Liian lähellä olevaa kopiota, joka näyttää painovirheeltä
- Siirtymiin yhdistettyä hehkua
- Eri tehostetta jokaisessa julkaisussa

### Tee näin

- Jälki yhteen tai kahteen lyhyeen sanaan
- Riso paperisävyille ja vaaleille väreille
- Selkeä, rohkea siirtymä
- Vain teräviä, yhtenäisiä kopioita
- Yksi retro-tehoste kampanjan tunnusmerkiksi

Laajemman valikoiman, myös ääriviivat ja kohotukset, löydät oppaista [tekstitehosteet](https://gradiently.design/fi/guide/text-effects), [ääriviivateksti](https://gradiently.design/fi/guide/outline-text) ja [3D-tekstitehosteet](https://gradiently.design/fi/guide/3d-text-effect). Rakeisuus tekee Risosta erityisen uskottavan. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) näyttää, miten lisäät sitä taustaan.

## Riso, Kaksinkertainen ja Jälki Gradientlyssä

Gradientlyn kirjainten käsittelyihin kuuluvat Riso, Kaksinkertainen ja Jälki. Ne piirretään Markin omilla väreillä, joten kopioita ei tarvitse pinota käsin. Versiot ovat graafisia: Riso painaa toisen värin hienona, hieman sivuun kohdistettuna rasterina. Kaksinkertainen piirtää avoimet kirjaimet ja niiden ympärille toisen ääriviivan. Jälki lähettää häipyviä ääriviivoja yhtenäisten sanojen taakse. Mark pitää sanat luettavina siirtämällä rauhallisimman alueensa niiden taakse. Sen rakeisuus antaa retro-otsikolle painetun pinnan.

## FAQ

### Mikä on Riso-tekstitehoste?

Se jäljittelee risopainoa: kaksi painoväriä osuvat hieman eri kohtiin ja sekoittuvat päällekkäisillä alueilla kolmanneksi väriksi.

### Miten teen retro-tekstitehosteen CSS:llä?

Pinoa yhtenäisiä `text-shadow`-kopioita ilman sumennusta. Yksi kopio tekee kaksoiskuvan, useat asteittain siirretyt kopiot jäljen ja kertova pseudoelementti Rison.

### Mitkä värit sopivat 70-luvun tekstitehosteeseen?

Lämpimät auringonlaskun sävyt, kuten kulta, oranssi, ruoste ja ruskea, kermanvärisellä tai syvänruskealla pohjalla.

### Mitä eroa on kaksoiskuvalla ja tavallisella varjolla?

Kaksoiskuva on terävä, värillinen kopio hieman sanan takana. Tavallinen varjo on yleensä tumma ja sumea.