web typography study guide

Quotation Marks

Quotation marks are used to set off speech or to highlight excerpted text. The rigorously vertical marks typed directly from the keyboard are not proper quotation marks. A proper quotation mark is rounded and more angular than the ambidextrous version produced by the keyboard. According to HTML specifications, three elements are available to mark up quotations: <blockquote>, <q> and <cite>


<blockquote> is used for long quotations. The quoted text is supposed to be set apart from the main text body. Using <blockquote> causes the text to indent on both the right and the left.


<q> is used for in-line quotations. Using CSS, the designer can modify the appearance of quotations. And because quote marks are not the same in different languages, the <q> tag can be defined with language pseudo-class. For example: q:lang(en) specifies English.


<cite> defines an in-line citation or reference to another source, such as the name of a person being quoted. The text within the quote will be italic by default.

Style the Quote

The current trend is to use large graphical quotation marks at the top left and the lower right corners of the quoted area. The before and after pseudo-selectors can be used to add quotation marks automatically to the quotes. These elements also are used in conjunction with the content property.