Typography

Overview #

Use the typography utilities to set the appearance and alignment of text.

Examples #

Choose an example
Set font sizeSet font weightSet font familySet title line heightSet text alignmentUppercase textPrevent text from breakingAdd automatic styling to running text section

<p class="rvt-ts-xxs">Lorem ipsum dolor sit</p>
<p class="rvt-ts-xs">Lorem ipsum dolor sit</p>
<p class="rvt-ts-sm">Lorem ipsum dolor sit</p>
<p class="rvt-ts-md">Lorem ipsum dolor sit</p>
<p class="rvt-ts-lg">Lorem ipsum dolor sit</p>
<p class="rvt-ts-xl">Lorem ipsum dolor sit</p>
<p class="rvt-ts-xxl">Lorem ipsum dolor sit</p>

<p><strong class="rvt-text-regular">Regular text utility</strong></p>
<p><strong class="rvt-text-medium">Medium text utility (Benton Sans only)</strong></p>
<p class="rvt-text-bold">Bold text utility</p>

<p class="rvt-font-serif">This is some serif text.</p>
<p class="rvt-font-sans">This is some sans serif text. Text in Rivet is sans serif by default.</p>
<p class="rvt-font-mono">This is some monospace text.</p>

<h3 class="rvt-ts-xl rvt-lh-title">This large text could sometimes end up in a space that causes it to run on to multiple lines.</h3>

<p class="rvt-text-left">Left-aligned text utility</p>
<p class="rvt-text-center">Center-aligned text utility</p>
<p class="rvt-text-right">Right-aligned text utility</p>

<p class="rvt-text-uppercase">Uppercase text utility</p>

<form>
  <fieldset class="rvt-fieldset">
    <legend class="rvt-sr-only">Checkbox list</legend>
    <ul class="rvt-list-reset">
      <li class="rvt-checkbox rvt-m-bottom-sm">
        <input type="checkbox" name="checkbox-demo" id="checkbox-1">
        <label for="checkbox-1" class="rvt-m-right-sm rvt-text-nobr">The label for this checkbox is quite long, but will not break onto a new line</label>
      </li>
      <li class="rvt-checkbox">
        <input type="checkbox" name="checkbox-demo" id="checkbox-2">
        <label for="checkbox-2">Option two</label>
      </li>
    </ul>
  </fieldset>
</form>

<div class="rvt-prose">
  <h1>Picture yourself at IU Bloomington</h1>
  <p>It’s easy to fall in love with IU Bloomington’s beautiful campus, with iconic places like the picturesque Arboretum, the grand Musical Arts Center (“the MAC”), and the Indiana Memorial Union (IMU), one of the country’s largest student unions, with four floors of late-night dining options, study rooms, a bowling alley, a movie theater, and more.</p>
  <h2>Keep learning during challenging times</h2>
  <p>Head to our <a href="#0">Keep Learning site</a> to find technology resources, self care support, and opportunities to stay connected to the IU community during COVID-19, whether you’re on campus or learning remotely.</p>
  <h3>A lively campus residential life</h3>
  <p>About a third of undergraduates live on campus (including all first-year students), and IU Bloomington offers a range of different campus housing options, from traditional dorms to apartment-style housing.</p>
  <p>You can even choose to live in one of 22 unique Learning Communities with people who share your academic interests or passions.</p>
</div>

Usage #

Type scale classes should only be applied to typographic elements such as headings, paragraphs, and list items containing text. Rivet uses rem to express font sizes, so adding type scale classes to block-level container elements may cause unexpected results.

Try to keep the number of different font sizes you use in your application to a minimum. The size of fonts depends on the design of you application, but picking a handful of font sizes and sticking to them makes it easier to maintain consistency throughout the interface.

Font size #

Rivet uses a Major Second type scale that has been rounded to the nearest whole pixel value. Using sizes from this scale will help create a hierarchy and consistency throughout your application.

Responsive type scale #

Each type scale helper class comes with a set of modifiers that allow you to adjust font-size at different screen sizes. Here’s an example.

<h1 class="rvt-ts-20 rvt-ts-32-md-up">Profile page</h1>
<p class="rvt-ts-14">The profile page is where you can select your personal settings.</p>

Given the markup above, the h1 would have a font size of 1.25rem/20px on all screens small and larger, and 2.25rem/36px on medium screens(740px wide) and larger.

The responsive type scale CSS classes use the following conventions:

• *-sm-up - screens 480–740px and wider
• *-md-up - screens 740–1080px and wider
• *-lg-up - screens 1080–1260px and wider
• *-xl-up - screens 1260–1400px and wider
• *-xxl-up - screens 1400px and wider

Font weight #

You can use the Rivet text utilities to change the font-weight property of text. The available utility classes are:

Font family #

You can use the Rivet text utilities to change the font-family property of text. The available utility classes are:

Line height #

In Rivet the line-height of the <body> element is set to 1.5 globally for better legibility. This can sometimes make larger text (like headings or titles) appear as if the line-height is too tall. For that reason, we created a text utility called .rvt-lh-title that you can use to give larger text a smaller line-height.

Text alignment #

Use the text alignment utilities to change the text-align property of any text. The available text alignment utilities are:

• .rvt-text-left
• .rvt-text-center
• .rvt-text-right

Uppercase #

The .rvt-text-uppercase utility class sets the text-transform CSS property to uppercase and adds a small amount of letter-spacing to improve readability.

No break #

If you need to stop text from wrapping, for example next to radio buttons or checkboxes, you can use the .rvt-text-nobr utility.

Automatic styling of running text #

Add the .rvt-prose class to an element to apply styles to all headers and paragraphs within that element.

This can be helpful for pages that have long sections of running text where it would be cumbersome to apply typography classes to each heading and paragraph individually.