Text Styles

A set of pre-defined text styles can help to kick start the design of your project. Use them to present your content efficiently and improve the reading experience.

Text Styles
  • Usage
  • Examples
  • Related components
  • Download


Unordered and Ordered Lists

A few styles are available for bullet points in unordered lists: circular, rectangular, or a simple dash. Use red numbers in ordered lists unless the background is yellow, in which case use black numbers to ensure sufficient contrast.

Text links

Format text links in black or red and underline them if necessary to make the link clear to the reader. Use a white transparent layer behind red text links on yellow backgrounds to ensure sufficient contrast.


We prefer DHL Red main headlines set in Delivery Black Condensed, uppercase. Accompanied by a topline or a subline set in Delivery Light Condensed.


Our quotation style is used both for quoting people and for highlighting an excerpt from the text (pull quotes). We prefer quotations in italics. Indicating the source of the quote is optional. To add emphasis or further separate nested quotations visually from the copy text, add a border on the side.

Copy text

We separate copy text into two categories: short and long. Long copy text uses a larger line height to improve the readability of larger chunks of text. Short copy text uses a smaller line height to visually group together a few lines of text.


Related components


If you download any document, you accept our Terms and Conditions.

Sketch UI Library
85.98 MB