Block quotes and pull quotes are helpful for punctuating stable blocks of operating textual content. They’re additionally two of the very best typographic parts for appearing as visible landmarks to catch somebody’s eye. There aren’t any guidelines about how lengthy a quote needs to be, how large it ought to look, and even the way it’s styled.
So, how do you design block quotes and pull quotes to replicate a model’s visible identification and assist inform its story? Right here’s how I do it by styling the HTML blockquote factor utilizing borders, ornamental quote marks, customized shapes, and some surprising properties.
My transient: Patty Meltt is an up-and-coming nation music sensation, and she or he wanted an internet site to launch her new album. She wished it to be distinctive-looking and memorable, so she referred to as Stuff & Nonsense. Patty’s not actual, however the challenges of designing and creating websites like hers are.
First, a quote-unquote “recap.”
There aren’t any limitations on how quotations could be styled. Block and pull quotes can each be eye-catching design parts, however they convey completely different messages. Whereas a block quote is usually contained in the content material move, a pull quote (typically referred to as a callout) is extracted from the textual content to type a separate factor.
The correct HTML for marking up a block quote will depend on its contents. My design for Patty Meltt contains live performance critiques, which comprise the reviewer’s title:
"Patty Meltt’s highly effective ballads and toe-tapping anthems had the viewers singing alongside all night time."
Right here, the footer comprises details about the supply or writer of the dad or mum factor. This makes it a great match for attributions inside a blockquote, the place it signifies who wrote it. However what about cite?
For years, I used the cite factor to mark up attributions. It’s a type of sneaky bits of HTML that felt intuitive till I learn the spec and went, “Dagnabbit!” as a result of cite isn’t meant to label folks. As an alternative, it needs to be used for:
“The title of a artistic work (e.g. ebook, web site, music, portray, and so forth.)”
"Patty Meltt’s highly effective ballads and toe-tapping anthems had the viewers singing alongside all night time."
So, in that instance, footer marks up the attribution, and cite factors to the title of the publication, not the individual writing it. This offers the markup a semantic increase and helps individuals who use display readers.
Styling with character
Out-of-the-box, browsers do little or no to model blockquotes, apart from including inline margins. You might add some easy blockquote styling, however with just a bit extra model, you may rework them into expressive design parts that replicate a model’s character and voice.
For Patty Meltt’s design, I wished her quotes to really feel assured, loud, and slightly excessive.
Tip: Interactive examples from this text are out there in my lab.
Borders
A easy border, used nicely, could make block and pull quotes stand out and anchor them right into a format. A border on the left or prime separates a block quote from surrounding content material, serving to a reader recognise it as a special voice from the primary narrative.
In magazines and newspapers, block quotes punctuate content material blocks and are steadily styled to distinction with the encircling textual content. A full-width, bordered block quote encourages a reader to pause for a second.
It’s a easy, but efficient, method to focus somebody’s consideration on a message. A skinny border feels quiet and understated:
blockquote {
padding-inline: 1.5rem;
border-inline-start: 1px stable #98838e;
border-inline-end: 1px stable #98838e;
}
This may increasingly go well with some manufacturers, however that’s not a mode which displays Patty’s character. Whereas a bolder, thicker border feels extra assured, prefer it has one thing necessary to say:
blockquote {
padding-inline: 1.5rem;
border-inline-start: 5px stable #98838e;
border-inline-end: 5px stable #98838e;
}
These borders needn’t all the time fill the complete top or width of a blockquote, so as a substitute of utilizing the border property, use ::earlier than and ::after pseudo-elements so as to add fake borders at any dimension:
blockquote {
show: flex;
flex-direction: column;
align-items: middle;
}
blockquote::earlier than,
blockquote::after {
content material: "";
show: block;
width: 80px;
top: 5px;
background-color: #98838e;
}
You might even animate these fake borders utilizing keyframe animations or easy transitions to extend their width when somebody interacts with the citation:
blockquote::earlier than,
blockquote::after {
content material: "";
show: block;
width: 80px;
top: 5px;
background-color: #98838e;
transition: 300ms width ease-in-out;
}
blockquote:hover::earlier than,
blockquote:hover::after {
width: 100%;
}Quote marks
Earlier than selecting the way to model your quote marks, take into account whether or not you want them in any respect. Technically, an HTML blockquote implies its content material is a citation. So, from an accessibility and semantic standpoint, quote marks aren’t required as a result of display readers and serps will recognise a blockquote. Nonetheless, quote marks can visually emphasise quoted content material and add curiosity and character to a design.
Are each opening and shutting marks all the time wanted? Presumably, when a design wants a standard really feel, or a citation seems in a passage of operating textual content:
blockquote {
place: relative;
padding-inline: 64px;
}
blockquote img:first-of-type,
blockquote img:last-of-type {
place: absolute;
}
blockquote img:first-of-type {
prime: 0;
left: 0;
}
blockquote img:last-of-type {
proper: 0;
backside: 0;
}
Or, to present a design an editorial really feel, you would possibly use solely an ornamental outsized opening mark for a pull quote, which is separate from the traditional move of textual content:
blockquote {
show: flex;
flex-direction: column;
align-items: middle;
}
blockquote::after {
content material: "";
show: block;
width: 80px;
top: 5px;
background-color: #98838e;
}Quote marks library
Block quotes don’t essentially want quote marks, however if you use them with objective, they develop into greater than punctuation. They develop into a part of the design character. Ornamental marks are superb when a model needs to infuse its character right into a design.
Sadly, even the nicest designed typefaces can embrace uninteresting and uninspiring quote marks. So, it’s necessary to recollect that you would be able to select marks from an altogether completely different font in the event that they higher go well with a design.
That’s why, at any time when I audition a brand new typeface, I verify its quote marks. In the event that they’re memorable or noteworthy, I add them as SVGs to my quote marks library so I can simply discover them later.
Shapes
Citation design needn’t cease at borders and quote marks. Block and pull quotes could be any form. You would possibly model an album or live performance evaluation as a speech or thought bubble, and embrace an avatar for the writer. Or, you might use a clip-path or masks to remodel a citation into any form you may think about.
Designing for Patty Meltt
Patty Meltt wished an internet site full of design particulars. Each factor added to a design is a chance to be expressive, and that features her quotations. From the choice of designs I confirmed her, she felt a mix of quote marks, avatar photos, and borders — with kind set in a flowing script — finest suited her model.
To implement her pull quote, I used a cursive typeface, which contrasts with the remainder 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 kind foundry’s Blazeface kind household.
I turned its dad or mum division right into a flex container and aligned the contents vertically:
blockquote div {
show: flex;
align-items: middle;
hole: 1.5rem;
}…and used generated content material so as to add a flexible-width horizontal line to fill any remaining house:
blockquote div:first-of-type::after {
content material: "";
show: block;
flex: 1;
top: 5px;
background-color: #98838e;
}Conclusion
With slightly care and creativity, block quotes can develop into expressive, brand-building parts, as distinctive as a emblem or headline. Whether or not you’re working with quiet, considerate quotes or loud, in-your-face testimonials, styling them is a chance to strengthen a shopper’s character and voice.
Patty Meltt’s quotations turned mini design statements. However the identical ideas apply irrespective of the model: get the semantics proper, select styling that matches the tone, and don’t be afraid to experiment with borders, quote marks, and even shapes.
