Kort fortalt
- 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.
På denne side
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.
Føles
Passer til
Føles
Passer til
Føles
Passer til
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.
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.
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.
En kort, høj overskrift på en varm bund: den form, et spor eller en dobbelt behandling har brug for.
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.
/* 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;
}<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.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 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, konturtekst og 3D-teksteffekter. Korn gør riso særligt overbevisende; kornede gradienter 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.
Spørgsmål, folk stiller
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.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil