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.
Verint font-stack
| Code Block |
|---|
|
font-family: Arial, sans-serif; |
...
Verint allows for a wide range of weights. However, only Semi-Bold, Regular, Light should be used for product design.
| Weight | Example |
|---|
| Font-weight: 300 / Light |
| Html macro |
|---|
<span style="font-family: arial; font-size: 32px; font-weight: 300;">Light 300</span> |
|
| Font-weight: 400 / Normal |
| Html macro |
|---|
<span style="font-family: arial; font-size: 32px; font-weight: 400;">Normal 400</span> |
|
| Font-weight: 600 / Semi-bold |
| Html macro |
|---|
<span style="font-family: arial; font-size: 32px; font-weight: 600;">Semi-bold 600</span> |
|
Body copy
To maximize screen real estate we recommended a smaller 14px / 0.875rem 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-height | Ratio |
|---|
| Standard UI | 1:1.5 |
| Headers | 1:1:25 |