# Citatinlägg som inte ser ut som alla andra citat

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

Citatinlägg är lätta att göra och lätta att ignorera. Skillnaden mellan de två handlar mest om typografi och om en bakgrund som ingen annan använder.

## The short version

- Ett citatinlägg fungerar när citatet är kort, korrekt tillskrivet och satt stort i ett typsnitt med lite karaktär.
- Typografiska citattecken, med det inledande tecknet hängande utanför texten, får ett citat att se ut som att en formgivare har satt det i stället för att det har skrivits in.
- Källhänvisningen hör hemma på en egen rad i mindre stil. En radbrytning och en ändring av storlek skiljer den åt utan extra skiljetecken.
- Stockfoton av solnedgångar och berg är skälet till att de flesta citatinlägg ser likadana ut, medan en tyst gradient eller textur av ditt eget gör dem igenkännbara.
- Citat som publiceras som en serie, i en fast layout, blir ett igenkännbart format som folk lär sig leta efter.

Bra **design av citatinlägg** handlar om fyra saker: ett citat kortat till sin starkaste rad, satt stort i ett typsnitt med karaktär, tydligt tillskrivet på en egen rad och placerat på en bakgrund som tillhör dig i stället för en stock-solnedgång. Får du de rätt läses ett citatinlägg som en genomtänkt design och inte som ännu en ruta i flödet.

## Välja och korta citatet

De bästa citatinläggen bär en enda tanke som landar vid en enda läsning. Långa stycken blir liten text, och liten text scrollas förbi. Sikta på ett citat på ungefär 8 till 20 ord. Om hela citatet är längre, använd meningen som bär idén och lägg resten i bildtexten.

### För mycket

- Tre meningar bakgrund före poängen
- Ett stycke som krympts för att få plats i kvadraten
- En obekräftad rad som tillskrivs ett känt namn
- Dina egna ord inlindade i någon annans namn

### Precis lagom

- Den enda meningen som gör poängen
- Så få ord att de går att sätta stora
- Ett citat du har kontrollerat vid källan
- Dina egna ord, tillskrivna dig, eller ingen källhänvisning

> **Kontrollera innan du publicerar** Citat hör till det som oftast felciteras på nätet. Om du inte hittar en rad i originalboken, föredraget eller intervjun ska du inte publicera den under det namnet. Citerar du en kund eller kollega? Fråga dem först.

## Typografi för citatinlägg

