# Letteringeffekter: Kontur, Innerlinje, Utskuren, Extrudering m.fl.

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

En behandling gör en rad text till lettering, ritad i din Marks egna färger. Här är alla åtta, med uppgifterna var och en är bra på och de du bör hoppa över.

## The short version

- Gradiently har åtta letteringeffekter: Kontur, Innerlinje, Utskuren, Extrudering, Dubbel, Spår, Riso och Halo.
- Varje behandling ritas i färgerna från designens Mark, så letteringen hör alltid ihop med bakgrunden.
- Letteringeffekter fungerar bäst på korta displayord som en titel, ett namn eller ett enda ord, inte på brödtext.
- Kontur, Utskuren och Extrudering bär sin egen kontrast och passar djärva affischer. Innerlinje, Dubbel och Riso passar redaktionella och tryckta uttryck.
- Använd en behandling per design, på raden som betyder mest, och håll stödtexten enkel.

Gradiently har åtta **letteringeffekter**: Kontur, Innerlinje, Utskuren, Extrudering, Dubbel, Spår, Riso och Halo. Var och en gör en rad text till lettering ritad i din Marks egna färger: höjdlinjer som ringar in orden, en linje inskuren i varje bokstav, ord utskurna ur en platta, djupa tredimensionella bokstäver och mer. De är till för displayord, en titel eller ett namn, och fungerar bäst en i taget, på raden du helst vill att folk ska se.

## Alla åtta letteringbehandlingar i korthet

| Behandling | Vad den ritar | Känns som | Bäst för |
| --- | --- | --- | --- |
| **Kontur** | Höjdlinjer som böljar ut runt orden | Kartor, topografi, ljud | Festivalaffischer, skivomslag, friluftsvarumärken |
| **Innerlinje** | En linje inskuren i varje bokstav, så att Marken syns igenom som en andra färg | Skyltar, gammaldags tryck | Titlar i butiksskyltsstil, menyer, etiketter |
| **Utskuren** | Ord utskurna ur en massiv platta | Stencil, pappershantverk | Djärva omslag, rea-inlägg, budskap i ett ord |
| **Extrudering** | Djupa bokstäver med sidor i Markens färger | Solid, skulptural, retro | Evenemangstitlar, lanseringar, YouTube-tumbilder |
| **Dubbel** | Öppna bokstäver ritade två gånger, något isär | Eko, rörelse, mode | Redaktionella omslag, musik, nattliv |
| **Spår** | Konturer som släpar efter bokstäverna, med en spårfärg du kan ställa in | Fart, rörelse, 1970-talet | Sport, nedräkningar, energiska stories |
| **Riso** | Två färger något ur register, med korniga prickar | Risografiska fanzin, indietryck | Affischer, fanzin, bagerier, bokhandlar |
| **Halo** | Ett mjukt ljus i Markens färg runt bokstäverna | Neon, skymning, drömskt | Bara dekoration, aldrig som lösning på läsbarhet |

De åtta behandlingarna. Var och en ritas ur Markens palett, så att byta Mark färgar om letteringen med den.

## Kontur, Utskuren och Extrudering: lettering med egen kontrast

De här tre bygger in en stark kant i bokstäverna, vilket är varför de håller på livliga Marks. **Kontur** ringar in orden med linjer som på en reliefkarta, så att letteringen verkar resa sig ur bakgrunden. **Utskuren** sätter orden som former utskurna ur en massiv platta, vilket läses som säkert och grafiskt. **Extrudering** ger varje bokstav djup, ritad i Markens färger, den klassiska looken för en lanseringstitel eller en tumbild.

En stående affisch med det enda ordet Solstånd satt mycket stort på en varm Mark-gradient

Ett ord, mycket stort: den skala som Kontur och Extrudering är gjorda för.

Samma Solstånd-design som en evenemangsaffisch, med titeln stor och enkla stöddetaljer under

Den behandlade titeln överst, med enkla detaljer under. Bara titeln får effekten.

