# Retrotexteffekter: riso, dubbel och spårtext

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

Du behöver inget filterpaket för att få typografi att kännas vintage. Tre behandlingar, lånade från billigt tryck, förskjutna affischer och gamla titelsekvenser, gör nästan hela jobbet.

## The short version

- De flesta retrotexteffekter kommer från tre behandlingar: riso-felpassning, ett dubbelt förskjutet eko och ett spår av upprepade kopior.
- En riso-effekt efterliknar risografitryck, där två färger trycks lite snett mot varandra och blandas där de möts.
- En dubbeleffekt lägger en solid kopia av ordet bakom originalet, förskjuten ett kort stycke i en kontrasterande färg.
- En spåreffekt upprepar ordet flera gånger bakom sig, varje kopia längre bort, och antyder fart eller en titelsekvens från 70-talet.
- Retroeffekter ser bäst ut på några få stora ord i en kraftig stil, med färger hämtade från bakgrunden och bara en effekt per design.

Nästan varje **retrotexteffekt** du ser är en av tre behandlingar. **Riso** efterliknar billigt tvåfärgstryck, där färgerna ligger lite snett över varandra. **Dubbel** lägger en solid kopia av ordet bakom sig, förskjuten i en andra färg, som ett screentryck med ett felplacerat lager. **Spår** upprepar ordet flera gånger bakom sig, steg för steg, som ett titelkort från 1970-talet eller ett ord i rörelse. Alla fungerar på några få stora ord i en kraftig stil, i färger hämtade från designen, en effekt i taget.

| Effekt | Ser ut som | Känns | Passar |
| --- | --- | --- | --- |
| Riso | Två färger, lite ur register, som blandas där de överlappar | Handgjort, indie, fanzine | Bokhandlar, kaffe, spelningar, kreativa studior |
| Dubbel | Ett solitt eko förskjutet bakom ordet | Djärvt, poppigt, screentryck | Rea, streetwear, lanseringsinlägg |
| Spår | Flera upprepade kopior som stegar sig bort | Rörelse, 70-tal, psykedeliskt | Musik, event, sommarkampanjer |

Tre behandlingar, tre olika röster. Välj efter hur budskapet ska kännas, inte efter vad som ser mest imponerande ut.

## Riso-texteffekten

En risograf är en stencilskrivare, och varje färg får sin egen stencil och trumma, så en tvåfärgsdesign trycks i två lager. Lagren hamnar sällan perfekt över varandra, vilket lämnar en tunn kant av varje färg och en tredje färg där de överlappar. Riso-färgernas fluorescerande rosa, klara blå och solgula toner har blivit en egen stil, populär bland fanzines, fristående förlag och illustratörer.

- Fluorescerande rosa: #ff48b0
- Medelblå: #0078bf
- Gul: #ffe800
- Blågrön: #00838a
- Klarröd: #f15060
- Ostruket papper: #f4efe6

Skärmens approximationer av populära riso-färger, på en off white papperston. Välj två färger: rosa och blå, eller gul och blågrön, är klassiska par.

Håll förskjutningen liten, några procent av bokstävernas höjd, och låt färgerna *multiplicera* där de överlappar i stället för att den ena täcker den andra. Lägg gärna till lite korn i bokstäverna: riktig riso-färg sätter sig lite ojämnt på ostruket papper. Rosa över blått ger en djup violett i överlappningen, och det är den detaljen som får effekten att sälja.

## Dubbeleffekten

Som teknik är dubbel den enklaste av de tre: en solid kopia av ordet, i en kontrasterande färg, som ligger bakom originalet och är något förskjuten. Det läses som ett screentryck eller en dekal, tryggt och grafiskt. Till skillnad från en slagskugga är ekot skarpt och färgstarkt i stället för mörkt och mjukt. Skjut förskjutningen lite längre än vad som känns säkert, runt 5 till 8 procent av bokstävernas höjd; ligger den för nära ser det ut som ett misstag.

- Varm botten, djupröd eko: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Mintbotten, marinblått eko: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Violett botten, rosa eko: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Bakgrunder som passar en dubbeleffekt. Ekots färg ska kontrastera mot både bakgrunden och bokstavsytan.

## Spåreffekten

