Pull quote
A lift-out pull quote or pull quote is an interesting text snippet or excerpt pulled from text and presented in a visually appealing manner. Pull quotes draw attention to specific text by being styled in a larger font size, bold or italic, or a more artistic font. If utilized appropriately, a pull quote can also help act as a teaser to catch the reader's eye while they're scanning a page full of text. If a particular pull quote contains interesting subject matter, the reader is more likely to stop scanning and read through all the text.
Why should you use a pull quote?
Pull quotes help maintain the emphasis on text and don't interrupt the flow of reading like an image does. Used correctly, pull quotes can also help remind readers of important information and keep them interested in the content they're reading. In addition to being helpful, pull quotes can give the overall page a more appealing feel that makes the reader want to read what's said.
Does the pull quote go before or after the quote?
A pull quote should be a way of inviting the reader to read a larger body of text. Therefore, a pull quote should be placed before the location where the quote was pulled.
How to create a pull quote in Microsoft Word
- Highlight the text you want to use as the pull quote.
- Right-click the highlighted text.
- In the context menu, type pull quote in the "Search the menus" text box at the top.
- Click Choose a Text Box in the desktop version of Word or Add visual emphasis to text in the online version.
- Select the type of text box you want to insert for the pull quote.
- Move the newly inserted text box to where you want it to be located in the document.
How to insert a pull quote in Google Docs
As of early 2024, Google Docs does not have an option for a pull quote. However, it's possible to create a block quote of text by highlighting the text you want to block quote and indenting it by clicking Format, Align & Indent, and then Increase indent.
If you're concerned about HTML compatibility or accessibility, create an image containing the pull quote, like our example at the start of this page.
HTML pull quote
With HTML 5, the aside tag can contain a pull quote. Using the HTML 5 code below and some CSS (cascading style sheets), we created the pull quote seen to the right. Realize that if the CSS doesn't load, this quote would be positioned where it's located in the HTML (hypertext markup language) code and would not float to the right.
If you're concerned about HTML compatibility or accessibility, create an image containing the pull quote, like our example at the start of this page.
HTML code
<aside class="pullquote">
<blockquote> <p>The way I see it, if you want the rainbow, you gotta put up with the rain.</p>
<p>-Dolly Parton</p>
</blockquote>
</aside>
CSS code
.pullquote {
float: right;
width: 200px;
background: #0067a3;
font-weight: bold;
padding: 14px;
margin: 0 0 40px 40px;
border: 1px solid #eee;
}
.pullquote p {
margin: 0!important;
color: #fff!important;
font-family: cursive;
}