Back to Blog
testimonial-design
typography
conversion-optimisation
landing-page-design
readability
b2b-saas

Testimonial Quote Card Typography and Readability — Why Most Wall Designs Lose 20-30% of the Read Rate to Type Choices Alone

ProofShow Team··8 min read

A testimonial program has two failure modes. The first is content failure — the quote itself is weak. The second is presentation failure — the quote is strong but visitors do not actually read it. The second failure is more common and almost entirely under your control, because the limiting factor is typography choices that designers make in five minutes and never revisit.

The unit of measurement for testimonial effectiveness is not impressions or even time-on-page. It is read-through rate: of the visitors whose eyes land on a quote card, what percentage actually parse the words. A quote with a 35% read-through and average copy outperforms a quote with a 15% read-through and great copy by a significant margin, because conversion lift only happens for the visitors who finished reading.

This guide breaks down the four typography decisions that determine read-through rate and the specific defaults that perform.

Why typography is upstream of every other testimonial decision

Most testimonial-program advice assumes the visitor reads the quote. The advice — quote selection, attribution, photo, role title — is downstream of that assumption. But the assumption itself is the leak. Eye-tracking studies on B2B landing pages consistently show that quote cards receive a 1-3 second visual fixation per visitor, during which the visitor decides whether to read the rest. Typography is what determines that decision.

The four decisions that drive the result are quote-mark style, line length, type contrast (size and weight relationships between quote and attribution), and attribution hierarchy. None of them require a designer; all four are configuration choices in any landing-page builder. Most teams make all four wrong by default because the templates ship with aesthetic defaults rather than read-through-optimised defaults.

Decision 1: Quote-mark style

The decorative oversized opening quotation mark — the one that floats at the top-left of the card at 4-8x the body text size — is a templating cliché that hurts read-through. Visitors read the giant quote mark as a decorative element rather than as punctuation, and the eye then re-enters the actual text from the wrong place. The first 5-10 words of the quote get re-read or skipped depending on which direction the eye travels.

Three quote-mark styles perform; one fails.

Inline quotation marks at body size. The standard typographic choice — open and close the quote with normal "..." marks at body weight. The mark is read as punctuation, the eye enters the quote at the first word, the read-through is uninterrupted. This is the highest-performing style for B2B landing pages and the default we recommend.

No quotation marks plus indented block. A blockquote-style left margin (10-20px) plus a 2-3px coloured rule on the left edge marks the text as a quote without using marks at all. Performs equivalently to inline marks if the rule is visible. Used in editorial-leaning brands where quotation marks feel cluttered.

Decorative quote mark behind the text. A faded oversized quote mark used as a background watermark behind the quote text, at low opacity (5-10%). Decorative without disrupting reading flow. Acceptable, though the watermark itself adds nothing functional.

Failed style: oversized quote mark at the top-left. The most common template default. Cuts read-through by 5-15% based on the size of the mark. Avoid.

Decision 2: Line length

Line length is the single highest-leverage typography decision and the one most often defaulted incorrectly. The readability literature converges on a range of 45-75 characters per line for body-weight text, with an optimum around 55-65. Quote cards on landing pages routinely run at 90-120 characters per line because designers fit quotes into the available column width without measuring line length.

The penalty for over-long lines is asymmetric. At 80-90 characters per line, read-through drops by 10-15% for English text. At 100+ characters, it drops by 20-30%. The visitor's eye loses its place returning from the right edge to the left edge, and after two or three line-return failures the visitor gives up.

The fix is structural, not stylistic. Constrain quote-card width to whatever font size produces 55-65 characters per line. For a 16px body font, that is roughly 480-560px of card width. For a 14px body, 420-490px. If the design system places quote cards in a wider column, add internal padding to constrain the text width within the card.

The exception is short quotes (under 30 words). At that length, line length matters less because the visitor finishes before fatigue sets in. Quotes under 30 words can run at 80 characters per line without significant read-through loss.

Decision 3: Type contrast — quote vs attribution

