# Retroteksteffekter: Riso, Dobbel og Spor

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

Du trenger ikke en filterpakke for å gjøre skrift retro. Tre behandlinger, hentet fra billig trykk, forskjøvede plakater og gamle tittelsekvenser, gjør nesten hele jobben.

## The short version

- De fleste retroteksteffekter kommer fra tre behandlinger: forskjøvet Riso-trykk, et dobbelt forskjøvet ekko og en rekke gjentatte kopier.
- Riso imiterer risograftrykk, der to trykkfarger overlapper litt forskjøvet og blandes der de møtes.
- Dobbel plasserer én solid ordkopi bak originalen, litt forskjøvet i en kontrastfarge.
- Spor gjentar ordet flere ganger bak seg, med hver kopi lenger unna, som fart eller en 70-tallstittelsekvens.
- Retroeffekter fungerer best på få store ord i kraftig skrift, med farger fra bakgrunnen og bare én effekt per design.

Nesten alle **retroteksteffekter** er én av tre behandlinger. **Riso** imiterer billig tofarget trykk med litt forskjøvet overlapp. **Dobbel** legger en solid kopi bak ordet i en annen farge, som silketrykk med feiljustert lag. **Spor** gjentar ordet bak seg i trinn, som en 1970-tallstittel eller et ord i bevegelse. Hver passer til få store ord i kraftig skrift, med farger fra designet og én effekt om gangen.

| Effekt | Ser ut som | Følelse | Passer |
| --- | --- | --- | --- |
| Riso | To trykkfarger litt forskjøvet, blandet i overlappen | Håndlaget, indie, fanzine | Bokhandler, kaffe, konserter, kreative studioer |
| Dobbel | Et solid ekko forskjøvet bak ordet | Modig, pop, silketrykk | Salg, gatemote, lanseringsinnlegg |
| Spor | Flere kopier som går bakover i trinn | Bevegelse, 70-tall, psykedelisk | Musikk, arrangementer, sommerkampanjer |

Tre behandlinger, tre stemmer. Velg etter hvordan budskapet skal føles, ikke hva som ser mest imponerende ut.

## Riso-teksteffekten

En risograf er en sjablongtrykker, med egen sjablong og trommel for hver farge. Et tofarget design trykkes derfor i to lag. Lagene passer sjelden perfekt, så en smal kant av hver farge vises og en tredje oppstår i overlappen. Fluorescerende rosa, klart blått og solgult har blitt en egen stil, populær i fanziner, uavhengige forlag og illustrasjon.

- Fluorescerende rosa: #ff48b0
- Mellomblå: #0078bf
- Gul: #ffe800
- Blågrønn: #00838a
- Klar rød: #f15060
- Ubestrøket papir: #f4efe6

Skjermtilnærminger til populære Riso-farger på nesten hvit papirtone. Velg to: rosa og blått eller gult og blågrønt er klassiske par.

Hold forskyvningen liten, noen få prosent av bokstavhøyden, og la fargene *multipliseres* i overlappen fremfor å dekke hverandre. Legg litt korn på bokstavene hvis mulig: ekte Riso-farge ligger litt ujevnt på ubestrøket papir. Rosa over blått gir dyp lilla der de møtes, detaljen som gjør effekten overbevisende.

## Dobbel-teksteffekten

Dobbel er enklest: én solid ordkopi i kontrastfarge bak og litt forskjøvet fra originalen. Den leses som silketrykk eller klistremerke, trygg og grafisk. I motsetning til en slagskygge er ekkoet skarpt og farget fremfor mørkt og mykt. Skyv det litt lenger enn du først tenker, omtrent 5 til 8 prosent av bokstavhøyden. For nærme ser ut som en feil.

- Varm bunn, dypt rødt ekko: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Mintbunn, marineblått ekko: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Lilla bunn, rosa ekko: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Bunner til Dobbel-effekt. Ekkofargen bør ha kontrast til både bunnen og bokstavflaten.

## Spor-teksteffekten

Spor gjentar ordet fire til åtte ganger bak seg, hver kopi litt lenger unna. Skifter kopiene farge, for eksempel gjennom en varm solnedgangspalett, får du det tydelige 70-tallsuttrykket. Avtar gjennomsiktigheten, får du bevegelse, som om ordet nettopp kom. Hold trinnene jevne og retningen fast. Tilfeldig avstand virker ødelagt fremfor retro.

Et stående innlegg med Helt vilt i stor skrift over varm gradient og detaljer om takarrangement under

En kort, tydelig overskrift på varm bunn, formen Spor eller Dobbel trenger.

Et vertikalt omslag for småforlagsmesse med utgavenummer over tittelen og detaljer under

En messestory der tofarget Riso-tittel ville føles hjemme.

## Retroteksteffekter i CSS

Alle tre kan bygges med `text-shadow`, pluss blandingsmodus til Riso. Bruk forskyvning i `em` så effekten skaleres med skriften, og behold teksten som ekte, markerbar tekst.

```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;
}
```

For Riso, skriv ordet to ganger: `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. Multiply fungerer på lyse bunner som ekte farge på papir. Noen skjermlesere leser generert innhold, så ordet kan bli lest to ganger.

> **Riso trenger lys bunn** Multiply mørkner som trykkfarge på papir og forsvinner derfor på mørke bakgrunner. Bruk Dobbel til mørke design.

## Slik bruker du retroteksteffekter godt

1. **Start med riktig skrift** Kraftig og enkel, eller myk 70-tallsseriff. [Retroskrifter](https://gradiently.design/nb/guide/retro-fonts) lister valg etter tiår.
2. **Bruk på to til fem ord** Bare overskriften. Detaljer forblir flate og enkle.
3. **Hent fargene fra bakgrunnen** Ekko, spor eller andre trykkfarge bør komme fra designets eksisterende palett.
4. **Gjør forskyvningen bevisst** Liten til Riso, tydeligere til Dobbel og jevne trinn til Spor.
5. **Bruk én effekt per design** Riso med Spor og kontur er kostyme. Én effekt er et valg.

### Unngå

- Spor på lang overskrift
- Riso-farger på svart bakgrunn
- Ekko så nært at det ligner trykkfeil
- Glød blandet med forskyvningene
- Ny effekt på hvert innlegg

### Gjør

- Spor på ett eller to korte ord
- Riso på papirtoner og lyse farger
- Tydelig, trygg forskyvning
- Bare skarpe, solide kopier
- Én retroeffekt som kampanjesignatur

For flere behandlinger, også konturer og ekstrudering, se [teksteffekter](https://gradiently.design/nb/guide/text-effects), [konturtekst](https://gradiently.design/nb/guide/outline-text) og [3D-teksteffekter](https://gradiently.design/nb/guide/3d-text-effect). Korn gjør særlig Riso overbevisende. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) viser bakgrunnskorn.

## Riso, Dobbel og Spor i Gradiently

Skriftbehandlingene i Gradiently har Riso, Dobbel og Spor, hver i Markens egne farger, uten manuell stabling av kopier. Versjonene er grafiske: Riso trykker andre farge som fin halvtone litt forskjøvet. Dobbel tegner åpne bokstaver med en ekstra kontur. Spor sender falmende konturer bak solide ord. Marken holder ordene lesbare ved å flytte det roligste området bak dem, og kornet gir retrooverskriften trykkoverflaten den trenger.

## FAQ

### Hva er en Riso-teksteffekt?

Den imiterer risograftrykk: to farger litt forskjøvet, som overlapper og blandes til en tredje der de møtes.

### Hvordan lager jeg retroteksteffekt i CSS?

Stable solide `text-shadow`-kopier uten uskarphet. Én kopi gir Dobbel, flere i trinn gir Spor og et multiplisert pseudoelement gir Riso.

### Hvilke farger passer til 70-tallsteksteffekt?

Varme solnedgangstrinn som gull, oransje, rust og brunt, på krem eller dyp brun bunn.

### Hva skiller Dobbel fra slagskygge?

Dobbel er en skarp, farget kopi forskjøvet bak ordet. Slagskygge er vanligvis mørk og uskarp.