Versions Compared

Version Old Version 25 New Version Current
Changes made by

Femi

Femi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

Typeface

...

Verint uses Inter, a typeface carefully crafted & and designed for computer screens. As part of our font stack (and , as a necessary fallback for situations where Inter cannot be used ), (e.g. for non-Latin alphabets such as Arabic and Hebrew) 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 its design principles.

...

Font stack

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

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

Download

The To download the font for use in Verint LUX applications can be downloaded production environments, click 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 /or screen size). For a more in-depth rationale of why we have chose chosen to use rem units, see https://engageinteractive.co.uk/blog/em-vs-rem-vs-px.

...

Having chosen our default root at 16px16 px, 1rem 1 rem = 16px16 px. 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

625 rem

10px

10 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 10px;">Powering actionable intelligence</span>

0.

6875rem

6875 rem

11px

11 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 11px;">Powering actionable intelligence</span>

0.

75rem

75 rem

12px

12 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 12px;">Powering actionable intelligence</span>

0.

875rem

875 rem

14px

14 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 14px;">Powering actionable intelligence</span>
1rem

1 rem

16px

16 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 16px;">Powering actionable intelligence</span>

1.

125rem

125 rem

18px

18 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 18px;">Powering actionable intelligence</span>

1.

25rem

25 rem

20px

20 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 20px;">Powering actionable intelligence</span>

1.

5rem

5 rem

24px

24 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 24px;">Powering actionable intelligence</span>

1.

75rem

75 rem

28px

28 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 28px;">Powering actionable intelligence</span>
2rem

2 rem

32px

32 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 32px;">Powering actionable intelligence</span>

2.

25rem

25 rem

36px

36 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 36px;">Powering actionable intelligence</span>

2.

625rem

625 rem

42px

42 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 42px;">Powering actionable intelligence</span>
3rem

3 rem

48px

48 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 48px;">Powering actionable intelligence</span>

3.

375rem

375 rem

54px

54 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 54px;">Powering actionable intelligence</span>

3.

75rem

75 rem

60px

60 px

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 60px;">Powering actionable intelligence</span>

Typographic treatments

Font weight

...

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

Weight

Example

Font-weight: 300 / Light

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 32px; font-weight: 300;">Light 300</span>

Font-weight: 400 / Normal

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 32px; font-weight: 400;">Normal 400</span>

Font-weight: 600 / Semi-bold

Html macro
<style>
	@import url('https://rsms.me/inter/inter.css');
	html { font-family: 'Inter' !important; }
</style>
<span style="font-family: 'Inter', arial; font-size: 32px; font-weight: 600;">Semi-bold 600</span>

Body copy

To maximize screen real estate we recommended a smaller 14px 12 px / 0.875rem75 rem 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 16px16 px/1rem 1 rem would have a line-height of 1.5rem5 rem/24px 24 px (16 x 1.5). The exception to this rule are is 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