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), 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.
...
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 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.625rem625 rem | 10px10 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.6875rem6875 rem | 11px11 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.75rem75 rem | 12px12 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.875rem875 rem | 14px14 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> |
|
1rem1 rem | 16px16 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.125rem125 rem | 18px18 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.25rem25 rem | 20px20 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.5rem5 rem | 24px24 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.75rem75 rem | 28px28 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> |
|
2rem2 rem | 32px32 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.25rem25 rem | 36px36 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.625rem625 rem | 42px42 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> |
|
3rem3 rem | 48px48 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.375rem375 rem | 54px54 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.75rem75 rem | 60px60 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> |
|
...
Verint allows for a wide range of weights. However, only Semi-Bold, Regular, and Light should be used for product design.
...
To maximize screen real estate we recommended a smaller 14px 14 px / 0.875rem875 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 |
...