Versions Compared

Version Old Version 4 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

...

which 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 and designed for computer screens. As part of our font stack, 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. Through it's industry proliferation, the Arial typeface comes pre-installed and

...

Font stack

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

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

...

Type Scale

...

Download
To download the font for use in 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 chosen 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 16 px, 1 rem = 16 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.625 rem
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.6875 rem
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.75 rem
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;"
>Good
>Powering 
design is good business<
actionable intelligence</span>
0.
875rem
875 rem
14 px
Good design is good business1rem16 pxGood design is good business1.125rem18 pxGood design is good business1.25rem20 pxGood design is good business1.5rem24 pxGood design is good business1.75rem28 pxGood design is good business2rem32 pxGood design is good business2.25rem36 pxGood design is good business2.625rem42 pxGood design is good business3rem48 pxGood design is good business3.375rem54 pxGood design is good business3.75rem60 pxGood design is good business4.25rem68 pxGood design is good business4.75rem76 pxGood design is good business5.25rem84 pxGood design is good business5.75rem92 pxGood design is good business
 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>
1 rem
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.125 rem
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.25 rem
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.5 rem
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.75 rem
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>
2 rem
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.25 rem
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.625 rem
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>
3 rem
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.375 rem
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.75 rem
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
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, 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 12 px / 0.75 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 16 px/1 rem would have a line-height of 1.5 rem/24 px (16 x 1.5). The exception to this rule 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