# Retro teksteffekter: riso, dobbelt og spor i bogstaver

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

Du behøver ikke en filterpakke for at få skrift til at føles vintage. Tre behandlinger, lånt fra billigt tryk, forskudte plakater og gamle titelsekvenser, klarer næsten alt arbejdet.

## The short version

- De fleste retro teksteffekter kommer fra tre behandlinger: riso-fejlregistrering, et dobbelt forskudt ekko og et spor af gentagne kopier.
- En riso-effekt efterligner risografitryk, hvor to farver overlapper let forskudt og blander sig, hvor de mødes.
- En dobbelt effekt lægger én solid kopi af ordet bag originalen, forskudt en kort afstand i en kontrasterende farve.
- En spor-effekt gentager ordet flere gange bag sig selv, hver kopi længere væk, så det antyder fart eller en titelsekvens fra 70'erne.
- Retro effekter ser bedst ud på få store ord i en tung skrift, med farver hentet fra baggrunden og kun én effekt pr. design.

Næsten enhver **retro teksteffekt**, du ser, er en af tre behandlinger. **Riso** efterligner billigt tofarvetryk, hvor farverne overlapper let forskudt. **Dobbelt** lægger en solid kopi af ordet bag sig selv, forskudt i en anden farve, som et silketryk med et skævt lag. **Spor** gentager ordet flere gange bag sig selv, trin for trin væk fra originalen, som et titelkort fra 1970'erne eller et ord i bevægelse. Hver virker på få store ord i en tung skrift, i farver hentet fra designet, én effekt ad gangen.

| Effekt | Ligner | Føles | Passer til |
| --- | --- | --- | --- |
| Riso | To farver, lidt ude af register, blandet hvor de overlapper | Håndlavet, indie, zine | Boghandlere, kaffe, koncerter, kreative studier |
| Dobbelt | Et solidt ekko forskudt bag ordet | Dristig, poppet, silketryk | Udsalg, streetwear, lanceringsopslag |
| Spor | Flere gentagne kopier, der trapper væk | Bevægelse, 70'erne, psykedelisk | Musik, events, sommerkampagner |

Tre behandlinger, tre forskellige stemmer. Vælg efter, hvad budskabet skal føles som, ikke efter hvad der ser mest imponerende ud.

## Riso-teksteffekten

En risograf er en stencilprinter, og hver farve får sin egen stencil og tromle, så et tofarvet design trykkes i to lag. Lagene passer sjældent perfekt, så en tynd kant af hver farve titter frem, og en tredje farve opstår, hvor farverne overlapper. De fluorescerende pink, klare blå og solgule toner fra riso-farver er blevet en stil for sig, populær hos zines, uafhængige forlag og illustratorer.

- Fluorescerende pink: #ff48b0
- Mellemblå: #0078bf
- Gul: #ffe800
- Blågrøn: #00838a
- Klar rød: #f15060
- Ubestrøget papir: #f4efe6

Skærmtilnærmelser af populære riso-farver på en råhvid papirtone. Vælg to farver: pink og blå, eller gul og blågrøn, er klassiske par.

For at ramme den rigtigt skal du holde forskydningen lille, nogle få procent af bogstavhøjden, og lade farverne *multipliceres*, hvor de overlapper, i stedet for at den ene dækker den anden. Tilføj lidt korn til bogstaverne, hvis du kan: ægte riso-farve lægger sig lidt ujævnt på ubestrøget papir. Pink over blå giver en dyb violet i overlappet, og det er den detalje, der får effekten til at sidde.

## Den dobbelte teksteffekt

Som teknik er dobbelt den enkleste af de tre: én solid kopi af ordet i en kontrasterende farve, placeret bag og lidt forskudt fra originalen. Den læses som et silketryk eller et klistermærke, selvsikker og grafisk. I modsætning til en slagskygge er ekkoet skarpt og farverigt frem for mørkt og blødt. Skub forskydningen lidt længere, end det føles trygt, omkring 5 til 8 procent af bogstavhøjden; for tæt på ligner det en fejl.

