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 27 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

Inter

Verint uses Inter, a typeface carefully crafted & designed for computer screens. As part of our font stack (and a necessary fallback for situations where Inter cannot be used), we use 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.

Font stack

Our font-stack has been optimized to run on the majority of devices, operating systems, web browsers and character sets with the inclusion of web safe fonts.

@import url('https://ux.verint.com/fonts/font/Inter-3.12/Inter-web/inter.css');
font-family: 'Inter', Arial, sans-serif;

Download

The font for use in Verint LUX applications can be downloaded here.

Type Scale

REMs are a way of setting font-sizes based on the font-size of the root HTML element. They also allow you to quickly scale an entire project by changing the root font-size (for example at a certain media query/screen size). For a more in depth rationale of why we have chose to use rem units, see https://engageinteractive.co.uk/blog/em-vs-rem-vs-px.

How to calculate PX from REM

Having chosen our default root at 16px, 1rem = 16px. To calculate the rem value to use from any given px size, the following calculation is used: px / 16 = rem. The table below is a quick cheat sheet for our most common rem conversions.


rem

px

Actual size

0.625rem

10px

0.6875rem

11px

0.75rem

12px

0.875rem

14px

1rem

16px

1.125rem

18px

1.25rem

20px

1.5rem

24px

1.75rem

28px

2rem

32px

2.25rem

36px

2.625rem

42px

3rem

48px

3.375rem

54px

3.75rem

60px


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 of the same size. However, a lighter weight 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.


Weight

Example

Font-weight: 300 / Light

Font-weight: 400 / Normal

Font-weight: 600 / Semi-bold


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


  • No labels