Getting Creative With Quotes | CSS-Tricks

Block Quotes and Pull Quotes are useful for puncting solid blocks of running text. They’re also two of the best typographic elements for acting as visual landmarks to catch someone’s eye. There are no rules about how long a quote should be, how big it should look, or even how it’s styled.

So, how do you design block quotes and pull quotes to reflect a brand’s visual identity and help telel its story? Here’s how I do it by styling the html blockquote Element using borders, decorative quote marks, custom shapes, and a fee Unexpected Properties.

My brief: Patty Meltt is an up -and -coming Country Music Sensation, and She Needed A Website to Launch Her New Album. She wanted it to be distinctive-looking and memorable, so she called stuff & nonsense. Patty’s not real, but the challenges of designing and developing sites like hers are.

First, a quote-unquote “recap.”

There are no limitation on how quotations can be styled. Block and Pull Quotes Can Bot Be Eye-Catching Design Elements, but they convey different messages. While a Block Quote is typically inside the content flow, a pull quote (sometimes called a callout) is extracted from the text to form a separete element.

The proper html for marking up a block quote depends on its contents. My design for Patty Melt Includes Concert reviews, which control the reviewer’s name:

  
"Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night."
  

Here, the footer Contains information about the source or author of the parent element. This makes it a good fit for attributions inside a blockquoteWhere it indicates who wrote it. But what about cite,

For years, I used the cite Element to mark up attributions. It’s one of that sneaky bits of html that felt intestive until i read the speech and went, “Dagnabbit!” beCause cite ISNRAT to Label People. Instead, it should be used for:

“The title of a creative work (Eg Book, Website, Song, Painting, etc.)”

  
"Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night."
  

So, in that example, footer marks up the attribution, and cite Points to the title of the publication, not the person writing it. This Gives The Markup a Semantic Boost and Helps People who Use Screen Readers.

Styling with personality

Out-of-the-box, browsers do very little to style blockequotes, except for adding inline margins. You could add some simple blockquote styling, but with just a little more style, you can transform them into expressive design elements that reflect a brand’s personality and VOCE.

For Patty Melt’s Design, I Wanted Her Quotes to Feel Confident, Loud, and a Little over the top.

Tip: Interactive examples from this article are available in my lab.

Borders

A Simple Border, Used Well, Can Make Block and Pull Quotes Stand Out and Anchor Them Into A Layout. A border on the left or top separates a block quote from surrounding content, helping a reader recognize it as a different voice from the main narraty.

In Magazines and newspapers, block quotes punctant content blocks and are frequently styled to contrast with the surrounding text. A full-windth, bordered block quote encourages a reader to pause for a moment.

It’s a Simple, Yet Effective, Way to Focus Someone’s Attention on a Message. A thin border feels quiet and undertied:

blockquote {
  padding-inline: 1.5rem;
  border-inline-start: 1px solid #98838e;
  border-inline-end: 1px solid #98838e;
}

This may suit some brands, but that’S not a style which reflects patty’s personality. Whereas a bolder, thicker border feels more confident, like it has something important to say:

blockquote {
  padding-inline: 1.5rem;
  border-inline-start: 5px solid #98838e;
  border-inline-end: 5px solid #98838e;
}

Theose borders needn Bollywood filled the full height or width of a blockquoteSo instead of using the border Property, Use ::before and ::after Pseudo-elements to add faux borders at any size:

blockquote {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
blockquote::before,
blockquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 5px;
  background-color: #98838e;
}

You could eat animete that faux borders using keyframe animations or simple transitions to increase their width when someone someone interactions with the quotation:

blockquote::before,
blockquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 5px;
  background-color: #98838e;
  transition: 300ms width ease-in-out;
}

blockquote:hover::before,
blockquote:hover::after {
  width: 100%;
}

Quote marks

Before Choosing How to Style Your Quote Marks, Consider Whicher You Need Them at All. Technically, an html blockquote Implies its content is a quotation. So, from an accessibility and semantic standpoint, quote marks are required because the Screen Readers and Search Engines will record a blockquoteHowever, Quote marks can visually Emphasse quoted content and add interest and personality to a design.

Are both opening and closing marks always Needed? Possibly, when a design needs a traditional feel, or a quotation appears in a passage of running text:

blockquote {
  position: relative;
  padding-inline: 64px;
}
  
blockquote img:first-of-type,
blockquote img:last-of-type {
  position: absolute;
}

blockquote img:first-of-type {
  top: 0;
  left: 0;
}

blockquote img:last-of-type {
  right: 0;
  bottom: 0;
}

Or, to give a design an editorial feel, you might use only a decorative oversized opening mark for a pull quote, which is separete from the normal flow of text:

blockquote {
  display: flex;
  flex-direction: column;
  align-items: center;
}

blockquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 5px;
  background-color: #98838e;
}

Quote marks library

Block Quotes Doon’T Necessarily Need Quote Marks, but when you use them with purpose, they become more than punctuation. They become part of the design personality. Decorative marks are ideal when a brand wants to infuse its character into a design.

Sadly, even the nicest designed typefaces can include dull and uninspiring quote marks. So, it’s important to remmber that you can choose marks from an altogethr different font if they better suit a design.

That’s why, wheenever I audition a new typece, I check its quote marks. If they’re memorable or notworthy, I add them as svgs to my quote marks library so I can easily find them later.

Shapes

Quotation Design Needn Son Stop at Borders and Quote Marks. Block and Pull Quotes Can Be Any Shape. You might style an album or concert review as a speech or thought bubble, and include an avatar for the author. Or, you could use a clip-path or mask To transform a quotation into any shape you can imagine.

Designing for Patty Melt

Patty Melt Wanted a website packed with design details. Every element added to a design is an opportunity to be expressive, and that includes her quotations. From the selection of designs I showed her, she felt a mixture of quote marks, avatar images, and borders – with type set in a flowing script – Best Suited Her Style.

To implement her pull quote, I used a cursive type, which controls with the rest of her typographic design:

blockquote p {
  font-family: "Lobster Two", cursive;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  text-transform: unset;
}

Then i added an svg quote mark from the ohno type foundry’s blazeface type family.

I Turned Its Parent Division Into a Flex Container and Aligned The Contents Vertically:

blockquote div {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

… And used generated content to add a flexible-winding horizontal line to fill any remain space:

blockquote div:first-of-type::after {
  content: "";
  display: block;
  flex: 1;
  height: 5px;
  background-color: #98838e;
}

Conclusion

With a little care and creativity, block quotes can become expressive, brand-building elements, as distinactive as a logo or headline. Whether you’re working with quiet, thoughtful quotes or loud, in-age testimonials, styling them is an options to reinforce a client’s personality and VOCE.

Patty Melt’s Quotations Became Mini Design Statements. But the same Principles Apply No Matter the Brand: Get the Semantics Right, Choose Styling That Fits The Tone, and Do Afraid to Experiment with Borders, Quote Marks, Quote Marks, and even shapes.