Pull quotes make me crazy
Pull quotes on the web are one of the vestigial elements from print design that I can’t quite figure out.
What are they even for, aside from decoration?
In a print layout, they can fill space to help the text flow fit properly into the page. A pull quote can get a page flipper to stop and read an article.1
Neither is the case on the web. Usually a pull quote is used to create graphic relief in a long page of text, and to affirm the design or brand system.
But then you come across something like this:
The pull quote in question. http://localhost:8888/images/blog/md_pull-quote_medium.pngThe pull quote simply repeats the text that is directly above, but bigger! Like a disembodied Greek chorus making sure you get this Very Important Point.2
There are three problems with this pull quote:
- It is a block level element which creates a hard break in the reading flow.
- The visual design does little to differentiate the quote from the body text.
- The quoted text repeats the text immediately above, creating an echo effect.
Repetition is a feature of pull quotes, for better or worse. But all three issues can be mitigated by visual design.
- Consider floating quotes left or right, and using the vertical grid to create a size and position that reinforces the grid and does not break the main text flow. Try CSS shapes, even!
- Experiment with the color, size, and weight of the type to create visual interest.
- Offset the quote code in the HTML so that it can more easily avoid direct repetition.
There are also ways to give pull quotes some actual functionality, such as adding social links to make it a pre-configured tweet or excerpt.
Like any decorative element, pull quotes can do more harm than good if used thoughtlessly. Do the extra work and create a pull quote that adds to your page design, rather than detracting from the reading experience.
1. Is it a pull quote because the copy is pulled from the article, or because it pulls a reader in?
2. Not to pick on this author, and to be fair, I don’t know whether this design is by Medium or an editorial choice. Read the article! It’s funny.