# Texteffekter som inte ser gammalmodiga ut: kontur, extrudering, eko

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

De flesta texteffekter ser gammalmodiga ut för att de läggs på allt, i full styrka och utan skäl. På ett enda ord, i rätt vikt och färg, hör de till typografins mest uttrycksfulla verktyg.

## The short version

- Texteffekter är behandlingar som läggs på bokstäver, till exempel konturer, innerlinjer, extrudering, förskjutna ekon, tryckförskjutning och sken.
- Effekter fungerar bäst på några få stora ord i tung vikt, där de ger karaktär utan att göra texten svårare att läsa.
- Effekter ser gammalmodiga ut när de läggs i full styrka på varje rad, staplas på varandra eller används för att rädda svag typografi.
- Konturtext kräver ett tjockt, enkelt typsnitt och en lugn bakgrund, eftersom bokstäverna förlorar sin solida form.
- Välj en effekt per design och hämta dess färger från bakgrundens palett, så ser den designad ut i stället för pålagd.

**Texteffekter** är behandlingar som läggs på bokstäver, till exempel en kontur, en innerlinje, en 3D-extrudering, ett förskjutet eko, en tryckförskjutning eller ett mjukt sken. De ser inte gammalmodiga ut när tre regler håller: använd en effekt per design, lägg den på några få stora ord i tung vikt och hämta färgerna från bakgrunden i stället för från en förinställning. Effekter fallerar när de staplas, sprids över varje rad eller används för att rädda typografi som inte fungerade.