Spår upprepar ordet fyra till åtta gånger bakom sig, och varje kopia stegar sig längre bort. När kopiorna byter färg på vägen, genom en varm solnedgångspalett till exempel, får du den omisskännliga 70-talstitelns look. När de tonar ut i opacitet får du rörelse, som om ordet precis kommit fram. Håll stegen jämna och riktningen densamma; slumpmässiga avstånd ser trasiga ut, inte vintage.

Ett stående inlägg med orden Helt fantastiskt i stor stil över en varm gradient, med uppgifter om ett takterrassevent under

En kort, högljudd rubrik på varm botten: den form som en spår- eller dubbelbehandling behöver.

En stående storyomslag för en småförlagsmässa, med ett utgåvonummer ovanför titeln och detaljer under

En story för en fanzinemässa, där ett tvåfärgs riso-finish på titeln skulle passa som hand i handske.

## Retrotexteffekter i CSS

Alla tre går att bygga med `text-shadow`, plus ett blandningsläge för riso. Använd `em`-förskjutningar så att effekten skalar med teckenstorleken, och behåll texten som riktig, markerbar text.

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

För riso skriver du ordet två gånger: `<h1 class="riso" data-text="Zine fair">Zine fair</h1>`. Multiply fungerar på ljusa bakgrunder, som riktig färg på papper. Vissa skärmläsare läser upp genererat innehåll, så ordet kan läsas två gånger.

> **Riso behöver en ljus botten** Multiply gör mörkare, precis som färg på papper, så effekten försvinner på mörka bakgrunder. Använd dubbeleffekten i stället för en mörk design.

## Så använder du retrotexteffekter bra

1. **Börja med rätt stil** Kraftig och enkel, eller en mjuk 70-talsserif. [Retrotypsnitt](https://gradiently.design/sv/guide/retro-fonts) listar stilar efter årtionde.
2. **Använd den på två till fem ord** Bara rubriken. Detaljerna förblir platta och enkla.
3. **Hämta färgerna från bakgrunden** Ekot, spåret eller den andra färgen ska komma från paletten som redan finns i designen.
4. **Låt förskjutningen vara avsiktlig** Liten för riso, lite djärvare för dubbel, jämnt stegad för spår.
5. **Använd en effekt per design** Riso plus spår plus en kontur är en kostym. En effekt är ett val.

### Undvik

- Ett spår på en lång rubrik
- Riso-färger på svart bakgrund
- Ett eko så nära att det ser ut som ett tryckfel
- Glöd blandad med förskjutningarna
- En ny effekt i varje inlägg

### Gör

- Ett spår på ett eller två korta ord
- Riso på papperstoner och bleka färger
- En tydlig, självsäker förskjutning
- Bara skarpa, solida kopior
- En retroeffekt som kampanjens signatur

För den bredare uppsättningen behandlingar, inklusive konturer och extruderingar, se [texteffekter](https://gradiently.design/sv/guide/text-effects), [konturtext](https://gradiently.design/sv/guide/outline-text) och [3D-texteffekter](https://gradiently.design/sv/guide/3d-text-effect). Korn gör riso särskilt övertygande; [kornig gradient](https://gradiently.design/sv/guide/grainy-gradients) visar hur du lägger till det på en bakgrund.

## Riso, Dubbel och Spår i Gradiently

Gradiently har behandlingarna Riso, Dubbel och Spår för Lettering, alla ritade i Markens egna färger, så du slipper stapla kopior för hand. Versionerna är grafiska: Riso trycker den andra färgen som en fin halvton, en aning ur register; Dubbel ritar öppna bokstäver med en andra kontur runt; Spår skickar bleknande konturer bakom solida ord. Marken håller orden läsbara genom att flytta sin lugnaste del bakom dem, och dess korn ger en retrorubrik den tryckta yta den vill ha.

## FAQ

### Vad är en riso-texteffekt?

Den efterliknar risografitryck: två färger som trycks lite snett, överlappar och blandas till en tredje färg där de möts.

### Hur gör jag en retrotexteffekt i CSS?

Stapla solida `text-shadow`-kopior utan oskärpa. En kopia ger en dubbeleffekt, flera stegade kopior ger ett spår, och ett multiplicerat pseudoelement ger riso.

### Vilka färger passar en 70-talstexteffekt?

Varma solnedgångssteg som guld, orange, rost och brunt, på en kräm eller djupbrun botten.

### Vad skiljer en dubbeleffekt från en slagskugga?

En dubbel är en skarp, färgad kopia förskjuten bakom ordet. En slagskugga är oftast mörk och oskarp.