Typefaces
Keystone uses the typefaces Zilla Slab and Plus Jakarta Sans. These are available for download below.
The scale is a range of contrasting styles that support the needs of various product contexts and content.
Style | Desktop Size | Responsive Size | Line Height | Typeface |
|---|---|---|---|---|
Display Large | 72px | 48px | 105% | Zilla Slab |
Display Medium | 56px | 40px | 105% | Zilla Slab |
Display Small | 48px | 32px | 105% | Zilla Slab |
Headline Large | 40px | 24px | 120% | Zilla Slab |
Headline Medium | 32px | 20px | 120% | Zilla Slab |
Headline Small | 24px | 16px | 120% | Zilla Slab |
Title Large | 20px | – | 120% | Plus Jakarta Sans |
Title Medium | 16px | – | 120% | Plus Jakarta Sans |
Title Small | 12px | – | 120% | Plus Jakarta Sans |
Body Large | 16px | – | 150% | Plus Jakarta Sans |
Body Medium | 14px | – | 150% | Plus Jakarta Sans |
Body Small | 12px | – | 150% | Plus Jakarta Sans |
Label Large | 14px | – | 125% | Plus Jakarta Sans |
Label Medium | 12px | – | 125% | Plus Jakarta Sans |
Label Small | 11px | – | 125% | Plus Jakarta Sans |
Roles
Display
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.
Headine
Headlines are best-suited for short, high-emphasis text on smaller screens. These styles can be good for marking primary passages of text or important regions of content.
Display
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.
Body
Body styles are used for longer passages of text.
Label
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.
Ensuring Readability
Type Pairing
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 3 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, regardless of accompanying typestyles.
Line Length
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.
Style | Recommended Max-Width |
|---|---|
Body Large | 510px |
Body Medium | 486px |
Body Small | 384px |
Accessibility
Color & Contrast
Support visual accessibility by choosing the appropriate color contrast between your product’s text and background. Contrast is the perceived difference between the lightness or darkness of two colors, and is quantified by a contrast ratio. Key contrast ratios indicate levels of contrast that are sufficient for accessibility.
Large Text
Large text (18px or larger, or 14px or larger if bold) should meet a contrast ratio of 3:1 for standard accessibility (graded as AA) and 4.5:1 for greater accessibility (graded as AAA).
Standard Text Sizes
Standard body text sizes (smaller than 18px, or smaller than 14px if bold) should meet a contrast ratio of 4.5:1 for standard accessibility (graded as AA) and 7:1 for greater accessibility (graded as AAA).
Default Text Color
The default color for typography is on-surface, although on-surface-variant is a strong alternative.