Typography

Typography is at the center of good interface design and this documentation provides some pointers on how to use the typographic elements within DS-kit effectively when building datastory products.

The Typeface

The main typeface used across the datastory platform is Averta PE. Averta is a geometric sans serif with true italics and supports 250+ languages.

The Scale

Typographic scales are used to create a consistent hierarchy when designing with different font sizes. Heading and text use the same type scale, which ranges from xxs to xxxl. Note that headings have a tighter line height than text by default.

Text Colors

When using colors on text, make sure to follow the a11y guidelines on color contrast to ensure that all users can easily read and understand the text.

We encourage the use of neutral text colors instead of using colored text. The basic text color is text, which is the equivalent to grey.900.

In case you are using vibrant background colors, it may be worth setting the text in a very light shade of the same color. If you are using purple.500 for a background, you could use purple.50 as a text color.