I ett citatinlägg *är* typen designen, så välj ett typsnitt med personlighet. En serif med en bra kursiv passar reflekterande eller litterära citat, en kraftig grotesk passar korta, träffsäkra rader och ett displaytypsnitt kan bära ett eller två ord. [Serif eller sans serif](https://gradiently.design/sv/guide/serif-vs-sans-serif) förklarar vad var och en tenderar att signalera, och [typsnittspar](https://gradiently.design/sv/guide/font-pairing) går igenom hur du lägger till ett andra typsnitt för källhänvisningen.

- **Sätt det stort.** I ett inlägg som är 1080 pixlar brett kan ett kort citat gå i 70 till 110 pixlar.
- **Dra åt radavståndet.** Stora rader ser lösa ut med normalt radavstånd. Runt 1,1 till 1,2 håller ihop dem.
- **Bryt rader efter mening.** Avsluta varje rad vid en naturlig paus, inte där textrutan råkar bryta.
- **Använd typografiska citattecken.** Svenska ”…” i stället för raka "-tecken, som ser maskinskrivna ut.
- **Häng det inledande tecknet.** Låt det inledande citattecknet sitta strax utanför vänsterkanten så att bokstäverna linjerar.

```css
.quote {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.15;
  text-wrap: balance;
  hanging-punctuation: first;
}

/* Where hanging-punctuation isn't supported, pull the first line back by the width of the mark. */
@supports not (hanging-punctuation: first) {
  .quote { text-indent: -0.42em; }
}
```

Hängande skiljetecken på webben. Webbläsarstödet för `hanging-punctuation` är begränsat, så kontrollera [caniuse](https://caniuse.com/css-hanging-punctuation) och behåll det negativa indraget som reserv. I ett designverktyg räcker det att putta tecknet åt vänster.

Ett stående citatinlägg med ett kort citat i stor serif och en liten källhänvisning

Stående: citatet stort och centrerat, källhänvisningen liten under.

En kvadratisk version av samma citatinlägg på samma bakgrund

Kvadrat: samma citat med färre rader, så att det kan förbli lika stort.

## Så tillskriver du ett citat rent

Källhänvisningen ska vara lätt att hitta och tillräckligt tyst för att inte konkurrera. Sätt namnet på en egen rad, ett tydligt steg mindre än citatet, i en annan vikt eller i versaler med lite extra bokstavsavstånd (se [bokstavsavstånd](https://gradiently.design/sv/guide/letter-spacing)). Du behöver inget skiljetecken före namnet: radbrytningen och storleksändringen talar redan om vem som sa det.

| Del | Behandling | Exempel |
| --- | --- | --- |
| Citat | Stort, normalt eller kursivt | ”Gör det du saknar i världen.” |
| Namn | Litet, mellanfet eller versaler | Talarens fulla namn |
| Källa | Ännu mindre, ljusare | Ateljéns anteckningsbok, 2026 |

Tre steg i storlek och vikt, så att blicken läser citatet först, sedan vem som sa det och sedan var.

## Bakgrunder för citatinlägg

Skälet till att de flesta citatinlägg ser likadana ut är bakgrunden: ett berg i gryningen, en strand, ett suddigt café. De bilderna delas av tusentals konton och säger ingenting om dig. En tyst gradient eller textur i dina egna färger gör tvärtom. Den ger orden utrymme, den är igenkännbart din och den håller läsarens blick på citatet.

- Papper och bläck: `linear-gradient(170deg, #f7f1e8 0%, #efe3d0 60%, #e2cfb3 100%)`
- Nattläsning: `linear-gradient(170deg, #0d1321 0%, #1d2d44 60%, #3e5c76 100%)`
- Mjuk gryning: `linear-gradient(170deg, #fde2e4 0%, #f6d5e8 50%, #d7d3f5 100%)`
- Levande ljus i brunt: `radial-gradient(ellipse at 50% 40%, #3a2a1e 0%, #1f1610 70%, #120d09 100%)`

Fyra tysta bottnar för citat. Var och en behåller en jämn, lugn yta i mitten, där orden ligger. Para ihop de två ljusa med nästan svart text och de två mörka med en varm off-white.

Låt den lugnaste, jämnaste delen av bakgrunden ligga bakom orden och kontrollera kontrasten där. [Text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) förklarar hur du väljer textfärg efter ljushet så att citatet förblir läsbart på varje del av ytan.

## Göra citat till en igenkännbar serie

Ett citatinlägg är ett fint ögonblick. Tjugo i samma layout blir ett format som folk känner igen från andra sidan flödet, och en citatserie är ett av de enklaste sätten att ge ett rutnät rytm, som det beskrivs i [Instagram-rutnätets estetik](https://gradiently.design/sv/guide/instagram-grid-aesthetic).

1. **Lås layouten** Samma typsnitt, samma storleksspann, samma plats för citatet och namnet, varje gång.
2. **Lås bakgrundsfamiljen** En material- eller gradientfamilj, som varieras något från inlägg till inlägg.
3. **Ge den ett namn eller nummer** En liten etikett som *Torsdagstanke* eller *Nr 12* gör enskilda inlägg till en serie.
4. **För ett förråd** Samla kontrollerade citat i en lista med sina källor, så att varje nytt inlägg tar minuter.

I Gradiently kan en citatmall bära vilken Mark som helst, och Marken flyttar sin lugnaste yta bakom orden så att ett citat läses utan ruta eller skugga. Att säkra en Mark gör den bakgrunden till din alldeles egen.

## FAQ

### Vilket typsnitt är bäst för citatinlägg?

En serif med en bra kursiv passar reflekterande citat, och en kraftig sans serif passar korta, träffsäkra rader. Välj ett med karaktär och sätt det stort.

### Hur långt ska ett citat vara i ett inlägg i sociala medier?

Ungefär 8 till 20 ord fungerar bäst. Längre citat tvingar fram liten text, så flytta resten till bildtexten.

### Hur anger jag källan till ett citat i ett inlägg?

Sätt namnet på en egen rad, tydligt mindre än citatet, med källan ännu mindre. En radbrytning och en ändring av storlek räcker, inga extra skiljetecken behövs.

### Varför ser mina citatinlägg generiska ut?

Oftast är det bakgrunden. Stockfoton av landskap används av tusentals konton, medan en tyst gradient eller textur i dina egna färger gör citaten igenkännbara.