This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

CSS Example: Pullquotes

Combination of this technique with other typographic conventions, such as first line indent, would prove too distracting visually, and should be avoided. In this example, a sans-serif font was used, with italics, to further emphasize the pullquote.

Sue Sims

Pullquotes

Pullquotes An interesting technique for emphasizing segments of text is the pullquote. This technique offers a way to emphasize certain key words in running text, and offers an easy way to highlight certain concepts as they are introduced.

Technique Combination of this technique with other typographic conventions, such as first line indent, would prove too distracting visually, and should be avoided. In this example, a sans-serif font was used, with italics, to further emphasize the pullquote.

Lengthy quotes For pullquotes which are particularly lengthy, some 'tweaking' by CSS authors may be needed, to ensure that the aesthetics remain intact. A strong suggestion would be to ensure that you have adequate text to wrap under the pullquote, so that re-sizing will not totally destroy inter-paragraph spacing.

Properties The CSS properties which must be set (and perhaps adjusted) are: width, padding-right, and margins. It is suggested that you avoid the use of absolute values for fixing the size of the text, padding and width. Using relative values like em and smaller allows the pullquotes to retain their relationship to the text, even when the window is re-sized.

Thanks to "Yucca" for suggestions.