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.
...
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.
...
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.
625rem625rem | 10px |
| 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. |
6875rem6875rem | 11px |
| 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 | 12px |
| 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 | 14px |
| 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 | 16px |
| 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 | 18px |
| 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 | 20px |
| 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 | 24px |
| 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 | 28px |
| 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 | 32px |
| 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 | 36px |
| 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 | 42px |
| 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 | 48px |
| 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 | 54px |
| 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 | 60px |
| 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, 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 / 0.875rem body copy size for a standard UI console.
...
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 |