Typography
Typography is an essential part of any design system. It ties together different user experiences, platforms and media, fostering a sense of brand identity and consistency in a subtle but effective way. Well-defined typography rules not only help present content clearly and efficiently, but can also help such content be perceived as elegant and sophisticated.
Table of contents
Primary typeface
ICS uses Inter as a primary typeface.
https://rsms.me/inter/
Inter is a typeface specifically designed for user interfaces, with a focus on ensuring the legibility of small-to-medium sized text on computer screens.
The family features a tall x-height to aid in readability of mixed-case and lowercase text. Several OpenType features are provided as well, such as contextual alternates that adjust punctuation depending on the shape of surrounding glyphs, a slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.
Inter typeface
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0 ? ! ( ) [ ] { } & * ^ % $ # @ ~
Secondary typeface
ICS uses Arial as a secondary and fallback typeface. This is a second choice, to be used only when the Inter font isn’t available.
Arial is a sans-serif typeface and set of computer fonts. Fonts from the Arial family are packaged with all versions of Microsoft Windows from Windows 3.1 onwards, some other Microsoft software applications, Apple's macOS and many PostScript 3 computer printers.
Arial typeface
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0 ? ! ( ) [ ] { } & * ^ % $ # @ ~
Font weight
All of the ICS brands use two font weights: regular (400) and bold (700).
Inter Regular
Inter Italic
Inter Bold
Inter Bold Italic
Arial Regular
Arial Italic
Arial Bold
Arial Bold Italic
Typography scale
The typographic scale has been used for centuries as a means of creating balanced and harmonious font sizing. ICS's typography scale includes a range of contrasting styles that support the needs of all of its brands and branded materials. The typography scale is a combination of 8 sizes.
Size 12px
Size 14px
Size 16px
Size 18px
Size 24px
Size 28px
Size 36px
Size 48px
Digital typography baseline grid
The text bounding box should align to the 4px baseline grid. Typography can be placed outside of the 4px grid when it’s centered within a component, such as a button or list item.
Typography styles and breakpoints
Heading-1-bold
Mobile
font-size: 28px;
line-height: 32px;
Tablet
font-size: 36px;
line-height: 40px;
Desktop
font-size: 48px;
line-height: 52px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-1-bold-italic
Mobile
font-size: 28px;
line-height: 32px;
Tablet
font-size: 36px;
line-height: 40px;
Desktop
font-size: 48px;
line-height: 52px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-1-regular
Mobile
font-size: 28px;
line-height: 32px;
Tablet
font-size: 36px;
line-height: 40px;
Desktop
font-size: 48px;
line-height: 52px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-1-regular-italic
Mobile
font-size: 28px;
line-height: 32px;
Tablet
font-size: 36px;
line-height: 40px;
Desktop
font-size: 48px;
line-height: 52px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-2-bold
Mobile
font-size: 24px;
line-height: 28px;
Tablet
font-size: 28px;
line-height: 32px;
Desktop
font-size: 36px;
line-height: 40px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-2-bold-italic
Mobile
font-size: 24px;
line-height: 28px;
Tablet
font-size: 28px;
line-height: 32px;
Desktop
font-size: 36px;
line-height: 40px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-2-regular
Mobile
font-size: 24px;
line-height: 28px;
Tablet
font-size: 28px;
line-height: 32px;
Desktop
font-size: 36px;
line-height: 40px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-2-regular-italic
Mobile
font-size: 24px;
line-height: 28px;
Tablet
font-size: 28px;
line-height: 32px;
Desktop
font-size: 36px;
line-height: 40px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-3-bold
Mobile
font-size: 20px;
line-height: 24px;
Tablet
font-size: 24px;
line-height: 28px;
Desktop
font-size: 28px;
line-height: 32px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-3-bold-italic
Mobile
font-size: 20px;
line-height: 24px;
Tablet
font-size: 24px;
line-height: 28px;
Desktop
font-size: 28px;
line-height: 32px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-3-regular
Mobile
font-size: 20px;
line-height: 24px;
Tablet
font-size: 24px;
line-height: 28px;
Desktop
font-size: 28px;
line-height: 32px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Heading-3-regular-italic
Mobile
font-size: 20px;
line-height: 24px;
Tablet
font-size: 24px;
line-height: 28px;
Desktop
font-size: 28px;
line-height: 32px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-1-bold
Mobile
font-size: 18px;
line-height: 28px;
Tablet
font-size: 18px;
line-height: 28px;
Desktop
font-size: 18px;
line-height: 28px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-1-bold-italic
Mobile
font-size: 18px;
line-height: 28px;
Tablet
font-size: 18px;
line-height: 28px;
Desktop
font-size: 18px;
line-height: 28px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-1-regular
Mobile
font-size: 18px;
line-height: 28px;
Tablet
font-size: 18px;
line-height: 28px;
Desktop
font-size: 18px;
line-height: 28px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-1-regular-italic
Mobile
font-size: 18px;
line-height: 28px;
Tablet
font-size: 18px;
line-height: 28px;
Desktop
font-size: 18px;
line-height: 28px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-2-bold
Mobile
font-size: 16px;
line-height: 24px;
Tablet
font-size: 16px;
line-height: 24px;
Desktop
font-size: 16px;
line-height: 24px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-2-bold-italic
Mobile
font-size: 16px;
line-height: 24px;
Tablet
font-size: 16px;
line-height: 24px;
Desktop
font-size: 16px;
line-height: 24px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-2-regular
Mobile
font-size: 16px;
line-height: 24px;
Tablet
font-size: 16px;
line-height: 24px;
Desktop
font-size: 16px;
line-height: 24px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-2-regular-italic
Mobile
font-size: 16px;
line-height: 24px;
Tablet
font-size: 16px;
line-height: 24px;
Desktop
font-size: 16px;
line-height: 24px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-3-bold
Mobile
font-size: 14px;
line-height: 20px;
Tablet
font-size: 14px;
line-height: 20px;
Desktop
font-size: 14px;
line-height: 20px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-3-bold-italic
Mobile
font-size: 14px;
line-height: 20px;
Tablet
font-size: 14px;
line-height: 20px;
Desktop
font-size: 14px;
line-height: 20px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-3-regular
Mobile
font-size: 14px;
line-height: 20px;
Tablet
font-size: 14px;
line-height: 20px;
Desktop
font-size: 14px;
line-height: 20px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-3-regular-italic
Mobile
font-size: 14px;
line-height: 20px;
Tablet
font-size: 14px;
line-height: 20px;
Desktop
font-size: 14px;
line-height: 20px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-4-bold
Mobile
font-size: 12px;
line-height: 20px;
Tablet
font-size: 12px;
line-height: 20px;
Desktop
font-size: 12px;
line-height: 20px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-4-bold-italic
Mobile
font-size: 12px;
line-height: 20px;
Tablet
font-size: 12px;
line-height: 20px;
Desktop
font-size: 12px;
line-height: 20px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-4-regular
Mobile
font-size: 12px;
line-height: 20px;
Tablet
font-size: 12px;
line-height: 20px;
Desktop
font-size: 12px;
line-height: 20px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories
Text-4-regular-italic
Mobile
font-size: 12px;
line-height: 20px;
Tablet
font-size: 12px;
line-height: 20px;
Desktop
font-size: 12px;
line-height: 20px;
A Flexible, Hard-Working Digital Agency That Can Improve Rankings and Boost Traffic in 42 Languages Across 58 Territories