Pull quotes are an often under-used tool in the web designer’s arsenal. Sometimes they are left out because the people who write the copy are not the same as the people who design the pages, and sometimes they are left out because the designer doesn’t think about them. But magazines have pull quotes all the time. And it’s a lot easier to create a web page and have it up on a website in just a few hours than it would be to design and print a magazine in that same time.

So why do web designers avoid pull quotes?

Design Your Text as Well as Your Layout

It’s easy to think of design as the colors, layout, and images of your web pages. But even a page that has nothing but text on it can be designed. Unfortunately a full page of text can be very hard to read and is almost always extremely ugly and boring. One way to fix this is to add decorative headlines to the text. But another way is to add fancy pull quotes.

Pull quotes help emphasize text that is already on the page by pulling it out and making it larger or drawing attention to it through colors or borders. In my first pull quote article, I talked about changing the size and color of the quoted text. But there is a lot more you can do to decorate your pull quotes.

Get Creative! Pull Quotes Give You a Little More Freedom

One advantage to pull quotes is that you can get a little wilder with your styles than you might on the rest of the document. Try various things to pull out the text and make it stand out on the page, including:

• float the quote left or right (be sure to set a width)
• add a border around the whole thing or just one or two sides
• change the color of the text or the background color of the box
• add an image to the background of the quotation
• use what you know of CSS to play and have fun

Some Example CSS for Fancy Pull Quotes on Web Pages

With this CSS, I made the font slightly smaller and added a border on the top and bottom of the quote:

width: 150px;
float: right;
margin-left: 1em;
border-top: solid 3px black;
border-bottom: solid 3px black;
padding-top: 0.5em;
padding-bottom: 0.5em;
font-size:95%;

As you can see in this example, even though the font size is smaller, the text stands out from the page.

If you have space for it, a tall quote floated to the right with a right border can stand out and look very striking, like this CSS:

width: 69px;
float: left;
margin-right: 1em;
margin-top: 0;
border-right: solid 1px #999;
font-size: 150%;
padding-right: 0.25em;
text-align: right;

Be sure to look at the quote in several browsers to make sure it displays well and the lines aren’t too jagged.

Reversing the text colors can look very striking on a page full of black on white text. This is the CSS:

width: 200px;
float: right;
background-color: #000;
color: #fff;
padding: 0.5em;
font-size: 135%;

But don’t be afraid to use your site design colors. In this example I pulled out some of the words for highlighting with the <span> tag inside the quotation. It requires a little work inside the copy to do this, but makes the quote stand out that much more. Here’s the CSS I used:

blockquote {
  width: 200px;
  float: left;
  font-size: 150%;
}
blockquote span {
  color: #c00;
  font-weight: bold;
}

And don’t forget background images. I created a simple graphic of a question mark and used it as a background in this example. Since reds can be very overpowering on a page, I desaaturated the color slightly and lightened it a bit as well. Then I just used the following CSS to put it behind the quote.

width: 200px;
float: right;
font-size: 200%;
vertical-align: bottom;
height:150px;
padding-right: 30px;
color: #777;
background: url(question-mark.gif) no-repeat right center;

Don’t Be Afraid to Use Pull Quotes on Your Pages

You might be surprised at how much you can get people to read when you use them.

Do you know of a site or have you designed a page that uses pull quotes well? Submit the page to my site, I’d love to see it.