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

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.

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 explains what each tends to signal, and 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.

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

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). You don't need any punctuation before the name: the line break and the change of size already tell people who said it.

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.

Keep the calmest, most even part of the background behind the words, and check contrast there. Text on a 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.

1. 1

   Fix the layout

   Same typeface, same size range, same position for the quote and the name, every time.

2. 2

   Fix the background family

   One material or gradient family, varied slightly from post to post.

3. 3

   Give it a name or number

   A small label such as Thursday thought or No. 12 turns single posts into a series.

4. 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.