...
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.
...
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;">Powering actionable intelligence</span> |
|
0.875 rem | 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> |
|
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
...
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 14 px / 0.875 rem 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 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 |