- Varm bund, dybrødt ekko: `linear-gradient(135deg, #fde68a 0%, #fb923c 100%)`
- Mintbund, marineblåt ekko: `linear-gradient(135deg, #a7f3d0 0%, #22d3ee 100%)`
- Violet bund, lyserødt ekko: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`

Bunde, der passer til en dobbelt effekt. Ekkoets farve skal kontrastere med både bunden og bogstavernes flade.

## Spor-teksteffekten

Spor gentager ordet fire til otte gange bag sig selv, hver kopi et trin længere væk. Når kopierne skifter farve undervejs, for eksempel gennem en varm solnedgangspalet, får du det umiskendelige titellook fra 70'erne. Når de bliver svagere i dækning, får du bevægelse, som om ordet lige er ankommet. Hold trinene jævne og retningen ens; tilfældig afstand ligner noget, der er gået i stykker, ikke vintage.

Et opslag i højformat med ordene Far out sat stort over en varm gradient og detaljer om en tagterrasse-event nedenunder

En kort, høj overskrift på en varm bund: den form, et spor eller en dobbelt behandling har brug for.

En lodret storyforside til en lille forlagsmesse med et udgavenummer over titlen og detaljer nedenunder

En story til en zinemesse, hvor en tofarvet riso-finish på titlen ville passe lige ind.

## Retro teksteffekter i CSS

Alle tre kan bygges med `text-shadow`, plus en blandingstilstand til riso. Brug `em`-forskydninger, så effekten skalerer med skriftstørrelsen, og behold teksten som ægte, 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;
}
```

Til riso skal du skrive ordet to gange: `<h1 class="riso" data-text="Zinemesse">Zinemesse</h1>`. Multiply virker på lyse bunde, som ægte farve på papir. Nogle skærmlæsere oplæser genereret indhold, så ordet kan blive læst to gange.

> **Riso kræver en lys bund** Multiply gør mørkere, præcis som farve på papir, så den forsvinder på mørke baggrunde. Til et mørkt design skal du bruge den dobbelte effekt i stedet.

## Sådan bruger du retro teksteffekter godt

1. **Start med den rigtige skrift** Tung og enkel, eller en blød serif fra 70'erne. [Retro skrifttyper](https://gradiently.design/da/guide/retro-fonts) viser skrifter efter årti.
2. **Brug den på to til fem ord** Kun overskriften. Detaljerne forbliver flade og enkle.
3. **Hent farverne fra baggrunden** Ekkoet, sporet eller den anden farve skal komme fra den palet, der allerede er i designet.
4. **Hold forskydningen bevidst** Lille til riso, lidt dristigere til dobbelt, jævnt trinvis til spor.
5. **Brug én effekt pr. design** Riso plus spor plus en kontur er en udklædning. Én effekt er et valg.

### Undgå

- Et spor på en lang overskrift
- Riso-farver på sort baggrund
- Et ekko så tæt på, at det ligner en trykfejl
- Glød blandet ind mellem forskydningerne
- En ny effekt på hvert opslag

### Gør

- Et spor på ét eller to korte ord
- Riso på papirtoner og lyse farver
- En tydelig, selvsikker forskydning
- Kun skarpe, solide kopier
- Én retro effekt som kampagnens signatur

For det bredere udvalg af behandlinger, herunder konturer og ekstruderinger, se [teksteffekter](https://gradiently.design/da/guide/text-effects), [konturtekst](https://gradiently.design/da/guide/outline-text) og [3D-teksteffekter](https://gradiently.design/da/guide/3d-text-effect). Korn gør riso særligt overbevisende; [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) viser, hvordan du tilføjer det til en baggrund.

## Riso, Dobbelt og Spor i Gradiently

Skriftbehandlingerne i Gradiently omfatter Riso, Dobbelt og Spor, hver tegnet i Markens egne farver, så der ikke er kopier at stable i hånden. Deres udgaver læner sig grafisk: Riso trykker den anden farve som en fin halvtone, et strejf ude af register; Dobbelt tegner åbne bogstaver med en ekstra kontur rundt om; Spor sender svindende konturer tilbage bag solide ord. Marken holder ordene læselige ved at flytte sin roligste del bag dem, og dens korn giver en retro overskrift den trykte overflade, den vil have.

## FAQ

### Hvad er en riso-teksteffekt?

Den efterligner risografitryk: to farver trykt lidt forskudt, så de overlapper og blander sig til en tredje farve, hvor de mødes.

### Hvordan laver jeg en retro teksteffekt i CSS?

Stabl solide `text-shadow`-kopier uden sløring. Én kopi giver en dobbelt effekt, flere trinvise kopier giver et spor, og et multipliceret pseudoelement giver riso.

### Hvilke farver passer til en 70'er teksteffekt?

Varme solnedgangstrin som guld, orange, rust og brun, på en creme eller dyb brun bund.

### Hvad er forskellen på en dobbelt effekt og en slagskygge?

En dobbelt effekt er en skarp, farvet kopi forskudt bag ordet. En slagskygge er som regel mørk og sløret.