Typography
We established a font convention to ensure consistent and optimal presentation across various platforms. These choices reflect the visual identity and design principles that guide our UI/UX, ensuring clarity and ease of readability.
Font Family
The font family defines the primary typeface used in the design of our product. Consistent use of font families across all platforms maintains brand cohesion and legibility. The following font families are used in our typography system:
| Font Family | Class | Sample Text |
|---|---|---|
| Rubik | mc-font-main | This is a sample text. |
| Roboto | mc-font-inbound | This is a sample text. |
| Roboto Mono | mc-font-code | This is a sample text. |
Rubik
- is the main typeface used for general UI text. It has a modern, rounded design that ensures clarity and smooth readability.
Roboto
- It is used specifically for inbound products from SAIL.
Roboto Mono
- is used for code blocks and technical content to distinguish it clearly from body text.
Font Sizes
Font sizes define the typographic hierarchy, ensuring content is presented in a clear, readable, and visually appealing way. The following font sizes are defined for use throughout the application:
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
Font Weight
Font weight controls the thickness of the typeface characters, helping create visual contrast and emphasis. Here’s how the various font weights are used:
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
This is a sample text.
Line Height
Line height (or leading) is the vertical space between lines of text. Proper line height improves readability, especially for larger bodies of text. We define the following line heights:
| Line Height | Class |
|---|---|
| 12px | mc-line-height-100 |
| 14px | mc-line-height-200 |
| 16px | mc-line-height-300 |
| 20px | mc-line-height-400 |
| 24px | mc-line-height-500 |
| 32px | mc-line-height-600 |
| 36px | mc-line-height-700 |
| 40px | mc-line-height-800 |
| 48px | mc-line-height-900 |
| 60px | mc-line-height-1000 |
Letter Spacing
Letter spacing affects the horizontal space between characters. Proper spacing can improve legibility and the overall aesthetic of the text. The following letter spacing values are defined:
| Letter Spacing | Class |
|---|---|
| -1.3px | mc-letter-spacing-densest |
| -1px | mc-letter-spacing-denser |
| -0.7px | mc-letter-spacing-dense |
| 0px | mc-letter-spacing-normal |
| 0.7px | mc-letter-spacing-wide |
| 1px | mc-letter-spacing-wider |
| 1.3px | mc-letter-spacing-widest |
Headings
Headings are an essential element in establishing the hierarchy of information. They help break down sections of content and guide the user through a page. They typically use larger font sizes, bolder weights, and generous line heights.
Heading XLmc-heading-xl
| This is a sample text. |
Heading LGmc-heading-lg
| This is a sample text. |
Heading MDmc-heading-md
| This is a sample text. |
Heading SMmc-heading-sm
| This is a sample text. |
Heading XSmc-heading-xs
| This is a sample text. |
Subheadings
Subheadings support the primary heading and break down content into digestible sections. These are typically used for content categories or grouped ideas within larger sections. The typography is adjusted to be smaller and less bold than main headings but still visually distinct.
Subheading SMmc-subheading-sm
| This is a sample text. |
Subheading XSmc-subheading-xs
| This is a sample text. |
Body
Body text is the core content on most pages. It needs to be easy to read and legible across all screen sizes. Body text uses standard font size (16px) and is typically set to a regular or medium weight for clarity and readability.
Base Class mc-body-lg
mc-body-lg-regular
mc-body-lg-regular-underline
mc-body-lg-regular-medium
mc-body-lg-medium-underline
|
Base Class mc-body-md
mc-body-md-regular
mc-body-md-regular-underline
mc-body-md-regular-medium
mc-body-md-medium-underline
|
Base Class mc-body-sm
mc-body-sm-regular
mc-body-sm-regular-underline
mc-body-sm-regular-medium
mc-body-sm-medium-underline
|
Base Class mc-body-xs
mc-body-xs-regular
mc-body-xs-regular-underline
mc-body-xs-regular-medium
mc-body-xs-medium-underline
|
Labels
Labels are used for form inputs, navigation, and UI elements. These are typically smaller in size, often 12px–16px, and require a high contrast to stand out clearly. Labels also use consistent letter spacing for neatness.
Base Class mc-label-sm
mc-label-sm-regular
mc-label-sm-medium
|
Base Class mc-label-xs
mc-label-xs-regular
mc-label-xs-medium
|