Typography

A type scale is a selection of font styles that can be used across a digital experience. This ensures a flexible, yet consistent, style that accommodates a range of purposes.

The Keystone Design System type scale is a combination of 15 styles, each with an intended application and meaning. They’re assigned based on use (such as display or headline), and grouped more broadly into categories based on scale (such as large or small).

Keystone’s default type scale uses Zilla Slab for all display and headline styles. Plus Jakarta Sans is used for all titles, labels, and body text.

For XS (extra small) to S (small) breakpoints smaller than 992 pixels, use the responsive display and header variants.

Remember that styles do not correspond to a specific HTML tag. An H1 tag can be assigned to any header style and size, as long as a logical hierarchy is maintained.

There are three display styles in the default type scale: large, medium, and small.

As the largest text on the screen, display styles are reserved for short, important text or numerals. They work best on large screens.

Example of a hero section using a display size.

Headlines are best suited for short, high-emphasis text on smaller screens. These styles can be useful for marking primary passages of text or important regions of content.

Headline style used on a page section.

Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. For example, consider using title styles to divide secondary passages of text or secondary regions of content.

Body styles are used for longer passages of text.

Label styles are smaller, utilitarian styles, used for things like the text inside components or for very small text in the content body, such as captions. 

Buttons, for example, use the label large style.

Typography can help create clear hierarchies, organize information, and guide users through a product or experience. Together with spacing, type pairings support different levels of architecture or areas that require varying typographic hierarchies.

All type roles are divided into three size groups: large, medium, and small. When pairing type styles for general page content, aim to pair styles from the same size group. For example, if you use Headline.Large for a heading, you should pair it with Body.Large for your body text. The one exception to this pattern is the pre-title, which should always use title.small.uppercase.

Example of vertical spacing values for the large type set.

Bottom padding values for various type pairings based on type size and breakpoint.

Line length is how many characters are on a single line of text. 

For longer body text, the recommended line length is between 40 to 75 characters. To ensure proper line length for body text, refer to the recommended max-width values in the table below.

Support accessibility by choosing the appropriate color contrast between the text and background. Contrast is the perceived difference between the lightness or darkness of two colors, and is quantified by a contrast ratio. 

Large text

Large text (18px or larger, or 14px or larger if bold) must meet a minimum contrast ratio of 3:1.

Standard text sizes

Standard body text sizes (smaller than 18px, or smaller than 14px if bold) must meet a minimum contrast ratio of 4.5:1.

Default text color

The default color for typography is on-surface, although on-surface-variant is a strong alternative.