Den här guiden går igenom de viktigaste effektfamiljerna, när var och en passar ett budskap, hur du håller dem läsbara och hur du bygger några i CSS. Har du inte valt typsnitt än, börja med [displaytypsnitt](https://gradiently.design/sv/guide/display-fonts), eftersom de flesta effekter kräver stora, robusta bokstäver för att fungera.

## De viktigaste sorterna av texteffekter

De flesta bokstavsbehandlingar hör till en handfull familjer. Var och en har sina egna associationer, vilket är varför att välja en i själva verket är att välja ett tonläge.

| Effekt | Så ser den ut | Tonen den sätter | Risk för läsbarheten |
| --- | --- | --- | --- |
| Kontur | Bokstäver ritade som enbart linjer | Luftig, modern, redaktionell | Hög på stökiga bakgrunder |
| Innerlinje | En tunn linje inuti varje streck | Vintageskyltar, hantverk, sport | Låg i stora storlekar |
| Extrudering | Bokstäver med 3D-djup | Retro, lekfull, högljudd | Måttlig |
| Dubbel eller eko | En förskjuten kopia eller ett spår bakom | Rörelse, musik, energi | Måttlig |
| Utskuren | Bokstäver skurna i bitar och förskjutna | Spänning, mode, teknik | Måttlig |
| Riso | Förskjutna färglager, tryckstruktur | Indietryck, zines, värme | Låg om förskjutningen är liten |
| Halo eller sken | Mjukt ljus kring bokstäverna | Natt, neon, lugn lyx | Låg på mörka bakgrunder |

Sju familjer av bokstavseffekter. Ju längre åt höger risken ligger, desto mer omsorg kräver effekten.

## När en texteffekt hjälper och när den stjälper

En effekt hjälper när den bär en mening som orden inte kan bära själva. Ett eko bakom *Högt* får det att vibrera. En extrudering på en retromenytavla placerar den i tiden. Ett sken på en sen kvällsaffisch antyder rummet. När effekten inte säger något blir den dekoration, och dekoration blir snabbt daterad.

En stående design med ett stort ord på en levande gradient, den sortens layout som passar en bokstavseffekt

Ett stort ord är där en effekt förtjänar sin plats: det finns lite att läsa och mycket att känna.

En stående evenemangsaffisch med en formgiven titel och enkla stöddetaljer på en mörk gradient

På en evenemangsaffisch hör effekten bara hemma på titeln. Datum och detaljer förblir enkla.

### Undvik

- En effekt på både rubriken och brödtexten
- Kontur plus skugga plus sken på ett ord
- Standardfärger, som en svart skugga på allt
- Tunna eller lätta typsnitt under kraftiga effekter
- Effekter som får svag text att se spännande ut

### Gör så

- En effekt, på de få största orden
- En behandling per design, använd med övertygelse
- Effektfärger hämtade från bakgrundens palett
- Tunga, enkla bokstavsformer som klarar effekten
- Text som fungerar utan effekt, och sedan en effekt som ger ton

## Så gör du konturtext läsbar

Konturtext är den effekt som oftast misslyckas, eftersom den tar bort den solida formen som gör bokstäver lätta att känna igen. Använd den på en tung sans eller slab med öppna former, i stora storlekar, över en lugn bakgrund. Gör strecket tillräckligt tjockt för att läsas som en linje och inte som ett hårstrå: cirka 2 till 4 procent av teckenstorleken är en bra början.

Ett pålitligt mönster parar ett solitt ord med ett konturerat, till exempel *Sommar* solitt och *Sessions* konturerat. Det solida ordet förankrar läsningen; konturen ger rytm. Undvik helt att kontura liten text, och kolla den på en mobil, där tunna streck försvinner först.

```css
/* Outline: a stroke, no fill. */
.outline {
  color: transparent;
  -webkit-text-stroke: 0.03em #f5f0ff;
}

/* Extrude: stacked shadows, each 1px further. */
.extrude {
  color: #fde8d0;
  text-shadow:
    1px 1px 0 #d9485f,
    2px 2px 0 #d9485f,
    3px 3px 0 #b83250,
    4px 4px 0 #b83250,
    5px 5px 0 #8f2442,
    6px 6px 0 #8f2442;
}

/* Echo: one offset copy in a palette colour. */
.echo {
  color: #ffffff;
  text-shadow: 0.06em 0.06em 0 #7c3aed;
}

/* Halo: a soft glow for dark grounds. */
.halo {
  color: #fff7ed;
  text-shadow: 0 0 0.25em rgb(251 146 60 / 0.55),
               0 0 0.8em rgb(244 114 182 / 0.35);
}
```

Fyra effekter i ren CSS. `-webkit-text-stroke` fungerar i alla större webbläsare trots prefixet. Skuggor i `em` skalas med texten.

> **Tillgänglighet** Effekter byggda med CSS behåller orden som riktig text, så skärmläsare, sökmotorer och översättningsverktyg kan fortfarande läsa dem. Effekter som bränts in i bilder kräver att orden upprepas i alt-texten.

## Välja färger till texteffekter

Effekter ser pålagda ut när deras färger kommer från ingenstans. De ser designade ut när de kommer från bakgrunden. Hämta extruderingens sidfärg från gradientens mörkaste del, ekot från dess mest mättade färg och skenet från dess ljusaste. Då läses effekten som ljus och material från samma scen.

- Bakgrund: nattviolett: #1a1033
- Eko: violett: #7c3aed
- Sken: rosa ljus: #f472b6
- Bokstavsyta: varmvit: #fde8d0

Effektfärger hämtade från en enda gradient: en mörk bakgrund, ett mättat eko, ett sken och en varm bokstavsyta.

Låt själva bokstavsytan ha hög kontrast mot bakgrunden och låt effekten ligga mellan dem i ljushet. Då ger effekten djup utan att ta kontrast från bokstäverna. För de grundläggande kontrastreglerna, se [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility).

## Texteffekter i Gradiently

Gradiently Studio har åtta bokstavsbehandlingar: Kontur, Innerlinje, Utskuren, Extrudering, Dubbel, Spår, Riso och Halo. En Mark vet också var orden är: dess lugnaste område flyttar sig bakom dem, och automatisk textfärg väljer ljus eller mörk text per rad ur Markens egen palett, vilket ger ett behandlat ord en stabil bakgrund att vila mot. Samma regler gäller fortfarande: en behandling, några få ord, ett tungt typsnitt.

En kvadratisk design med en kort fras i stor stil på en lugn gradient, med gott om tomt utrymme

En enda behandlad fras på en lugn yta visar återhållsamheten göra jobbet.

Mer om att få text att synas på färgstarka bakgrunder finns i [text på gradient](https://gradiently.design/sv/guide/text-on-gradient); för effekter som är inbyggda i själva gradienten, se [gradienttext i CSS](https://gradiently.design/sv/guide/css-gradient-text).

## FAQ

### Vilka texteffekter ser moderna ut?

Återhållsamma: en tjock kontur ihop med ett solitt ord, ett litet förskjutet eko, en diskret riso-förskjutning eller ett mjukt sken på en mörk bakgrund, var och en på ett eller två stora ord.

### Hur gör jag konturtext i CSS?

Sätt textfärgen till transparent och lägg till `-webkit-text-stroke` med en bredd och en färg, till exempel `-webkit-text-stroke: 0.03em #ffffff`. Det fungerar i alla större webbläsare.

### Hur gör jag en 3D-texteffekt?

Stapla flera `text-shadow`-lager, vart och ett förskjutet en pixel längre åt samma håll och allt mörkare bakåt. Hämta färgerna från din bakgrund så att djupet ser ut att vara belyst av samma ljus.

### Försämrar texteffekter läsbarheten?

Det kan de göra. Håll effekterna till stora, tunga ord, en effekt per design, och kontrollera att bokstavsytan fortfarande har stark kontrast mot bakgrunden.