Typography
This page covers the typographic system, including headings, text, links, and a wide range of utility classes for controlling font styles, alignment, and decoration.
Headings
Section titled “Headings”Use the .ro-heading class to apply heading styles. Control the size using modifier classes from .ro-level-1 (largest) to .ro-level-4 (smallest).
<h1 class="ro-heading ro-level-1">Heading Level 1</h1><h2 class="ro-heading ro-level-2">Heading Level 2</h2><h3 class="ro-heading ro-level-3">Heading Level 3</h3><h4 class="ro-heading ro-level-4">Heading Level 4</h4>Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
For general text, use the .ro-text class. You can modify its size, weight, and alignment with additional modifier classes.
<p class="ro-text ro-size-xs">Extra small text</p><p class="ro-text">Default text (Small / 14px)</p><p class="ro-text ro-w-semibold">Semibold text</p><p class="ro-text ro-w-bold">Bold text</p><p class="ro-text ro-align-center">Centered text</p>Extra small text
Default text (Small / 14px)
Semibold text
Bold text
Centered text
Apply the .ro-link class to an <a> tag to give it standard link styling. The text content must be wrapped in a child element with the .ro-link-text class.
This specific structure ensures that the underline effect is applied correctly to the text via the --ro-link-text-deco variable, while allowing icons or other elements to remain undecorated.
Basic Usage & Modifiers
Section titled “Basic Usage & Modifiers”You can modify the link’s weight or remove the hover decoration using utility classes.
<a class="ro-link"><span class="ro-link-text">Default Link</span></a>
<a class="ro-link ro-weight-normal"><span class="ro-link-text">Normal Weight Link (400)</span></a>
<a class="ro-link ro-weight-regular"><span class="ro-link-text">Regular Weight Link (500)</span></a>
<a class="ro-link ro-no-underline"><span class="ro-link-text">No Underline on Hover</span></a>Color Schemes
Section titled “Color Schemes”Links can adapt to specific color contexts using the .ro-color-scheme-* modifier or the data-ro-color-scheme attribute.
<a class="ro-link ro-color-scheme-product"><span class="ro-link-text">Product Link</span></a>Utility Classes
Section titled “Utility Classes”These utility classes can be applied to any text element for direct styling.
Text Alignment
Section titled “Text Alignment”Control the horizontal alignment of text with alignment utilities.
<p class="ro-u-text-left">Left-aligned text.</p><p class="ro-u-text-center">Centered text.</p><p class="ro-u-text-right">Right-aligned text.</p><p class="ro-u-text-justify">Justified text.</p>Left-aligned text.
Centered text.
Right-aligned text.
Justified text.
Font Weight
Section titled “Font Weight”Adjust the font weight of any text element. It is recommended to use relatives font weights.
<p class="ro-u-fw-bolder">Bolder weight (500)</p><p class="ro-u-fw-boldest">Boldest weight (600)</p>
<p class="ro-u-fw-normal">Normal weight (400)</p><p class="ro-u-fw-semibold">Semibold weight (600)</p><p class="ro-u-fw-bold">Bold weight (700)</p>Relative font weights
Bolder weight (500)
Boldest weight (600)
Named font-weights
Normal weight (400)
Semibold weight (600)
Bold weight (700)
Text Transform & Decoration
Section titled “Text Transform & Decoration”Apply text transformations like uppercase or styles like italic and underline.
<p class="ro-u-text-uppercase">Uppercase text.</p><p class="ro-u-text-lowercase">Lowercase text.</p><p class="ro-u-text-capitalize">Capitalized text.</p><p class="ro-u-text-italic">Italic text.</p><p class="ro-u-text-underline">Underlined text.</p>Uppercase text.
Lowercase text.
Capitalized text.
Italic text.
Underlined text.
Apply different colors to any text element using the .ro-u-text-* utility classes.
<p class="ro-u-text-product">Product color</p><p class="ro-u-text-secondary">Secondary color</p><p class="ro-u-text-success">Success color</p><p class="ro-u-text-danger">Danger color</p>Product color
Secondary color
Success color
Danger color
Font Size
Section titled “Font Size”While components like Headings and Text have their own sizing, you can override font size anywhere with .ro-u-fs-* utilities. Scales range from 0 (10px) to 10 (48px).
<p class="ro-u-fs-0">Size 0 (10px)</p><p class="ro-u-fs-1">Size 1 (12px)</p><p class="ro-u-fs-2">Size 2 (14px)</p><p class="ro-u-fs-3">Size 3 (16px)</p><p class="ro-u-fs-4">Size 4 (18px)</p><p class="ro-u-fs-5">Size 5 (20px)</p><p class="ro-u-fs-6">Size 6 (24px)</p><p class="ro-u-fs-7">Size 7 (28px)</p><p class="ro-u-fs-8">Size 8 (32px)</p><p class="ro-u-fs-9">Size 9 (36px)</p><p class="ro-u-fs-10">Size 10 (48px)</p>Size 0 (10px)
Size 1 (12px)
Size 2 (14px)
Size 3 (16px)
Size 4 (18px)
Size 5 (20px)
Size 6 (24px)
Size 7 (28px)
Size 8 (32px)
Size 9 (36px)
Size 10 (48px)
Properties
Section titled “Properties”.ro-heading
Section titled “.ro-heading”| Property | Default | Description |
|---|---|---|
.ro-level-* | inherit | 1 | 2 | 3 | 4 |
.ro-text
Section titled “.ro-text”| Property | Default | Description |
|---|---|---|
.ro-size-* | md | xs (12px) | md (14px) |
.ro-w-* | normal | semibold (600) | bold (700) |
.ro-align-* | left | center | right | justify |
.ro-link
Section titled “.ro-link”| Property | Default | Description |
|---|---|---|
.ro-weight-* | regular | normal (400) | regular (500) |
.ro-no-underline | false | Removes the underline decoration effects. |
.ro-color-scheme-* | inherit | product |
Utility Classes
Section titled “Utility Classes”| Class Prefix | Description |
|---|---|
.ro-u-ff-* | Changes font family. Options: heading, text. |
.ro-u-fw-* | Changes font weight. Options: normal (400), bolder (500), boldest (600), semibold (600), bold (700). |
.ro-u-text-* | Controls text alignment. Options: left, right, center, justify. |
.ro-u-text-* | Controls text style. Options: underline, italic, uppercase, lowercase, capitalize. |
.ro-u-text-* | Controls text color. Options: product, secondary, success, warning, danger, etc. |
.ro-u-fs-* | Overrides font size. Options range from 0 to 10 (e.g. ro-u-fs-1, ro-u-fs-2). |