Web Interface Handbook / Typography

Quotes

01 Size

The size is the most obvious sign of a quote or testimonial. They can be much larger than the body text. But, if the quote size is giant, that is a problem. It's better to decrease its font size so that it doesn't ruin the rhythm of the text and interfere with the reading by its size.

02 Length and line spacing

Most often, quotes are relatively short and consist of a couple of lines. So it is more convenient to read them from a shorter line, especially considering the text's increased size. It is better to shorten the quote's length than the paragraph's column.

It is quite acceptable to make the line spacing at the quote a little less than the main text if the font size is large and the quote is short.

03 Style

If the font size in the quote is large enough, as a rule, it is not necessary to make it a special style. Together with a typeface that contrasts with the body text it is always enough.

The text of the quote can be bold. This design helps create a strong contrast between the other text and the quote. Sometimes the high contrast can play a vital role.

It is beautiful if the quote has a decorative mark larger than the text size. This visual trick creates a good attention point and will keep the user's eye on the content.

04 Credits

You shouldn't make the source or author's text in muted color at all. It looks frankly bad, and it makes too little sense.

It is better to achieve a difference by contrasting the quote's size and the caption's size. You can go for a ratio of 1.25 to 2. For example, the caption is 18px and the text of the quote is 32px, i.e. 1:1.75.

05 Border vs background

Do not border the quotation. It always looks strange and raises questions. If you want to give extra emphasis to the quote, make a light background.

Prev
Tables
Next
Lists