Home

Typography

The Riverty CSS Framework offers a comprehensive set of predefined typography styles to ensure consistent and cohesive application of the brand’s visual identity across digital platforms.

This documentation provides a detailed overview of the available text styles, including headlines, body text, and links, along with their respective class names for easy integration into your project.

Automatic Styling with r-typography

By simply applying the r-typography class to the container, common text elements such as headings (h1, h2, h3, h4), paragraphs (p), and lists (ol, ul) are automatically styled based on Riverty’s design specifications. No additional classes are needed for these elements.

Example Usage:

<div class="r-typography">
  <h1>Heading Level 1 - XXL Headline</h1>
  <p>This is a paragraph using the L body text. Riverty’s design language ensures a cohesive and visually appealing user experience.</p>

  <h2>Heading Level 2 - XL Headline</h2>
  <p>This is a paragraph with M body text. The typography is designed to create a clear visual hierarchy and ensure readability across devices.</p>

  <h3>Heading Level 3 - L Headline</h3>
  <p>This paragraph is styled with S body text. It’s intended for smaller descriptive text or less prominent sections.</p>

  <h4>Heading Level 4 - M Headline</h4>
  <p>This paragraph uses XS body text, suitable for captions or supplementary information. The typography maintains clarity even at smaller sizes.</p>

  <h4>Unordered List Example</h4>
  <ul>
    <li>First item in the list.</li>
    <li>Second item with additional description.</li>
    <li>Third item, demonstrating bullet point structure.</li>
  </ul>

  <h4>Ordered List Example</h4>
  <ol>
    <li>First item in the ordered list.</li>
    <li>Second item with sequence numbering.</li>
    <li>Third item, following numerical order.</li>
  </ol>
</div>

Headlines

Riverty’s headline styles use the GT Ultra Median – Light typeface. These styles are available in a range of sizes to create a clear visual hierarchy. The class names for each style are provided for easy application.

DesktopMobile
Visual Style Font Properties Class Name
XXL Headline 56px/1.2
XL Headline 46px/1.2
L Headline 36px/1.2
M Headline 28px/1.2
S Headline 22px/1.2
XS Headline 16px/1.2
Visual Style Font Properties Class Name
XXL Headline 42px/1.2
XL Headline 30px/1.2
L Headline 28px/1.2
M Headline 24px/1.2
S Headline 20px/1.2
XS Headline 16px/1.2

Body Text

The body text styles use the System UI typeface and are available in several sizes and variations (regular, semibold, and uppercase). These styles provide flexibility for paragraphs, captions, or emphasized text, with a focus on readability and hierarchy.

DesktopMobile
Visual Style Font Properties Class Name
L Body Regular – 22px/1.1
M Body Regular – 16px/1.5
M Semibold Semibold – 16px/1.5
M Uppercase Regular – 16px/1.1
S Body Regular – 14px/1.5
S Semibold Semibold – 14px/1.5
S Uppercase Regular – 14px/1.2
XS body Regular – 13px/1.2
XS Semibold Semibold – 13px/1.2
XS Uppercase Regular – 13px/1.2
Visual Style Font Properties Class Name
L Body Regular – 20px/1.2
M Body Regular – 16px/1.5
M Semibold Semibold – 16px/1.5
M Uppercase Regular – 16px/1.1
S Body Regular – 14px/1.5
S Semibold Semibold – 14px/1.5
S Uppercase Regular – 14px/1.2
XS body Regular – 13px/1.2
XS Semibold Semibold – 13px/1.2
XS Uppercase Regular – 13px/1.2

Link styles in the Riverty framework follow the same typography conventions as body text, using the System UI typeface. These styles support regular, semibold, and uppercase variations to differentiate between link hierarchies and emphasis.

DesktopMobile
Visual Style Font Properties Class Name
L Link Regular – 22px/1.1
M Link Regular – 16px/1.5
M Link Semibold Regular – 16px/1.5
M Uppercase Link Regular – 16px/1.1
S Link Regular – 14px/1.5
S Link Semibold Semibold – 14px/1.5
S Uppercase Link Regular – 14px/1.2
XS Link Regular – 13px/1.2
XS Link Semibold Semibold – 13px/1.2
XS Uppercase Link Regular – 13px/1.2
Visual Style Font Properties Class Name
L Link Regular – 20px/1.2
M Link Regular – 16px/1.5
M Link Semibold Regular – 16px/1.5
M Uppercase Link Regular – 16px/1.1
S Link Regular – 14px/1.5
S Link Semibold Semibold – 14px/1.5
S Uppercase Link Regular – 14px/1.2
XS Link Regular – 13px/1.2
XS Link Semibold Semibold – 13px/1.2
XS Uppercase Link Regular – 13px/1.2

Table

Styling a table is provided by applying r-table class name to a <table>. Resposive table support requires the <table> to be wrapped with container marked by the class r-table-container.

Apply zebra additional class name to display color scheme. Choose between even and odd colored rows by applying additional even or odd class name.

Adding sticky class name to the table makes first column of the table sticky on mobile devices (screen width is less then 720px).

Avoid using the sticky class in the presence of rowspan or colspan attributes.

Example Usage:

<div class="r-table-container">
  <table class="r-table sticky zebra odd">
    <thead>   
      <tr>
        <th>Factoid</th>
        <th>Description</th>
        <th>Source</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>Honey Never Spoils</td>
          <td>Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3000 years old and still perfectly edible.</td>
          <td>National Geographic</td>
      </tr>
      <tr>
          <td>The Eiffel Tower Grows Taller in Summer</td>
          <td>Due to the expansion of iron when it gets hot, the Eiffel Tower can grow by up to 6 inches (15 cm) during a hot summer day.</td>
          <td>Paris Tourist Office</td>
      </tr>
      <tr>
          <td>Octopuses Have Three Hearts</td>
          <td>Octopuses have two branchial hearts to pump blood through the gills and one systemic heart to pump oxygenated blood to the rest of their body.</td>
          <td>MarineBio</td>
      </tr>
    </tbody>  
  </table>
</div>

Conclusion

The Riverty CSS Framework provides a solid foundation for ensuring consistency and visual alignment with the brand’s identity. By using the appropriate class names for headlines, body text, and links, developers can easily maintain style uniformity across different content types and devices.