Typography
The RADES typography system provides a consistent and hierarchical approach to text styling throughout the application. It uses a set of predefined font sizes and typography styles to ensure readability and visual harmony.
Font Families
RADES uses native font stacks for optimum performance and consistent text rendering on every device and OS:
| Font Family Name | Font Type | Usage |
|---|---|---|
$font-family-base |
Native sans-serif font stack* | Default font family for all text elements |
$font-family-monospace |
Native monospace font stack | Font family for code and technical content |
* Includes the RRUnicode font to render RACOM's custom characters.
Base Font Size
The base font size for the entire application is set to 87.5 %, which is equivalent to 14 px on most devices. This percentage-based approach respects the user's browser preferences while maintaining proportional scaling.
Font Size Scale
The typography system includes a scale of predefined font sizes that maintain a consistent relationship with each other:
| Scale Name | Size (rem) | Size (px)* | Usage |
|---|---|---|---|
$font-size-scale-small-2 |
0.786 rem | 11 px | Extra small text |
$font-size-scale-small-1 |
0.857 rem | 12 px | Small text, captions |
$font-size-scale-1 |
1 rem | 14 px | Body text |
$font-size-scale-2 |
1.143 rem | 16 px | Large body text |
$font-size-scale-3 |
1.286 rem | 18 px | Subheadings |
$font-size-scale-4 |
1.5 rem | 21 px | Headings |
$font-size-scale-5 |
2 rem | 28 px | Large headings |
$font-size-scale-6 |
3 rem | 42 px | Display headings |
* Pixel values are approximate based on the base font size.
Abstract Styles
These meta-style configurations serve as an abstraction layer for semantic typography styles.
ℹ️ The underscore prepended to abstract style variable names ensures these
styles are never exported from the _typography.scss file.
Body Text Styles
| Style Name | Properties | Description |
|---|---|---|
$_body-bold |
font-weight: 700 font-size: 1rem line-height: 1.5 |
Bold body text |
$_body-regular |
font-weight: 400 font-size: 1rem line-height: 1.5 |
Regular body text |
$_body-small-regular |
font-weight: 400 font-size: 0.786rem line-height: 1.5 |
Small body text |
$_body-extra-small-regular |
font-weight: 400 font-size: 0.857rem line-height: 1.182 |
Extra small body text |
$_body-extra-small-bold |
font-weight: 700 font-size: 0.857rem line-height: 1.182 |
Extra small body text, bold |
$_body-large-regular |
font-weight: 400 font-size: 1.143rem line-height: 1.5 |
Large body text |
$_body-monospace-regular |
font-family: Native monospace font stack font-weight: 400 font-size: 0.857rem line-height: 1.5 |
Monospaced text |
Heading Styles
| Style Name | Properties | Description |
|---|---|---|
$_h1-bold |
font-weight: 700 font-size: 1.5rem line-height: 1.5 |
Bold h1 heading |
$_h1-regular |
font-weight: 400 font-size: 1.5rem line-height: 1.5 |
Regular h1 heading |
$_h2-bold |
font-weight: 700 font-size: 1.286rem line-height: 1.5 |
Bold h2 heading |
$_h2-regular |
font-weight: 400 font-size: 1.286rem line-height: 1.5 |
Regular h2 heading |
$_h3-bold |
font-weight: 700 font-size: 1.143rem line-height: 1.5 |
Bold h3 heading |
$_h3-regular |
font-weight: 700 font-size: 1.143rem line-height: 1.5 |
Regular h3 heading |
$_h4-bold |
font-weight: 700 font-size: 1rem line-height: 1.5 |
Bold h4 heading |
$_h4-regular |
font-weight: 400 font-size: 1rem line-height: 1.5 |
Regular h4 heading |
$_uppercase |
letter-spacing: 0.25em text-transform: uppercase |
Uppercase modifier |
Semantic Styles
Generic Styles
Generic styles are semantic typography styles that can be used throughout the application for consistent text formatting:
| Style Name | Based On | Usage |
|---|---|---|
$body |
$_body-regular |
Primary body text |
$body-small |
$_body-small-regular |
Secondary or supporting text |
$body-extra-small |
$_body-extra-small-regular |
Tiny supporting text |
$body-large |
$_body-large-regular |
Large body text |
$caption |
$_h3-bold + $_uppercase |
UI elements captions |
$code |
$_body-monospace-regular |
Code snippets or technical content |
$section-heading-1 |
$_h1-bold |
Section titles, level 1 |
$section-heading-2 |
$_h2-bold |
Section titles, level 2 |
$section-heading-3 |
$_h2-bold |
Section titles, level 3 |
$table-header |
$_body-bold |
Table headers |
$table-body |
$_body-regular |
Table cell content |
👉 Head over to CSS helpers to see how you can apply the styles in your app.
Component Styles
Component-specific typography styles ensure consistent text formatting across different UI components:
| Component Style | Based On | Usage |
|---|---|---|
$component-button-medium |
$_body-regular |
Medium buttons |
$component-button-large |
$_body-large-regular |
Large buttons |
$component-dialog-title |
$_h4-bold |
Dialog title |
$component-form-field-medium-label |
$_body-regular |
Medium form field labels |
$component-form-field-medium-input |
$_body-regular |
Medium form field inputs |
$component-form-field-large-label |
$_body-regular |
Large form field labels |
$component-form-field-large-input |
$_body-large-regular |
Large form field inputs |
$component-layout-title |
$_h1-regular + $_uppercase |
Layout title |
$component-modal-title |
$_h2-bold |
Modal title |
$component-navigation-bar |
$_body-extra-small-bold + $_uppercase |
Primary navigation items, mobile |
$component-navigation-level-1 |
$_h2-regular |
Primary navigation items, desktop |
$component-navigation-level-2 |
$_h3-regular |
Secondary navigation items |
ℹ️ Unlike generic styles, component styles can be used only in components' CSS.