Typography

Use pre-composed text styles. Let fluid type handle responsiveness. Pair semantic colours with semantic HTML.

Roadie has two font families: Intermission, a sans-serif set with font-sans, and IBM Plex Mono, a monospace set with font-mono.

Type scale

Sizes from text-lg up use clamp() to scale fluidly between viewport widths, so they need no breakpoint overrides. On the docs site, each step is set in its own size, with its size in pixels or its fluid range.

1. xs

   The quick brown fox

   12px
2. sm

   The quick brown fox

   14px
3. base

   The quick brown fox

   16px
4. lg

   The quick brown fox

   18 to 20px
5. xl

   The quick brown fox

   20 to 24px
6. 2xl

   The quick brown fox

   24 to 32px
7. 3xl

   The quick brown fox

   28 to 40px
8. 4xl

   The quick brown fox

   32 to 48px
9. 5xl

   The quick brown fox

   36 to 64px
10. 6xl

    The quick brown fox

    40 to 76px
11. 7xl

    The quick brown fox

    44 to 96px

Text style utilities

Pre-composed utilities combine font size, weight, line height, and letter spacing. They come in two contexts: UI for app interfaces, and prose for long-form content.

Display styles

UI display styles are compact headings for dashboards, settings, and navigation, with tighter line height and tracking. Prose display styles are larger, heavier headings for articles, marketing pages, and rich content, designed for reading. On the docs site, each style is set in its own style, UI first, then prose.

Body text styles

body already sets text-ui, so standard UI text needs no class. Each style takes the line height and letter spacing of its context.

{/* text-ui */}
<p className='text-ui'>App interface text with a tighter line height.</p>
{/* text-prose */}
<p className='text-prose'>
  Long-form content with a more generous line height, better for extended
  reading such as articles and documentation.

Line height and tracking

Semantic tokens keep rhythm consistent. Text style utilities set them by themselves, so use the tokens on their own only for custom compositions. On the docs site, each context is listed with its line height and letter spacing.

Semantic text colours

Use semantic colour utilities instead of raw colour values. They adapt to intents, themes, and dark mode by themselves.

<p className='text-strong'>text-strong for headings, emphasis, and high contrast</p>
<p className='text-normal'>text-normal for body text, inherited from the body reset</p>
<p className='text-subtle'>text-subtle for secondary text and descriptions</p>
<p className='text-subtler'>text-subtler for meta text, timestamps, and hints</p>

Usage

Headings

Roadie has no Text or Heading component. Use raw heading elements with a display style utility and text-strong. Match the semantic level, h1 to h6, to the document structure, and the visual style to the context.

<h1 className='text-display-ui-1 text-strong'>Page title</h1>
<h2 className='text-display-ui-3 text-strong'>Section</h2>
<h3 className='text-display-ui-5 text-strong'>Subsection</h3>

Body text

Body inherits text-ui from the reset. Use <p> elements with semantic colour classes.

<p>Default body text. No class needed.</p>
<p className='text-subtle'>Secondary text</p>
<p className='text-ui-meta text-subtler'>Meta or hint text</p>
<p className='text-strong'>Emphasised text</p>

Prose content

Wrap CMS output, markdown, or user-generated content in <Prose> for automatic typography and spacing. See Prose styles.

<Prose>
  <h2>Article heading</h2>
  <p>
    Body paragraph with <strong>bold</strong> and <a href='#'>links</a>.
    The Prose component handles spacing, list styles, and element
    typography.

Numerals

Intermission has two sets of figures. Proportional is the default, and each digit takes the width its shape wants. Tabular gives every digit the same width, so values line up in a column.

table column   tabular-nums
axis ticks     tabular-nums
ticking clock  tabular-nums
hero figure    proportional

hero figure    tabular-nums

A ticking countdown is the exception that proves the rule. Its digits don't align with anything, but they change while somebody is watching, so tabular figures stop the row shifting on every tick.

Guidelines

<h2 className='text-display-ui-3 text-strong'>Section title</h2>
<p>Body text inherits defaults</p>
<p className='text-ui-meta text-subtle'>Secondary text</p>

<h2 className='text-2xl font-bold'>Section title</h2>
<p>Body text</p>
<p className='text-sm text-subtle'>Secondary text</p>

<p className='text-strong'>Strong text</p>
<p className='text-normal'>Default text</p>
<p className='text-subtle'>Subtle text</p>
<p className='text-subtler'>Subtler text</p>

<p className='font-bold text-[#111827]'>Strong text</p>
<p className='text-[#374151]'>Default text</p>
<p className='text-[#6b7280]'>Subtle text</p>
<p className='text-[#9ca3af]'>Subtler text</p>

<h3 className='text-display-ui-4 text-strong'>Recent orders</h3>
<p className='text-sm text-subtle'>3 orders in the last 24 hours</p>

<h3 className='text-display-prose-4 text-strong'>Recent orders</h3>
<p className='text-sm text-subtle'>3 orders in the last 24 hours</p>

<h2 className='text-display-ui-3 text-strong'>
  Section title
</h2>
<p className='text-subtle'>
  Description text
</p>

<div className='text-display-ui-3 text-strong'>
  Section title
</div>
<div className='text-subtle'>
  Description text
</div>

{/* Automatically fluid */}
<h1 className='text-display-ui-1 text-strong'>
  Dashboard
</h1>

{/* Fighting the fluid scale */}
<h1 className='text-xl md:text-2xl lg:text-4xl'>
  Dashboard
</h1>

<h1 className='text-display-ui-1 ...'>Page</h1>
<h2 className='text-display-ui-3 ...'>Section</h2>
<h3 className='text-display-ui-5 ...'>Sub</h3>

<h1 className='text-display-ui-1 ...'>Page</h1>
{/* Skipped h2 */}
<h4 className='text-display-ui-5 ...'>Sub</h4>

<Prose>
  <h2>Title</h2>
  <p>Paragraph with <a href='#'>link</a></p>
  <ul><li>Item</li></ul>
</Prose>

<div>
  <h2 className='text-2xl mb-4'>Title</h2>
  <p className='mb-2 leading-6'>Text</p>
  <ul className='list-disc pl-4'>...</ul>
</div>

Semantic elements