Skip to end of banner
Go to start of banner

Typography

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 13 Next »

Typography is used to create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.

Typeface

Arial

Verint uses the industry standardised sans-serif typeface, Arial. It has been carefully chosen to meet Verint's needs as a global technology company and design principles. Through it's industry proliferation, the Arial typeface comes pre-installed and has been optimized to run on the majority of devices, operating systems and web browsers. It is regarded as a web safe font.

font-stack

font-family: Arial, sans-serif;

Type Scale

rempxActual size
0.75rem12 px
0.875rem14 px
1rem16 px
1.125rem18 px
1.25rem20 px
1.5rem24 px
1.75rem28 px
2rem32 px
2.25rem36 px
2.625rem42 px
3rem48 px
3.375rem54 px
3.75rem60 px

Typographic treatments

Font weight

Font weight is an important typographic style that can add emphasis and is used to differentiate content hierarchy. Font weight and size pairings must be carefully balanced. A bold weight will always have more emphasis than a lighter weight font of the same size. However, a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger than the bold.

Verint allows for a wide range of weights. However, only Semi-Bold, Regular, Light should be used for product design.


WeightExample
Font-weight: 300 / Light
Font-weight: 400 / Normal
Font-weight: 600 / Semi-bold

Body copy

To maximize screen real estate we recommended a smaller 12px / 0.75rem body copy size for a standard UI console.


Line-height

Line-height, traditionally known as leading, is one of several factors that directly contribute to readability and pacing of copy. Line-heights are based on the size of the font itself. Ideal line-heights for standard copy have a ratio of 1:1.5 (typesize : line-height). For example, a type at 16px/1rem would have a line-height of 1.5rem/24px (16 x 1.5). The exception to this rule are headings, which need less spacing and therefore have a line-height ratio of 1:1.25.


Line-heightRatio
Standard UI1:1.5
Headers1:1:25
  • No labels