Vill du veta hur extruderad text och konturtext fungerar i allmänhet förklarar [3D-texteffekter](https://gradiently.design/sv/guide/3d-text-effect) och [konturtext](https://gradiently.design/sv/guide/outline-text) hantverket bakom dem.

## Innerlinje, Dubbel och Riso: tryck- och redaktionsfamiljen

**Innerlinje** skär in en enda linje i varje bokstav, och eftersom linjen visar själva Marken blir bakgrunden letteringens andra färg. Den passar bäst med tunga, breda typsnitt, där det finns plats inne i strecket. **Dubbel** ritar öppna bokstäver två gånger, något förskjutna, för ett eko som känns som mode- eller musiktryck. **Riso** härmar en risograf: två färger som inte riktigt ligger rätt och korniga prickar, perfekt för allt som ska kännas handtryckt.

> **Matcha behandlingen mot typsnittet** Innerlinje och Utskuren behöver tjocka streck, så para dem med ett tungt displaytypsnitt. Dubbel och Spår ser bäst ut på öppna, enkla bokstäver. Riso förlåter nästan vilket typsnitt som helst, vilket gör det till ett säkert första försök.

## Spår och Halo: rörelse och stämning

**Spår** upprepar ett ords kontur bakom det, som bokstäver som lämnar ett kölvatten. Du kan ställa in spårfärgen, och det läses som fart: bra för sport, nedräkningar och allt som ska kännas i rörelse även i en stillbild. **Halo** omger bokstäverna med ett mjukt ljus i Markens färg. Det är rent dekorativt, en stämning snarare än ett verktyg, och aldrig ett sätt att rädda svårläst text. Om en rad har svårt att synas, höj Markens reaktionsnivå eller låt [Auto-bläck](https://gradiently.design/sv/guide/auto-ink-legibility) välja det andra bläcket i stället.

## Välj en letteringeffekt för uppgiften

| Du gör | Prova först | Prova sedan |
| --- | --- | --- |
| En affisch för en spelning eller festival | Kontur | Riso |
| Ett inlägg om en produktlansering | Extrudering | Utskuren |
| En menytitel för kafé eller bageri | Innerlinje | Riso |
| En YouTube-tumbild | Extrudering | Utskuren |
| Ett omslag eller en karusellöppning i tidningsstil | Dubbel | Innerlinje |
| En nedräkning eller en sportstory | Spår | Extrudering |
| Ett fanzin eller en affisch för en bokhandel | Riso | Dubbel |

Utgångspunkter, inte regler. Prova två, titta på båda i den storlek folk faktiskt ser dem i, och behåll den som läses först.

### Undvik

- En behandling på brödtext eller små detaljer
- Två olika behandlingar i en design
- Långa rubriker på åtta ord eller mer
- Halo som används för att göra en svag rad läsbar

### Gör så här

- En behandling på ett eller två displayord
- Enkel, väl avståndssatt stödtext
- Tunga typsnitt för Innerlinje och Utskuren
- Kontrollera den på mobilen, i verklig storlek

## Så lägger du till en letteringeffekt i Studio

1. **Markera texten** Välj rubriken eller ordet du vill behandla. Håll allt annat som vanlig text.
2. **Välj en behandling** Välj en av de åtta letteringbehandlingarna. Den ritas direkt i färgerna från designens Mark.
3. **Justera texten** Gå tyngre eller bredare om effekten ser trång ut, och lägg till lite teckenavstånd för Dubbel och Spår.
4. **Prova en annan Mark** Byt Mark och se letteringen färgas om med den. Det är det snabbaste sättet att bedöma en behandling.
5. **Kontrollera varje storlek** Ändra storlek till en story eller tumbild och se till att det behandlade ordet fortfarande syns i den skalan.

## Letteringeffekter i CSS, för webben

Behöver du en liknande look på en webbplats går två av dem att översätta rent till CSS: en kontur i andan av Dubbel och en stegvis extrudering. Båda använder riktig text, så de förblir markerbara och tillgängliga.

```css
/* Open outline letters, in the spirit of Double */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px #f4b26a;
  text-shadow: 6px 6px 0 #7a2e5c;
}

/* A stepped extrusion in two tones */
.extrude {
  color: #fbe7d4;
  text-shadow:
    1px 1px 0 #c2577a,
    2px 2px 0 #c2577a,
    3px 3px 0 #a3456a,
    4px 4px 0 #a3456a,
    5px 5px 0 #7a2e5c,
    6px 6px 0 #7a2e5c;
}
```

Hårda skuggor utan oskärpa bygger djup snarare än ett sken. `-webkit-text-stroke` stöds i alla aktuella webbläsare, se [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke).

För den bredare familjen av effekter, även de som inte översätts bra till webben, se [texteffekter](https://gradiently.design/sv/guide/text-effects). Och om du funderar på om du behöver lettering alls är [lettering eller typografi](https://gradiently.design/sv/guide/lettering-vs-typography) en användbar läsning.

## FAQ

### Vilka letteringeffekter har Gradiently?

Åtta: Kontur, Innerlinje, Utskuren, Extrudering, Dubbel, Spår, Riso och Halo, var och en ritad i färgerna från designens Mark.

### Kan jag använda letteringeffekter på brödtext?

Det är bäst att låta bli. Behandlingarna är gjorda för korta displayord, och enkel text håller längre stycken lättlästa.

### Vilken letteringeffekt är bäst för en affisch?

Kontur, Extrudering och Riso är starka affischval. Kontur och Extrudering bär sin egen kontrast, och Riso ger en tryckt känsla.

### Ändrar letteringeffekter färg med Marken?

Ja. Varje behandling ritas ur Markens palett, så att byta Mark färgar om letteringen.

### Ska jag använda Halo för att göra text lättare att läsa?

Nej. Halo är dekorativt. För läsbarhet, höj Markens reaktionsnivå eller låt Auto-bläck välja det andra bläcket.