Quote-card typography needs three distinct typographic registers: the quote itself, the attribution (name plus title plus company), and any optional metadata (date, product, rating). Most cards collapse these into one or two registers, which makes the attribution either invisible (too similar to the quote) or distracting (more visually prominent than the quote).

The performant hierarchy is well-established. The quote runs at body size (16-18px), the attribution at 13-14px, and metadata at 12px. Weight differentiates the registers in addition to size — quote in regular weight, attribution name in medium or semibold, attribution title in regular, metadata in regular at reduced opacity (60-70%).

Common errors. Bolding the entire quote — performs worse than regular weight because the eye treats bold as emphasis and the entire quote becomes "all emphasised, therefore nothing emphasised". Use bold only inside the quote for one or two key phrases the prospect should remember. Italicising the entire quote — adds the cognitive load of reading italic text without adding meaning. Italics should mark genuine emphasis, not signal that something is a quotation. Equalising the size of attribution to the quote — the attribution becomes a competing focal point and reduces quote read-through.

For the wider attribution-design framework, see testimonial trust signals and author attribution. The typographic decisions in this section are downstream of the attribution-content decisions in that guide.

Decision 4: Attribution hierarchy

Within the attribution itself, the order of information determines what a visitor remembers. A scan reads the attribution in roughly two passes: a first pass that captures the most visually prominent element, and a second pass that fills in the rest if the visitor is still engaged. Designing the attribution means deciding which fact you want captured by the first pass.

For B2B testimonials, the priority order is almost always: company name first, role second, person name third. The company is the trust transfer — visitors recognise "Stripe" or "Shopify" before they recognise an individual name. The role is the credibility transfer — "VP of Engineering" tells the visitor whose perspective the quote represents. The person name is the lowest-priority element because most visitors do not personally know the named individual.

The visual implementation: company name at attribution size in semibold or bold weight, role beneath in regular weight at the same size, person name beneath in regular weight at smaller size (12px). Many template defaults invert this — they lead with the person name in semibold, which optimises for attribution that does not produce conversion.

For consumer testimonials the hierarchy inverts. The person name (and headshot) carries the trust transfer because no recognised brand is involved. Lead with name, follow with location and a meaningful descriptor (years using product, demographic detail, etc).

Putting it together: the high-performance default

A quote card that respects the four decisions looks like this:

  • Inline body-weight quotation marks (or no marks plus an indent rule)
  • Card width constrained to produce 55-65 characters per line at the chosen body size
  • Quote at 16-18px regular weight; one or two phrases bold inside the quote for emphasis
  • Attribution lines: company name (semibold), role title (regular), person name (smaller, regular)
  • Metadata (date, product version, optional rating) at 12px with 60-70% opacity

These defaults produce read-through rates of 35-50% on B2B landing pages and 25-40% on home pages, depending on the surrounding context. The most common templates produce read-through rates of 15-25% — a gap of roughly 2x for typography decisions that take 30 minutes to fix.

For the broader question of where quote cards belong on the page, the testimonial placement on landing pages guide handles surface-level placement; this guide is downstream of those placement decisions.

What to verify before publishing

Three checks catch the most common typography failures before a quote card ships.

Check 1: line-length count. Open the quote card in a browser at the production breakpoint, count the characters in the longest line, and confirm it is in the 55-65 range. If it is over 80, increase font size or constrain card width.

Check 2: quote-mark style. Confirm the quote-mark style is inline body-weight, not an oversized decorative mark. If the template ships with a decorative mark, override it.

Check 3: attribution hierarchy. Squint at the card from arm's length. The company name should be the second-most visible element after the quote text itself. If the person name dominates, the hierarchy needs to flip.

A testimonial program that gets these four typography decisions right will produce a 1.5-2x lift in read-through rate compared with template defaults, with no change in quote selection, attribution content, or any other variable. The lift compounds with every other testimonial-program improvement, because every downstream optimisation is gated on whether the visitor finishes reading.

Ready to get started?

Start collecting and showcasing testimonials in under 5 minutes.

Start Free