# Design av sitatinnlegg som ikke ligner alle andre sitater

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

Sitatinnlegg er lette å lage og lette å overse. Forskjellen ligger for det meste i typografien, og i en bakgrunn ingen andre bruker.

## The short version

- Et sitatinnlegg fungerer når sitatet er kort, riktig kreditert og satt stort i en skrift med litt karakter.
- Typografiske anførselstegn, med åpningstegnet hengende utenfor teksten, får et sitat til å se satt ut av en designer i stedet for tastet inn.
- Krediteringen hører hjemme på sin egen linje i mindre skrift, og et linjeskift og en endring i størrelse skiller den ut uten ekstra tegnsetting.
- Arkivbilder av solnedganger og fjell er grunnen til at de fleste sitatinnlegg ligner hverandre, mens en rolig gradient eller tekstur som er din egen, gjør dem gjenkjennelige.
- Sitater som publiseres som en serie, i ett fast oppsett, blir et gjenkjennelig format som folk lærer seg å se etter.

Godt **design av sitatinnlegg** handler om fire ting: et sitat kortet ned til sin sterkeste linje, satt stort i en skrift med karakter, ryddig kreditert på sin egen linje og plassert på en bakgrunn som tilhører deg i stedet for en solnedgang fra et bildearkiv. Får du til det, leses et sitatinnlegg som et gjennomtenkt stykke design og ikke som enda en flis i feeden.

## Velge og korte ned sitatet

De beste sitatinnleggene bærer én tanke som sitter etter én lesning. Lange avsnitt blir til liten skrift, og liten skrift blir scrollet forbi. Sikt mot et sitat på omtrent 8 til 20 ord. Hvis hele sitatet er lengre, bruker du setningen som bærer ideen, og legger resten i bildeteksten.

### For mye

- Tre setninger med kontekst før poenget
- Et avsnitt krympet for å passe i kvadratet
- En ubekreftet linje kreditert et kjent navn
- Dine egne ord pakket inn i noen andres navn

### Akkurat nok

- Den ene setningen som gjør poenget
- Få nok ord til å sette dem stort
- Et sitat du har sjekket i kilden
- Dine egne ord, kreditert deg, eller ingen kreditering

> **Sjekk før du publiserer** Sitater er noe av det som oftest blir feilkreditert på nettet. Hvis du ikke finner en linje i den opprinnelige boken, talen eller intervjuet, publiserer du den ikke under det navnet. Siterer du en kunde eller kollega? Spør dem først.

## Typografi for sitatinnlegg

