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 | spr-font-main | This is a sample text. |
| Roboto | spr-font-inbound | This is a sample text. |
| Roboto Mono | spr-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 | spr-line-height-100 |
| 14px | spr-line-height-200 |
| 16px | spr-line-height-300 |
| 20px | spr-line-height-400 |
| 24px | spr-line-height-500 |
| 32px | spr-line-height-600 |
| 36px | spr-line-height-700 |
| 40px | spr-line-height-800 |
| 48px | spr-line-height-900 |
| 60px | spr-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 | spr-letter-spacing-densest |
| -1px | spr-letter-spacing-denser |
| -0.7px | spr-letter-spacing-dense |
| 0px | spr-letter-spacing-normal |
| 0.7px | spr-letter-spacing-wide |
| 1px | spr-letter-spacing-wider |
| 1.3px | spr-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. In our design system, headings are visually distinct and scalable based on importance. They typically use larger font sizes, bolder weights, and generous line heights.
Heading XLspr-heading-xl
| This is a sample text. |
Heading LGspr-heading-lg
| This is a sample text. |
Heading MDspr-heading-md
| This is a sample text. |
Heading SMspr-heading-sm
| This is a sample text. |
Heading XSspr-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 SMspr-subheading-sm
| This is a sample text. |
Subheading XSspr-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 spr-body-lg
spr-body-lg-regular
spr-body-lg-regular-underline
spr-body-lg-regular-medium
spr-body-lg-medium-underline
|
Base Class spr-body-md
spr-body-md-regular
spr-body-md-regular-underline
spr-body-md-regular-medium
spr-body-md-medium-underline
|
Base Class spr-body-sm
spr-body-sm-regular
spr-body-sm-regular-underline
spr-body-sm-regular-medium
spr-body-sm-medium-underline
|
Base Class spr-body-xs
spr-body-xs-regular
spr-body-xs-regular-underline
spr-body-xs-regular-medium
spr-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 spr-label-sm
spr-label-sm-regular
spr-label-sm-medium
|
Base Class spr-label-xs
spr-label-xs-regular
spr-label-xs-medium
|