Skip to main content

Typography

Thoughtful typography is important to establish visual hierarchy and clearly and efficiently communicate content.

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.

An example of Roboto Flex applied to the upper and lowercase alphabet.

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

An example of Roboto Mono applied to the upper and lowercase alphabet.

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 not currently part of the font token set. However, they can readily be applied as an override to any of the font tokens.

In Figma, use Command + I to apply an italic override on a text layer or selected text within a layer. In dev mode, this will accurately show the font tokens to apply as well as the additional italic override.

In code, font-style: italic; can be added to a CSS style rule that includes the font tokens. For example, to define paragraph text with italics, you could use the following CSS:

p {
  font-family: var(--jh-font-body-regular-1-font-family);
  font-weight: var(--jh-font-body-regular-1-font-weight);
  font-size: var(--jh-font-body-regular-1-font-size);
  line-height: var(--jh-font-body-regular-1-line-height);
  font-style: italic;
}

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.