Block quotes and pull quotes are useful for punctuating 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 tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few 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 limitations on how quotations can be styled. Block and pull quotes can both 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 separate element.
The proper HTML for marking up a block quote depends on its contents. My design for Patty Meltt includes concert reviews, which contain the reviewer’s name:
<blockquote>
<p>"Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night."</p>
<footer>— Waylon Bootscuffer</footer>
</blockquote>Here, the footer contains information about the source or author of the parent element. This makes it a good fit for attributions inside a blockquote, where it indicates who wrote it. But what about cite?
For years, I used the cite element to mark up attributions. It’s one of those sneaky bits of HTML that felt intuitive until I read the spec and went, “Dagnabbit!” because cite isn’t meant to label people. Instead, it should be used for:
“The title of a creative work (e.g. book, website, song, painting, etc.)”
<blockquote>
<p>"Patty Meltt’s powerful ballads and toe-tapping anthems had the audience singing along all night."</p>
<footer>— Waylon Bootscuffer, <cite>Country Music Magazine</cite></footer>
</blockquote>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 blockquotes, 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 voice.
For Patty Meltt’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 recognise it as a different voice from the main narrative.
In magazines and newspapers, block quotes punctuate content blocks and are frequently styled to contrast with the surrounding text. A full-width, 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 understated:
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;
}
Those borders needn’t always fill the full height or width of a blockquote, so 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 even animate those faux borders using keyframe animations or simple transitions to increase their width when someone interacts 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 whether you need them at all. Technically, an HTML blockquote implies its content is a quotation. So, from an accessibility and semantic standpoint, quote marks aren’t required because screen readers and search engines will recognise a blockquote. However, quote marks can visually emphasise 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 separate 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 don’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 remember that you can choose marks from an altogether different font if they better suit a design.
That’s why, whenever I audition a new typeface, I check its quote marks. If they’re memorable or noteworthy, I add them as SVGs to my quote marks library so I can easily find them later.
Shapes
Quotation design needn’t 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 Meltt
Patty Meltt 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 typeface, which contrasts 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.
<div>
<img src="img/blazeface-start.svg" alt="" width="48">
</div>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-width horizontal line to fill any remaining 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 distinctive as a logo or headline. Whether you’re working with quiet, thoughtful quotes or loud, in-your-face testimonials, styling them is an opportunity to reinforce a client’s personality and voice.
Patty Meltt’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 don’t be afraid to experiment with borders, quote marks, and even shapes.
Getting Creative With Quotes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
Source: Read MoreÂ