Web Interface  |  Typography

Quotes

This section is about how you can emphasize a quote in the text and what tools you have are to do this.

01A quote with a large font size breaks up the text

A strong emphasis on the quote is not always necessary; changing the rhythm with an italic style or increasing the font size relative to the body text is sufficient. If the quote has too much contrast at the expense of increased font size, it may distract from reading the main text. Although visually it may seem that a quote with more size of the text looks interesting and attractive.

The contrast of the quote is too high, making it difficult to read the text.
The quote is harmonious in the text.

02Emphasis the quote with color

There is no need to increase the font size of the quote. You can change the color of its text and make it bold. This will increase the contrast of the quote without having to increase the font size. This keeps the balance between the size of the text and the quote.

Quote in color and bold has a good contrast.

03Decorative element

It's a great solution to add decorative elements to the quote. This helps draw attention to the quote without the need to increase its font size.

The decorative element in the quote is exciting.

04Border or background

Creating a frame around the quote seems like a questionable solution, taking away the freedom of the quote and not solving practical goals. Emphasizing it with a light background might be more appropriate.

The bordered quote looks doubtful.
A quote with a background is preferable.

05Outside the layout

If the quote or its background extends beyond outside the text layout, it allows you to alternate the rhythm of the text interestingly and diversify the presentation of content.

Quote is going outside the layout on the sides.