Fonts and typography

Typography guidelines help standardize our typeface styling, to improve the look and readability of product text.

Base font

Zywave uses system fonts for all text within our applications, including headlines, introductory text, body text and any components that contain text.
With system fonts, page content can feel more like it belongs on your particular computer or device.
More information on system fonts

FontSize(px)WeightColor
System fonts
  • Segoe UI
  • -apple-system
  • BlinkMacSystemFont
14px400ZUI Gray 800

Headlines

We have 6 headline styles used throughout our applications. Though there isn't a strict standard on appropriate headline usage, it's essential to keep in mind that font weight and size are used to convey importance and bring hierarchy to a page.

Note: Our standard set of headline styles–featured in the supporting image--are paired with our default body copy. However, in certain circumstances, an application may use small or x-small body copy.

For more information, see body copy.

Headlines examples

NameSize(px)WeightColorUsage guidelines
Hero32300ZUI Gray 800Used sparingly, typically for welcoming the user to a new experience. ie. in step flows
H1 - First header26600ZUI Gray 800Used as the page title and modal title
H2 - Second header20600ZUI Gray 800-
H3 - Third header16600ZUI Gray 800-
H4 - Fourth header14700ZUI Gray 800-
H5 - Fifth header12700ZUI GRAY 800ALL CAPS

Body copy

We have 3 defined body copy sizes used throughout our applications. Typically, default body copy is appropriate on-screen; however, you may wish to use small or x-small for special cases.

Body copy example

NameSize(px)WeightColorUsage guidelines
Default14400ZUI Gray 800Base font
Small12400ZUI Gray 800-
X-small11400ZUI Gray 800-

Font weight

We have 4 font weights used throughout our applications. Though there isn't a strict standard on appropriate font weight usage, it's essential to keep in mind that font weight and size are used to convey importance and bring hierarchy to a page.

Font weight example


Line height

We use a standard 1.6 line height. We recommend using unit-less line heights because child elements will inherit the raw number value, rather than the computed value. With this, child elements can compute their line heights based on their computed font size, rather than inheriting an arbitrary value from a parent that is more likely to need overriding.

Font size is measured from the top of a capital letter (O) to the bottom of descending characters (p). Half the line height extends both up and down from the centerline of the text.

Line height example


Line length

To optimize text readability, we recommend line lengths of at least 45 characters and no more than 75 characters.

Line length example