I et sitatinnlegg *er* skriften designet, så velg en skrift med litt personlighet. En antikva med en god kursiv passer til reflekterende eller litterære sitater, en sterk grotesk passer til korte, slagkraftige linjer, og en displayskrift kan bære ett eller to ord. [Seriff eller sans seriff](https://gradiently.design/nb/guide/serif-vs-sans-serif) forklarer hva hver av dem pleier å signalisere, og [skriftparing](https://gradiently.design/nb/guide/font-pairing) tar for seg hvordan du legger til en skrift nummer to til krediteringen.

- **Sett det stort.** På et innlegg som er 1080 piksler bredt, kan et kort sitat stå i 70 til 110 piksler.
- **Stram linjeavstanden.** Store linjer ser løse ut med vanlig linjehøyde. Rundt 1,1 til 1,2 holder dem sammen.
- **Bryt linjene etter mening.** Avslutt hver linje ved en naturlig pause, ikke der tekstboksen tilfeldigvis bryter.
- **Bruk typografiske anførselstegn.** Ekte « og » i stedet for rette "-tegn, som ser tastet inn ut.
- **La åpningstegnet henge.** La det første anførselstegnet stå like utenfor venstrekanten, så bokstavene står på linje.

```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; }
}
```

Hengende tegnsetting på nettet. Nettleserstøtten for `hanging-punctuation` er begrenset, så sjekk [caniuse](https://caniuse.com/css-hanging-punctuation) og behold det negative innrykket som reserve. I et designverktøy dytter du ganske enkelt tegnet mot venstre.

Et stående sitatinnlegg med et kort sitat i stor antikvaskrift og en liten kreditering

Stående: sitatet stort og sentrert, krediteringen liten under.

En kvadratisk versjon av det samme sitatinnlegget på den samme bakgrunnen

Kvadrat: det samme sitatet med færre linjer, så det kan være like stort.

## Slik krediterer du et sitat ryddig

Krediteringen skal være lett å finne og stille nok til ikke å konkurrere. Sett navnet på sin egen linje, et tydelig trinn mindre enn sitatet, i en annen vekt eller i versaler med litt ekstra bokstavavstand (se [bokstavavstand](https://gradiently.design/nb/guide/letter-spacing)). Du trenger ingen tegnsetting foran navnet: linjeskiftet og endringen i størrelse forteller allerede hvem som sa det.

| Del | Behandling | Eksempel |
| --- | --- | --- |
| Sitat | Stort, normal eller kursiv | «Lag det du skulle ønske fantes.» |
| Navn | Lite, medium vekt eller versaler | Det fulle navnet til den som sa det |
| Kilde | Enda mindre, lettere | Studionotatbok, 2026 |

Tre trinn i størrelse og vekt, så øyet leser sitatet først, deretter hvem som sa det, og så hvor.

## Bakgrunner til sitatinnlegg

Grunnen til at de fleste sitatinnlegg ser like ut, er bakgrunnen: et fjell ved daggry, en strand, en uskarp kafé. Disse bildene deles av tusenvis av kontoer og sier ingenting om deg. En rolig gradient eller tekstur i dine egne farger gjør det motsatte. Den gir ordene rom, den er gjenkjennelig din, og den holder leserens blikk på sitatet.

- Papir og blekk: `linear-gradient(170deg, #f7f1e8 0%, #efe3d0 60%, #e2cfb3 100%)`
- Nattlesing: `linear-gradient(170deg, #0d1321 0%, #1d2d44 60%, #3e5c76 100%)`
- Mykt daggry: `linear-gradient(170deg, #fde2e4 0%, #f6d5e8 50%, #d7d3f5 100%)`
- Brunt i stearinlys: `radial-gradient(ellipse at 50% 40%, #3a2a1e 0%, #1f1610 70%, #120d09 100%)`

Fire rolige grunner til sitater. Hver har et jevnt, rolig område i midten, der ordene står. Kombiner de to lyse med nesten svart blekk og de to mørke med en varm offwhite.

Hold den roligste og jevneste delen av bakgrunnen bak ordene, og sjekk kontrasten der. [Tekst på en gradient](https://gradiently.design/nb/guide/text-on-gradient) forklarer hvordan du velger blekk etter lyshet, så sitatet forblir lesbart på alle deler av feltet.

## Gjør sitater til en gjenkjennelig serie

Ett sitatinnlegg er et fint øyeblikk. Tjue i samme oppsett blir et format folk kjenner igjen tvers over feeden, og en sitatserie er en av de enkleste måtene å gi et rutenett rytme på, slik det beskrives i [estetikk i Instagram-rutenettet](https://gradiently.design/nb/guide/instagram-grid-aesthetic).

1. **Lås oppsettet** Samme skrift, samme størrelsesspenn, samme plassering av sitatet og navnet, hver gang.
2. **Lås bakgrunnsfamilien** Én familie av materialer eller gradienter, variert litt fra innlegg til innlegg.
3. **Gi den et navn eller nummer** En liten etikett som *Torsdagstanken* eller *Nr. 12* gjør enkeltinnlegg til en serie.
4. **Ha en bank** Samle sjekkede sitater i en liste med kildene, så hvert nye innlegg tar minutter.

I Gradiently kan en sitatmal bære en hvilken som helst Mark, og Marken flytter sitt roligste område bak ordene, så et sitat kan leses uten boks eller skygge. Når du sikrer deg en Mark, blir den bakgrunnen bare din.

## FAQ

### Hvilken skrift er best til sitatinnlegg?

En antikva med en god kursiv passer til reflekterende sitater, og en sterk grotesk passer til korte, slagkraftige linjer. Velg en med karakter og sett den stort.

### Hvor langt bør et sitat være i et innlegg i sosiale medier?

Omtrent 8 til 20 ord fungerer best. Lengre sitater tvinger frem liten skrift, så flytt resten til bildeteksten.

### Hvordan krediterer jeg et sitat i et innlegg?

Sett navnet på sin egen linje, tydelig mindre enn sitatet, med kilden enda mindre. Et linjeskift og en endring i størrelse er nok. Det trengs ingen ekstra tegnsetting.

### Hvorfor ser sitatinnleggene mine generiske ut?

Som regel er det bakgrunnen. Arkivbilder av landskap brukes av tusenvis av kontoer, mens en rolig gradient eller tekstur i dine egne farger gjør sitater gjenkjennelige.