Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (2022)

  • 10 min read
  • Showcases,Design,Web Design

About The Author

Sven is the co-founder and former CEO of Smashing Magazine. He writes at his Conterest Blog where he focuses on blogs, content strategy, writing and publishing …More aboutSven↬

Email Newsletter

.
Trusted by 176.000 folks.

Quick summary↬Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well.
(Video) 11 Manipulation Tactics - Which ones fit your Personality?

This post presents creative examples and best practices for design of pull quotes. We’ve tried to identify some common solutions and interesting approaches you may want to use or develop further in your projects.

Aren’t all these quotes the same?

No. First of all: quote ≠ block quote ≠ pull quote. Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article.

More after jump! Continue reading below↓

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (2)
Pull quote included into an article. The pulled out passage is mentioned few blocks further.

Just like a pull quote blockquote (actually block quotations) are also set off from the main text as a distinct paragraph or block. However, they refer to some external citation which isn’t already mentioned in the article. Block quotations are usually placed within the reader’s flow.

Finally, “normal” quotes cite the content found in some other sources and are included to support the content rather than dominate over it.

Blockquote vs. Q vs. Cite

According to HTML specifications, there are three elements which are supposed to semantically mark up quotations, namely <blockquote>, <q> and <cite>. Although all intended to markup quotes, they should be used in different contexts. So when should you use what? HTML Dog provides a nice and compact overview of these elements:

blockquote is a large quotation. The content of a blockquoteelement must include block-level elements such as headings, lists, paragraphsor div’s. This element can also have an optional attribute citethat specifies the location (in the form of a URI) where the quote has come from. Example:

<blockquote cite=“https://www.htmldog.com/reference/htmltags/blockquote/">

<p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s.</p> <p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p>

</blockquote>

(Video) Personality Test: What Do You See First and What It Reveals About You

<q>

q is a small quotation. The content of this element is an in-line quote. Modern browsers know how to interpret <q> which is why you can style quotations using this HTML-elements via CSS. Example:

<p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p>

Although <q> is almost never used, it has some useful properties. For instance, you can specify the appearance of quotes within the <q>-element via CSS. That’s reasonable as different languages use different quotation marks for the same purpose. For instance, these ones:

Q {}Q { quotes: ‘»’ ‘«’ }Q { quotes: ‘„’ ‘“’ }

Modern browsers support this way of styling. Of course, Internet Explorer (even in its 8th version) doesn’t support it although it knows <q> pretty well. In particular, since some problems with encoding of quotes can appear sometimes it’s useful to provide numeric values (see below).

According to standards you can even specify the appearance of quotation marks depending on the browser’s language of the user. This is how a W3C-example looks like:

:lang(fr) > Q { quotes: ‘« ’ ‘ »’ }:lang(de) > Q { quotes: ‘»’ ‘«’ ‘2039’ ‘203A’ }

As lovely as they may be, pull quotes have inherent problems in the way they are placed in the middle of HTML content. To a visual, CSSenabled browser all might seem hunky-dory, but to those browsers that are not CSS-abled and fall back on the plain HTML or to screen readers for visually impaired users, the pull quotes will appear slap bang in the middle of the main content. A quote suddenly appearing between two paragraphs is clearly out of place and will confusingly break the flow.

If you are using pull-quotes, it is wise to provide a little extra information for users who would stumble on this problem. In the XHTMLyou can provide a message, hidden from view with CSS that reads something like “Start of pull-quote” before the quote and then “endquote” after it.You could even have a link similar to the “skip navigation” link, which would offer the user the ability to skip the pull-quote and continue to the main content.

<cite>

cite defines an in-line citation or reference to another source. Example:

<p>And <cite>Bob</cite> said <q>No, I think it’s a banana</q>.</p>

Summing up: for large quotes use blockquote, for small quotes use q and for references to another sources cite should be used. In practice, usually only blockquote and q are used.

Gallery of Pull Quotes and Citations

