Skip to content

Visual language / Typography

Typography

Typefaces

We use the high-quality system typefaces Roboto and San Francisco Pro for our interfaces. These typefaces include multiple weights and render well across multiple devices and resolutions.

Roboto can be downloaded from Google Fonts and San Francisco Pro can be downloaded from the Apple Developer site.

System Font
Online Roboto
iOS San Francisco Pro
Android Roboto

San Francisco

It’s important to note that Apple has two different fonts—SF Pro Text and SF Pro Display—within its San Francisco family that improve readability at specific sizes. These are automatically switched by the OS based on the following font size ranges:

  • SF Pro Text: Used for font sizes below 20 pixels
  • SF Pro Display: Used for font sizes 20 pixels and larger

Be sure to use the appropriate font when designing mockups to ensure the most accurate spacing.

Type scale

The type scale provides a variety of sizes to allow for flexibility and typographic contrast when styling body and display type. Our type scale includes the following sizes:

Size Roboto San Francisco
10
12
14
16
18
20
22
24
30
34
40
100

Weights

Font weight can help add emphasis and content hierarchy when thoughtfully applied. We use the following weights as part of the typographic system:

Weight Roboto San Francisco
Thin (100)
Light (300)
Regular (400)
Medium (500)
Bold (700)
Caution
Thin weights should only be used for 100-pixel type.

Italic

Italics are available for each weight below 20 pixels to allow for additional typographic emphasis on body text.

Weight Roboto San Francisco
Light Italic (300)
Regular Italic (400)
Medium Italic (500)
Bold Italic (700)
Note
Italics aren't available for thin weights since thin isn't available for sizes below 20 pixels.
© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.