Vertical Rhythm

In the absence of visual elements — arguably the case for many of NICE products — establishing foundations for typography underpins the content we output. This guide is designed to address vertical rhythm and hierarchy, and can be used to promote consistency of type.

Establishing a baseline

The NICE UI library uses a baseline grid of 24px (a common browser default). With this measurement we can establish a predictable and robust vertical rhythm which should dictate line heights, define hierarchy and add consistent spacing between elements.

Fonts

The NICE UI library uses Lato regular, bold and their respective italics as the standard weights. Lighter weights are also available, but are less readable on screen, particularly for Windows users so these weights are not used.

You can read more about the basic typography.

Information hierarchy through typographic scaling

Scale should be used to establish a clear and contrasting information hierarchy. To balance density of content and reading comfort, these are the optimal type sizes and styles that — along with the baseline grid — work well together for screen use.

You can also read more about the hierarchy of headings.