Quotes, braces, lines, dialogue boxes, balloons — there are some paths a designer can take to create a beautiful and memorable quote. Design solutions vary in colors, forms, and sizes. Different techniques produce different result: However, it is important that it is clear to the visitors that the quote is a quote. Otherwise, it becomes easy to keep track on the content.

Keep in mind: pull quotes shouldn’t be used too often, they shouldn’t be too large, and they shouldn’t be included for the wrong purposes. In most cases an ordinary article should have at most 1-2 pull quotes. Otherwise, they lose their appeal, and the article becomes harder to scan.

(Video) A Smashing Hour with Paul Boag, February 2022

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (3)

Take a look at the example above. 99designs uses a block quotation to emphasize what the site is about. However, the text put in the quotes actually isn’t a quotation. We do not know why quotation mark is used in this case. We do know, though, that they shouldn’t be used in this context.

1. Simple indentation

In most cases simple indentation is enough. In this case, the structure of the content makes clear that the intended content is taken out from the main content flow. However, using this approach you need to make sure you have a very intuitive typographic and visual hierarchy and the indentation won’t be misunderstood. Often italics are used to indicate that the content is a quote, and sometimes quotation is centered. The latter technique, however, is used quite rarely.

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (4)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (5)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (6)

2. Quotes and indentation

Another standard approach for design of pull quotes is to use the quote itself as a visual element to clearly indicate what the text passage is supposed to stand for. This technique is by far the most popular one and there is a good reason behind it: it unambiguously communicates the meaning of the text block. Surprisingly, the quote visuals are almost always placed on the left of the quote. You may try to experiment with quote on the right, or at the bottom of the passage.

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (7)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (8)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (9)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (10)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (11)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (12)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (13)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (14)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (15)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (16)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (17)

3. Lines and indentation

Standard, most usual and recommended way of designing blockquotes.

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (18)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (19)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (20)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (21)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (22)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (23)

4. Quotations highlighted with a color

Frequently designers use indentation together with a variation of color which is applied to the quote. Usually if the layout is dark quotes are presented in colors which are darker than the main content. And if the layout is light the quote is presented in lighter colors. If quotes need to be strongly emphasized vibrant colors are used. For modest highlighting usually slight variations of main colors suffices to indicate the difference between the main content and cited text.

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (24)
Natalie Jost displays a random quote from the Bible on her blog
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (25)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (26)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (27)

5. Pull Quotes

Actually we know it from print where quotes-neighbours are supposed to emphasize some important message or interview excerpts. Pull quotes are placed not within, but next to the content. Such quotes are usually short and don’t provide any additional information as they can also be found in the article. In Web the technique is seen rather rarely, but it has a charm of its own and — if used properly and for the right purposes — may strongly support the content. To clearly separate the “neighbours” from the main content designers often use lines or a large amount of whitespace.

It is important to understand that in such cases pull quotes break the usual content flow which may make it harder for the readers to actually follow the argumentation of the article. In some cases it is more effective to avoid quotes (e.g. if a complex matter is described) while in other cases quotes can quicken and simplify the understanding (e.g. the main statement in the interview).

Quotes-neighbours are usually placed on the right side of the content in order to not break the reader’s flow and remain passive.

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (28)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (29)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (30)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (31)

6. Creative solutions

Sometimes designers come up with creative solutions one actually wouldn’t expect from such an element as a quote. Here are some of them. Hopefully, they’ll help you to come up with further interesting ideas for the design of pull quotes.

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (32)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (33)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (34)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (35)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (36)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (37)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (38)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (39)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (40)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (41)

7. Quotations as a standalone element

Often quotations are used and designed not inside an article, but as a standalone design element which is given the dominant position in the design. This is often the case in testimonials where companies present quotes from their customers and clients to confirm the quality they actually promise. In such cases quotations are usually big, bold and clearly visible.

(Video) A New HOPE (2022): The CFAA Has Come a Long Way, or Has It?

In testimonials quotes are sometimes “rotated” meaning that among 5-7 testimonials only one is displayed at once.

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (42)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (43)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (44)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (45)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (46)
Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (47)

