What is a Pull Quote?
A pull quote is a quotation pulled from the body of the current document. Unlike standard quotations, it is a repetition of content already written on the page. Pull quotes are used to dress up text-heavy documents and to add some style to a text design. Pull quotes are typically written in a slightly larger font than the surrounding text and can be in different colors or fonts to make them stand out more. Definition of pull quote from Desktop Publishing at About.com.
Standard Pull Quotes Using Blockquote
The easiest way to add a pull quote to your text is to use the blockquote tag. Simply place the text you want in the pull quote inside the blockquote tag:
<blockquote>A pull quote is a quotation...</blockquote>
As you can see, this results in a very boring pull quote. The text is simply indented exactly as the Web browser does to a standard blockquote.
But you can do more to make the pull quote stand out. Just making the font size slightly larger and italic makes it stand out more:
blockquote {
font-size:125%;
font-style:italic;
}
Just that simple change makes the pull quote stand out more on the page.
Remember that while pull quotes often tend to be written in italics, it's not required. If italics don't look good in your design, then don't use them.
Adjust the Pull Quote Placement in the Layout
Once you've got the font styles for your pull quote, you can start adjusting the placement in the document. The easiest way to do this is to give it a specific width, and then adjust the margins and float.
blockquote {
width: 10em;
margin: 0;
float: left;
font-size:125%;
font-style:italic;
}
By pushing your blockquote to the side (either left or right) you make it flow more within the text, and that makes it more of a pull quote.
And You Can Always Use Color
Color is always welcome in a text-heavy design. Using color in your pull quotes makes them stand out more, and they look more like graphical elements of your design and less like text.
blockquote {
color: #c00;
width: 10em;
margin: 0;
float: left;
font-size:125%;
font-style:italic;
}
Color is fun to add to pull quotes because it can dress up a bland portion of your Web page.
Now you have the basics to create some fancy pull quotes on your Web pages. But don't forget that any text or font styles that are available can be used on your pull quotes. You can also change the background of the blockquote or adjust other box properties. Have fun with your pull quotes!
If you need help in using pull quotes, a great resource is the About.com Desktop Publishing Guide's article: How To Use Pull-quotes.
