Typography
Typography is the foundation for the brand building of Interactive Design products. The main font for all products is Roboto. Other fonts may be used for marketing materials, unified company products and for highlighting content as described in the 'Additional Fonts' section.
Description of typography styles
Headline
Heading / H1 - Roboto / Medium / 48pt
Line height - 55px; Letter spacing - -2%
Heading / H2 - Roboto / Medium / 45pt
Line height - 50px; Letter spacing - -2%
Heading / H3 - Roboto / Medium / 40pt
Line height - 50px; Letter spacing - -2%
Heading / H4 - Roboto / Medium / 36pt
Line height - 42px; Letter spacing - -2%
Subtitle
Subtitle / L - Roboto / Medium / 32pt
Line height - 38px; Letter spacing - 0%
Subtitle / M - Roboto / Medium / 28pt
Line height - 36px; Letter spacing - 0%
Subtitle / S - Roboto / Medium / 24pt
Line height - 34px; Letter spacing - 0%
Body
Body / L - Roboto / Regular / 20pt
Line height - 35px; Letter spacing - 0%
Body / M - Roboto / Regular / 18pt
Line height - 30px; Letter spacing - 0%
Body / S - Roboto / Regular / 16pt
Line height - 30px; Letter spacing - 0%
Body - bold
Body - bold / L - Roboto / Bold / 20pt
Line height - 35px; Letter spacing - 0%
body - bold / M - Roboto / Bold / 18pt
Line height - 30px; Letter spacing - 0%
body - bold / S - Roboto / Bold / 16pt
Line height - 30px; Letter spacing - 0%
Body - italic
Body - italic / L - Roboto / Italic / 20pt
Line height - 35px; Letter spacing - 0%
Body - italic / M - Roboto / Italic / 18pt
Line height - 30px; Letter spacing - 0%
Body - italic / S - Roboto / Italic / 16pt
Line height - 30px; Letter spacing - 0%
Body - strikethrough
Body - strikethrough / L - Roboto / Italic - strikethrough / 20pt
Line height - 35px; Letter spacing - 0%
Body - strikethrough / M - Roboto / Italic - strikethrough / 18pt
Line height - 30px; Letter spacing - 0%
Body - strikethrough / S - Roboto / Italic - strikethrough / 16pt
Line height - 30px; Letter spacing - 0%
Button
Line height - 40px; Letter spacing - 0%
Line height - 35px; Letter spacing - 0%
Line height - 35px; Letter spacing - 0%
Body - link
Body - link / L - Roboto / Medium / 20pt
Line height - 35px; Letter spacing - 0%
Body - link / M - Roboto / Medium / 18pt
Line height - 30px; Letter spacing - 0%
Body - link / S - Roboto / Medium / 16pt
Line height - 30px; Letter spacing - 0%
Caption
Caption / L - Roboto / Regular / 16pt
Line height - 30px; Letter spacing - 0%
Caption / M - Roboto / Regular / 14pt
Line height - 30px; Letter spacing - 0%
Caption / S - Roboto / Regular / 12pt
Line height - 30px; Letter spacing - 0%
Additional fonts
Heebo
Sans-serif
Poppins
Sans-serif
IBM Plex Mono
Monospace
IBM Plex Serif
Serif
Space Grotesk
Sans-serif
Inter
Sans-serif
Syne
Sans-serif
Pay attention to the height of the text that is optimal for reading. The larger the font size and stroke width, the larger the line height should be. Lines placed too tight or too loose impair the readability of the text, making it harder for the eye to find a new line.
Recommended to use
Design for ease of scanning. Use short paragraphs. When working with a lot of text content, keep your paragraphs short and bright.
Don’t
Do
If you are working with extended content, such as blog posts / articles, it is important to engage the reader with the content. The appearance of the first paragraph can be just as important as its content; use the italic font style.
Don’t
Do
Use double the line spacing height of the body text style to indent from the headline or subtitle (10-20px).
Don’t
Do
One thing - one message. Use short and clear headings to help the user understand and find the information they need.
Don’t
Do
Links are only used in native blue with an underline. The style of the text links is - body-link/size.
Don’t
Do
Text positioning.
The right alignment is not suited for reading text
The left alignment is best suited for reading text
The central switch is allowed for small amounts of text and headings.
Center alignment is acceptable for small amounts of text and headings
Justification makes text harder to read
Text case. We recommend avoiding typing in uppercase and using it only for components such as tags.
Caps does not impair the readability of the small-format interface
Use of caps in headers is not recommended
Palette. For typography, it is recommended to use a pre-defined colour palette.
Text color
Display
HEX: 1E1E1E
RGB: 30 30 30
Body
HEX: 262626
RGB: 38 38 38
Body tone
Main tone / 900
HEX: 808080
RGB: 128 128 128
Main tone / 800
HEX: A5A5A5
RGB: 165 165 165
Main tone / 700
HEX: BFBFBF
RGB: 191 191 191
Main tone / 600
HEX: D9D9D9
RGB: 217 217 217
Main tone / 500
HEX: E6E6E6
RGB: 230 230 230
Main tone / 400
HEX: F0F0F0
RGB: 240 240 240
Main tone / 300
HEX: F5F5F5
RGB: 245 245 245
Link color
Body link - normal
HEX: 1364FF
RGB: 19 100 255
Body link - hover
HEX: 0E59EB
RGB: 14 89 235
Body link - visited
HEX: 6398FF
RGB: 99 152 255
