Typography

Text styles for headings and body content.

Example

Class name

Heading 1

type-title-1

Heading 2

type-title-2

Heading 3

type-title-3

Heading 4

type-title-4

Heading 5

type-title-5

Paragraph

type-body

Paragraph Bold

type-body-strong

Small

type-small

Small Bold

type-small-strong

Tiny

type-tiny

Tiny Bold

type-tiny-strong

Overview

The Rogo typography system is built on three font families and a consistent type scale. All text styles are defined as Tailwind utility classes that combine font family, size, line height, and weight into semantic tokens. Use these tokens instead of manually combining font properties.

Font Families

Three font families serve distinct purposes in the design system.

CSS Variable	Tailwind Class	Font	Usage
`--font-body`	`font-body`	Inter	Default body font. Used for paragraphs, UI text, and all general content.
`--font-display`	`font-display`	Martina Plantijn	Serif display font. Used for large headings (title-1 through title-4) to add elegance.
`--font-mono`	`font-mono`	Roboto Mono	Monospace font. Used for code, data, and technical content. Always use in full uppercase.

Type Scale

Headings

Display headings use the serif font-display for a refined, editorial feel. Heading 5 uses the body font with medium weight for a more utilitarian style.

Tailwind Class	Font	Size	Line Height	Weight	Usage
`type-title-1`	Display	36px (4xl)	2.5rem	400	Page titles, hero headings. Use sparingly, once per page.
`type-title-2`	Display	30px (3xl)	2.25rem	400	Major section headings. Primary content divisions.
`type-title-3`	Display	24px (2xl)	1.75rem	400	Subsection headings. Secondary content groupings.
`type-title-4`	Display	20px (xl)	1.5rem	400	Card titles, dialog headers. Tertiary headings.
`type-title-5`	Body	18px (lg)	1.25rem	500	Small headings, list headers. Uses medium weight instead of display font.

Body Text

Body styles use the Inter font family for optimal readability. Each size has a regular and strong (medium weight) variant.

Tailwind Class	Size	Line Height	Weight	Usage
`type-body`	16px (base)	1.5rem	400	Default body text. Paragraphs, descriptions, primary content.
`type-body-strong`	16px (base)	1.5rem	500	Emphasized body text. Labels, important callouts, inline emphasis.
`type-small`	14px (sm)	1.25rem	400	Secondary text. Captions, helper text, metadata.
`type-small-strong`	14px (sm)	1.25rem	500	Emphasized small text. Button labels, table headers, tags.
`type-tiny`	12px (xs)	1rem	400	Tertiary text. Footnotes, timestamps, badges.
`type-tiny-strong`	12px (xs)	1rem	500	Emphasized tiny text. Status indicators, compact labels.

Text Colors

Typography should be paired with semantic text color tokens for proper hierarchy. See the Colors page for the full reference.

Tailwind Class	Usage
`text-primary`	Headings and emphasized content.
`text-secondary`	Body text and standard content.
`text-tertiary`	Captions, labels, and supporting text.
`text-quaternary`	Placeholders, disabled text, and subtle hints.

Usage Guidelines

Do

Use type-title-* classes for headings to maintain consistent hierarchy
Use type-body for paragraph content, type-small for secondary info
Pair typography tokens with semantic text colors (text-primary, text-secondary)
Use -strong variants for emphasis instead of arbitrary font weights
Use font-mono for code snippets, data tables, and technical identifiers—always in full uppercase
Maintain heading hierarchy: don't skip levels (e.g., title-1 → title-3)

Don't

Don't use raw font sizes like text-lg or text-sm for content typography
Don't mix arbitrary font weights with type tokens
Don't use display font (font-display) for body text or small sizes
Don't use font-mono in lowercase or mixed case—always use uppercase
Don't use type-title-1 more than once per page
Don't combine multiple type tokens on the same element
Don't use headings purely for visual size; use semantically appropriate levels

Combining with Font Family

For specialized use cases, you can combine base type tokens with font family utilities:

Combination	Usage
`font-mono type-body uppercase`	Monospace body text for code blocks.
`font-mono type-small uppercase`	Monospace small text for inline code.
`font-mono type-tiny uppercase`	Monospace tiny text for technical metadata.

Note: Always pair font-mono with uppercase for consistent styling.

Responsive Typography

The type scale is designed to work across screen sizes. For responsive adjustments, combine with Tailwind breakpoint prefixes:

Pattern	Usage
`type-title-2 md:type-title-1`	Larger heading on medium+ screens.
`type-small md:type-body`	Larger body text on medium+ screens.

PreviousColors

NextIcons