# Quote post design that doesn’t look like every other quote

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

Quote posts are easy to make and easy to ignore. The difference between the two is mostly typography, and a background nobody else is using.

## The short version

- A quote post works when the quote is short, accurately attributed and set large in a typeface with some character.
- Typographic quotation marks, with the opening mark hung outside the text, make a quote look set by a designer rather than typed.
- Attribution belongs on its own line in smaller type; a line break and a change of size separate it without any extra punctuation.
- Stock photos of sunsets and mountains are the reason most quote posts look alike, while a quiet gradient or texture of your own makes them recognisable.
- Quotes posted as a series, in one fixed layout, become a recognisable format that people learn to look for.

Good **quote post design** comes down to four things: a quote trimmed to its strongest line, set large in a typeface with character, attributed cleanly on its own line, and placed on a background that belongs to you instead of a stock sunset. Get those right and a quote post reads as a considered piece of design rather than one more tile in the feed.

## Choosing and trimming the quote

The best quote posts carry one thought that lands in a single reading. Long passages turn into small type, and small type gets scrolled past. Aim for a quote of about 8 to 20 words. If the full quote is longer, use the sentence that carries the idea and put the rest in the caption.

### Too much

- Three sentences of context before the point
- A paragraph shrunk to fit the square
- An unverified line credited to a famous name
- Your own words wrapped in someone else's name

### Just enough

- The single sentence that makes the point
- Few enough words to set them large
- A quote you have checked at its source
- Your own words, attributed to you, or no attribution

> **Check before you post** Quotes are among the most misattributed things online. If you can't find a line in the original book, talk or interview, don't post it under that name. Quoting a customer or colleague? Ask them first.

## Typography for quote posts

In a quote post the type *is* the design, so choose a face with some personality. A serif with a good italic suits reflective or literary quotes; a strong grotesque suits short, punchy lines; a display face can carry a single word or two. [Serif vs sans serif](https://gradiently.design/guide/serif-vs-sans-serif) explains what each tends to signal, and [font pairing](https://gradiently.design/guide/font-pairing) covers how to add a second face for the attribution.

- **Set it large.** On a 1080-pixel-wide post, a short quote can run at 70 to 110 pixels.
- **Tighten the leading.** Large lines look loose at normal line height; around 1.1 to 1.2 keeps them together.
- **Break lines by sense.** End each line at a natural pause, not wherever the text box happens to wrap.
- **Use typographic quotation marks.** Curly “ and ” instead of straight " marks, which look typed.
- **Hang the opening mark.** Let the opening quotation mark sit just outside the left edge so the letters line up.

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

Hanging punctuation on the web. Browser support for `hanging-punctuation` is limited, so check [caniuse](https://caniuse.com/css-hanging-punctuation) and keep the negative indent as a fallback. In a design tool, simply nudge the mark left.

A portrait quote post with a short quotation in large serif type and a small attribution

Portrait: the quote large and centred, attribution small below.

A square version of the same quote post on the same background

Square: the same quote with fewer lines, so it can stay just as large.

## How to attribute a quote cleanly

Attribution should be easy to find and quiet enough not to compete. Put the name on its own line, a clear step smaller than the quote, in a different weight or in capitals with a little extra letter spacing (see [letter spacing](https://gradiently.design/guide/letter-spacing)). You don't need any punctuation before the name: the line break and the change of size already tell people who said it.

| Part | Treatment | Example |
| --- | --- | --- |
| Quote | Large, regular or italic | “Make the thing you wish existed.” |
| Name | Small, medium weight or capitals | The speaker’s full name |
| Source | Smaller still, lighter | Studio notebook, 2026 |

Three steps of size and weight, so the eye reads the quote first, then who said it, then where.

## Backgrounds for quote posts

The reason most quote posts look the same is the background: a mountain at dawn, a beach, a blurred café. Those images are shared by thousands of accounts and say nothing about you. A quiet gradient or texture in your own colours does the opposite. It gives the words room, it's recognisably yours, and it keeps the reader's eye on the quote.

- Paper and ink: `linear-gradient(170deg, #f7f1e8 0%, #efe3d0 60%, #e2cfb3 100%)`
- Night reading: `linear-gradient(170deg, #0d1321 0%, #1d2d44 60%, #3e5c76 100%)`
- Soft dawn: `linear-gradient(170deg, #fde2e4 0%, #f6d5e8 50%, #d7d3f5 100%)`
- Candlelit brown: `radial-gradient(ellipse at 50% 40%, #3a2a1e 0%, #1f1610 70%, #120d09 100%)`

Four quiet grounds for quotes. Each keeps an even, calm area in the middle, where the words sit. Pair the two light ones with near-black ink and the two dark ones with a warm off-white.

Keep the calmest, most even part of the background behind the words, and check contrast there. [Text on a gradient](https://gradiently.design/guide/text-on-gradient) explains how to choose ink by lightness so the quote stays readable on every part of the field.

## Turning quotes into a recognisable series

One quote post is a nice moment. Twenty in the same layout become a format people recognise from across the feed, and a quote series is one of the easiest ways to add rhythm to a grid, as described in [Instagram grid aesthetic](https://gradiently.design/guide/instagram-grid-aesthetic).

1. **Fix the layout** Same typeface, same size range, same position for the quote and the name, every time.
2. **Fix the background family** One material or gradient family, varied slightly from post to post.
3. **Give it a name or number** A small label such as *Thursday thought* or *No. 12* turns single posts into a series.
4. **Keep a bank** Collect checked quotes in a list with their sources, so each new post takes minutes.

In Gradiently, a quote template can wear any Mark, and the Mark moves its calmest region behind the words so a quote reads without a box or shadow. Claiming a Mark makes that background yours alone.

## FAQ

### What font is best for quote posts?

A serif with a good italic suits reflective quotes, and a strong sans serif suits short, punchy lines. Choose one with character and set it large.

### How long should a quote be for a social post?

About 8 to 20 words works best. Longer quotes force small type; move the rest into the caption.

### How do I attribute a quote on a post?

Put the name on its own line, clearly smaller than the quote, with the source smaller still. A line break and a change of size are enough; no extra punctuation is needed.

### Why do my quote posts look generic?

Usually the background. Stock photos of landscapes are used by thousands of accounts; a quiet gradient or texture in your own colours makes quotes recognisable.