Typefaces

We use Roboto Flex for our interfaces. This variable font includes a full range of weights and renders well across multiple devices and resolutions.

Additionally, Roboto Mono is used for situations where a monospace typeface is needed.

Roboto Flex and Roboto Mono can both be downloaded from Google Fonts.

Font size

The Jack Henry design system provides a type scale that includes a scale of 18 steps that increase in size to allow for flexibility and typographic contrast when styling body and display type.

Line height

A 17-step scale of line heights that increase in size is provided to create pleasing vertical rhythms and allow for appropriate readability. Font concepts have specific font size and line height pairings, but other line heights can be leveraged to fine-tune vertical spacing.

Weight

Font weight can help add emphasis and content hierarchy when thoughtfully applied. A scale of four weights is included as part of the typographic system. These weights correspond to the same numerical designation within the CSS spec.

Italics

Italics are available for body text across each weight. Use italics to create emphasis on short spans of text.

Concepts

The design system includes a collection of semantic concepts that have pre-defined pairings of size, line height, and weight. These concepts should be used to create consistent, well-structured content and data throughout an application.

• Micro: Micro is used for "fine-print" text and small snippets of text with limited space within a component.
• Helper: Helper is used for secondary or explanatory text. It is also used for field labels.
• Body: Body is used for blocks of text and most content displayed within components. There are two steps within the scale. The first step is used for the vast majority of body content. The second step is used for shorter spans of text that need more emphasis or hierarchy such as a page lead.
• Code: Code is used for code references in standard blocks of text. Similar to the body concept, there are two steps within the scale. Each step pairs with that of the body concept. The first step is used for most inline and blocks of code. The second step is primarily used when code needs to referenced within or alongside the second scale of body text.
• Heading: Heading is used to create visual hierarchy on a page and within a component. The heading scale includes size steps which increase in size.
• Display: Display is used to create visual emphasis through size without being misconstrued as a heading. There are three steps within the scale that increase in size.