In books and scientific documents citations are often provided with a footnote reference to the original document. In the Web, where references are commonly just linked to, this technique has never managed to become popular, however footnotes aren’t difficult to achieve with pure CSS.

For instance, if you’d like to cite an excerpt from a book, instead of providing the corresponding title and page number you can simply refer to a footnote below the article. Thus, you can avoid overloading your article with too many references. Footnotes, hence, can make it easier for your readers to read your article and provide details “on-demand” — only when they are needed.

Sometimes footnotes are also used by authors to provide some remarks to the article (similar to books). However, it is not always reasonable to use footnotes for links. The Web is a dynamic medium and links are extremely powerful - you don’t have to send your visitors to the footer of the page first to be able to follow a given link.

Block Quotes and Pull Quotes: Examples and Good Practices — Smashing Magazine (48)

Take a look at the following example. Naz Hamid uses both a blockquote (label 2 in the image above) and a footnote in his articles. The reference to the footnote and the footnote itself are interconnected: visitors can click on the reference and jump to the footnote. And in the footnote the “return”-icon allows the user to jump from the footnote to the place in the article where it is referred to. The author uses the footnotes to provide a personal remark on what has been mentioned in the article (labels 1 and 2).

With footnotes you can offer your visitors some traditional, classic layout feeling without overwhelming them with long references to citations you provide.

Tutorials

Further references

You may also want to take a look at the posts:

  • Web Design Elements: Examples And Best Practices
  • Mind Your En And Em Dashes: Typographic Etiquette
  • Grid-Based Design: Six Creative Column Techniques at Smashing Magazine

Look at the “Escaping Boundaries” section (fourth from the top). Pull-quotes are an example of a design element that presents an opportunity to break out of your established visual flow.

The older version of Andy Rutledge’s Design View used interesting pull-quotes that broke the visual flow of the column.

Doing this places greater emphasis on the pull-quotes than if they were kept within the content of the column.

(Video) E-Commerce Design Patterns w/ Vitaly Friedman (Smashing Magazine)

FAQs

What is a pull quote in magazine? ›

Pull quotes are made up of text that is pulled from the text—that is, duplicated—and presented on the page as an attention-grabbing visual element. Pull quotes are commonly used in magazines and on news websites to hook a reader's attention with a juicy quote from the story.

What is a pull quote in a newsletter? ›

Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader's flow and give it a more dominant position in the post or the article.

What is an example of a block quotation? ›

A block quote is a long quotation, set on a new line and indented to create a separate block of text. No quotation marks are used. You have to use a block quote when quoting more than around 40 words from a source.
...
How long is a block quote?
Citation styleBlock quote minimum length
TurabianFive lines
7 more rows
Apr 25, 2018

What makes a good pull quote? ›

What to Know. Select dramatic, thought-provoking, or enticing excerpts to use as pull quotes. Make it a quick bite of information. Keep the length to no more than five lines; set it apart with a different typeface, rules, or a shaded box.

What is a pull quote in Publisher? ›

A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic. The term is principally used in journalism and publishing.

What does a pull quote look like? ›

In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been pulled from an article and used as a page layout graphic element, serving to entice readers into the article or to highlight a key topic.

Where do you put pull quotes in an article? ›

Pull quotes can be placed on top of a page, sit within the grid, between columns, or break out of the grid totally. They can be enclosed in a black or colored box, be separated from the text with a box or rules, or just “float” in a designated space or column.

How do you put a quote in a newsletter? ›

How To Put A Quote In Your Post. You can just type your quote into a post and put it in quotation marks, but to really make it stand out and break up your text, try a quote block.

How do I create a pull quote in Word? ›

Microsoft Word 2010: Pull Quotes - YouTube

How many sentences is a block quote? ›

The block quote is used for direct quotations that are longer than four lines of prose, or longer than three lines of poetry.

Which one is an example of a quotation? ›

A direct quotation is a report of the exact words of an author or speaker and is placed inside quotation marks in a written work. For example, Dr. King said, "I have a dream."

