Ep.3 - Speech Bubbles on the Web

In comics, speech bubbles are how characters communicate. On a blog, blockquotes serve a similar purpose: they highlight important words, set apart quotes, and add a distinct voice to the text.

From Blockquote to Bubble

A standard HTML blockquote is functional but forgettable. By adding a tail (that little triangular pointer), rounded corners, and a bold border, we transform it into something that speaks.

blockquote {
  position: relative;
  border: 3px solid #2b2d42;
  border-radius: 1.5rem;
  padding: 1.5rem 2rem;
}

blockquote::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 2rem;
  border-width: 12px 10px 0;
  border-style: solid;
}

The ::after pseudo-element creates the tail. It's a small detail, but it transforms the entire feel of the element.

When to Use Bubbles

Not every blockquote should be a speech bubble. Use them for:

• Key takeaways that summarize a section
• Quotes from external sources
• Internal monologue or commentary from the author

A good speech bubble makes you hear the voice behind the words.

The Psychology of Bubbles

There's a reason comics use speech bubbles instead of plain text. The bubble creates a visual container that separates the spoken word from the narration. It signals to the reader: "pay attention, someone is talking."

On the web, this same principle applies. When a blockquote looks like a speech bubble, readers instinctively treat its content as more important, more personal, more direct.

Variations

Different bubble shapes convey different tones:

• Round bubbles suggest calm, normal speech
• Jagged bubbles convey shouting or excitement
• Cloud-shaped bubbles indicate thought or reflection

For this theme, we chose smooth rounded bubbles. They feel approachable and work well with the bright color palette.

Accessibility

Speech bubbles are purely decorative. Screen readers already handle blockquotes correctly, reading them as quoted content. The visual transformation is progressive enhancement: it adds delight for sighted users without changing the semantic meaning.

Design with your eyes, but build with your conscience.