Can you start an essay with a block quote? ›

The MLA Style Center

Yes, an essay may start with a block quotation. The quotation should be important to your discussion and referred to in your prose. This distinguishes it from an epigraph, which is ornamental in nature.

How big should pull quotes be? ›

Size and length of pull-quotes

There is no rule how long or big pull-quotes have to be. It all depends on the other elements on the page. When creating pull-quotes they should have at least several words. Few words are not enough, but more than two sentences are too long.

How can I make my quotes more interesting? ›

7 Tips for Making Quotes More Believable
  1. Use contractions. When people write they might say do not, cannot or will not. ...
  2. Don't use too many big words. ...
  3. Don't use long sentences. ...
  4. Paraphrase judiciously. ...
  5. Ask someone else to review your quotes. ...
  6. Listen to how your boss really speaks. ...
  7. Read the quotes aloud.
Aug 13, 2014

Should pull quotes be before or after? ›

The pull quote should always precede its appearance in body text.

Do pull quotes have to be quotes? ›

Words pulled from the author's narrative and used as display type do not need quotation marks and may be altered as long as the meaning is not changed. Attribution is not necessary.

How do you write a quote from a newspaper? ›

All quotes must be attributed.

Include the name of the person speaking in the sentence and surround their exact words in quotations marks. For example – Former President George Bush said, “Read my lips. No new taxes!” Never change what someone said – Doublecheck if you're not sure of the exact wording.

How do you share quotes in an article? ›

Citing Your Quote. Cite the author's last name and page number in parentheses to cite in MLA. Write out the author's last name, then list the numerical page number. You don't need to separate them with a comma, and you don't need to put "p." or "page" before the page number.

How do you use block style in Word? ›

Step 1. Browse Microsoft Word templates for block letters. Open the program, click the "File" tab and select "New." You will see options for many types of documents. Click "Letters" and look for one that suits your purpose.

How do you use quotes in Word? ›

Smart quotes in Word
  1. On the File tab, click Options.
  2. Click Proofing, and then click AutoCorrect Options.
  3. In the AutoCorrect dialog box, do the following: Click the AutoFormat As You Type tab, and under Replace as you type, select or clear the "Straight quotes" with “smart quotes” check box. ...
  4. Click OK.

When you add a pull quote text box to your document where is it positioned? ›

The first is developing a sidehead, a subheading that's placed out to the left of the primary body of the file instead of inline with the text. The second is for pull quotes (or editorial notes), which are just blocks of text placed either off to the side or inline with file text.

How do you start a block quote? ›

Basics
  1. Block quotations start on their own line.
  2. The entire block quotation is indented 0.5 inches, the same as the indentation for a new paragraph, and is double spaced.
  3. Block quotations are not surrounded by any quotation marks.
  4. The punctuation at the end of the block quotation goes before the citation.

What are block quotes in writing? ›

A block quote is a long quote formatted as a separate “block” of text. Instead of using quotation marks, you place the quote on a new line, and indent the entire quote to mark it apart from your own words.

How do you handle a block quote? ›

Do not enclose the direct quote in quotation marks. Double-space the block quote. Indent each line of the block quote by ½ inch. Punctuate the quoted material with a period before the parenthetical citation – with no ending punctuation after the parentheses.

What is a quotation and give two examples? ›

The definition of a quotation is words or phrases that are taken from someone else or from literary work or the asking price of something. An example of a quotation is when you take a passage from Shakespeare and repeat it as written without changing any of the words.

What are the 3 rules for using quotations? ›

Do commas and periods go inside or outside quotation marks? Commas and periods always go inside the quotation marks in American English; dashes, colons, and semicolons almost always go outside the quotation marks; question marks and exclamation marks sometimes go inside, sometimes stay outside.

How many block quotes can you have in a paper? ›

Jun 27, 2019 24509. There are no official limits to quotation length, though any quotations that are more than four lines should be formatted as a separate block quote. However, it is generally better to paraphrase the sources you cite rather than use direct quotations.

How do you start a paper with a quote example? ›

Use your own (grammatically correct) sentence to preview or paraphrase what the quote will say, then insert a colon or comma, then the (grammatically correct) sentence-length quotation. For example: "Once Jane Smith said something completely awesome: 'the awesome thing she said. '" Begin with the quote.

How do you write a famous quote in an essay? ›

The following general steps address how to properly integrate a quotation into an essay.
  1. Step 1: Introduce the Author of the Quotation. ...
  2. Step 2: State the Quotation. ...
  3. Step 3: Summarize the Quotation. ...
  4. Step 4: Analyze the Quotation. ...
  5. Step 5: State the Quotation's Relevance to Your Argument.

How do you style a quote? ›

How to Style Block Quotes with CSS - Web Design Tutorial - YouTube

Do pull quotes come before or after? ›

The pull quote should appear somewhat near the main text from which it pulls. In other words, you can put them a paragraph or two before or after the original line of text. You don't want to put the pull quote directly before or after the original line of text.

Should pull quotes be before or after? ›

The pull quote should always precede its appearance in body text.

What is a call out quote? ›

In magazine and newspaper publishing, a quotation or edited excerpt from an article that is placed in a larger typeface on the same page. It leads readers into the article and can highlight a key topic. A call-out is also known as a pull quote or a lift-out quote.

How do you put a quote in a newsletter? ›

How To Put A Quote In Your Post. You can just type your quote into a post and put it in quotation marks, but to really make it stand out and break up your text, try a quote block.

Where should I place a pull quote? ›

Pull quotes can be placed on top of a page, sit within the grid, between columns, or break out of the grid totally. They can be enclosed in a black or colored box, be separated from the text with a box or rules, or just “float” in a designated space or column.

How big should pull quotes be? ›

Size and length of pull-quotes

There is no rule how long or big pull-quotes have to be. It all depends on the other elements on the page. When creating pull-quotes they should have at least several words. Few words are not enough, but more than two sentences are too long.

How do you style a quote? ›

How to Style Block Quotes with CSS - Web Design Tutorial - YouTube

Do pull quotes have to be quotes? ›

Words pulled from the author's narrative and used as display type do not need quotation marks and may be altered as long as the meaning is not changed. Attribution is not necessary.

How do you format a quote in journalism? ›

In print journalism, quotes are shown surrounded by quotation marks, either single (') or double ("). These are sometimes called inverted commas. The alternative to using a quote is to rewrite the sentence into what we call reported speech.

How do you write a quote from a newspaper? ›

All quotes must be attributed.

Include the name of the person speaking in the sentence and surround their exact words in quotations marks. For example – Former President George Bush said, “Read my lips. No new taxes!” Never change what someone said – Doublecheck if you're not sure of the exact wording.

Videos

1. Vitaly Friedman - Big Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case Study
(fitcevents)
2. Art Direction for the Web with Andy Clarke
(Smashing Magazine)
3. Margin Call (2011) - Senior Partners Emergency Meeting [HD 1080p] (Re-Upload / Audio Fixed)
(Extractor)
4. A New HOPE (2022): Designing for Privacy in an Increasingly Public World
(Channel2600)
5. 2. Trusting Teams | THE 5 PRACTICES
(Simon Sinek)
6. JavaScript Tours | Pull Quotes | CSS Frameworks | The Treehouse Show Episode 35
(Treehouse)

Top Articles

Latest Posts

Article information

Author: Pres. Carey Rath

Last Updated: 09/24/2022

Views: 5470

Rating: 4 / 5 (61 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Pres. Carey Rath

Birthday: 1997-03-06

Address: 14955 Ledner Trail, East Rodrickfort, NE 85127-8369

Phone: +18682428114917

Job: National Technology Representative

Hobby: Sand art, Drama, Web surfing, Cycling, Brazilian jiu-jitsu, Leather crafting, Creative writing

Introduction: My name is Pres. Carey Rath, I am a faithful, funny, vast, joyous, lively, brave, glamorous person who loves writing and wants to share my knowledge and understanding with you.