---
title: "Typography"
type: guide
version: "2.1.2"
doc_version: "2.1.4"
status: stable
date: 2026-04-21
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Explore Frutjam's typography system. A consistent type scale built on semantic HTML and CSS variables for readable, accessible text across all themes."
url: https://frutjam.com/docs/typography
---

# Typography

## Layout

`.wrapper` is a responsive page layout utility that centers content horizontally and applies consistent horizontal padding across breakpoints. Use size variants to set a max-width constraint for different layout needs.

### All Classes

All variants share the same responsive padding scale. Only the max-width differs.

| Class          | Max Width | Use Case                           |
| -------------- | --------- | ---------------------------------- |
| `wrapper`      | none      | Full-width centered container      |
| `wrapper-xs`   | 320px     | Narrow dialogs or sidebars         |
| `wrapper-sm`   | 640px     | Single-column content              |
| `wrapper-md`   | 768px     | Articles and blog posts            |
| `wrapper-lg`   | 1024px    | Standard page layouts              |
| `wrapper-xl`   | 1280px    | Wide layouts                       |
| `wrapper-2xl`  | 1536px    | Extra-wide layouts                 |
| `wrapper-full` | 100%      | Full-bleed with consistent padding |

### Responsive Padding

All wrapper variants automatically scale horizontal padding across breakpoints — no extra utility classes needed.

```css
/* Applied to every wrapper variant */
default  → padding-inline: 1rem   (16px)
sm       → padding-inline: 2rem   (32px)
lg       → padding-inline: 4rem   (64px)
```


### Page Layout Example

Use `.wrapper-xl` on your main content area for a standard page layout.

```html
<header class="bg-base-200">
  <div class="wrapper-xl">
    <nav class="navbar">...</nav>
  </div>
</header>

<main class="wrapper-xl py-12">
  <h1 class="heading-4xl">Page Title</h1>
  <p class="para-base">Page content goes here.</p>
</main>

<footer class="bg-base-200">
  <div class="wrapper-xl">...</div>
</footer>
```


### Article Layout Example

Use `.wrapper-md` for readable article or blog post layouts.

```html
<article class="wrapper-md py-10 prose prose-frutjam">
  <h1>Article Title</h1>
  <p>Long-form content benefits from a narrower max-width for optimal line length.</p>
</article>
```


## Typography

### 1. Element Utilities

These classes are designed for direct use on HTML elements. Headings are optimized for weight and impact, while Paragraphs are optimized for readability.

### Headings

Use `.heading-{size}` for titles and high-importance text.

#### The Standard Scale

`heading-xs`, `heading-sm`, `heading-md`, `heading-base`, `heading-lg`, `heading-xl`, `heading-2xl`, `heading-3xl`, `heading-4xl`, `heading-5xl`, `heading-6xl`, `heading-7xl`, `heading-8xl`, `heading-9xl`

```html
<h1 class="heading-4xl">Gigantic Hero</h1>
<h2 class="heading-3xl">Section Title</h2>
<h3 class="heading-base">Small Subheading</h3>
```


#### Dynamic Precision (Any Number)

Frutjam allows you to break away from the scale. Use any numeric value to set a specific pixel size

`.heading-{number}` (e.g., `.heading-46`)

```html
<h2 class="heading-46">Bespoke Heading</h2>
```


### Paragraphs

Use `.para-{size}` for body text, descriptions, and UI labels

#### The Standard Scale

`para-xs`, `para-sm`, `para-md`, `para-base`, `para-lg`, `para-xl`, `para-2xl`, `para-3xl`, `para-4xl`, `para-5xl`, `para-6xl`, `para-7xl`, `para-8xl`, `para-9xl`

```html
<p class="para-lg">This is a lead paragraph with extra breathing room.</p>
<p class="para-base">This is your standard UI text size.</p>
<p class="para-xs">Small footer or caption text.</p>
```


#### Dynamic Precision (Any Number)

Don't get stuck in a scale. Use any numeric value to dial in the exact pixel size your design demands.

`.para-{number}` (e.g., `.para-28`)

```html
<p class="para-28">Editorial-style body text.</p>
```


### Responsive Typography

Frutjam does not force "automatic" resizing. Instead, it gives you full control using Tailwind's mobile-first breakpoints. This ensures your design never "guesses" what your mobile layout should look like.

#### The Responsive Pattern

Always define your mobile size first (the base class), then use prefixes like `md:` or `lg:` to scale up for larger screens.

```html
<h1 class="heading-2xl md:heading-5xl lg:heading-9xl">
  Responsive Headline
</h1>

<p class="para-sm md:para-base lg:para-lg">
  Body text that stays comfortable on all devices.
</p>
```


### 2. Rich Text (Prose)

When rendering Markdown or CMS content, you can't manually add classes like `heading-lg` to every tag. `prose-frutjam` is a wrapper that bridges the official `@tailwindcss/typography` plugin with Frutjam's design tokens — so unstyled HTML tags automatically inherit your theme's colors and typography.

#### Setup

Ensure both plugins are active in your Tailwind v4 CSS:

```css
@import "tailwindcss";
@plugin "frutjam";
@plugin "@tailwindcss/typography";
```


#### Usage

Add both `.prose` and `.prose-frutjam` to the wrapper element. `.prose` activates the typography plugin; `.prose-frutjam` maps Frutjam's theme tokens onto it.

```html
<article class="prose prose-frutjam max-w-none">
  <h1>Article Title</h1>
  <p>Body text, links, and lists all inherit Frutjam theme colors automatically.</p>
  <ul>
    <li>Links use your primary color</li>
    <li>Blockquote borders use your primary color</li>
    <li>Headings, body, and captions use semantic on-base colors</li>
  </ul>
</article>
```


#### What Gets Mapped

The wrapper overrides the following prose CSS variables with Frutjam tokens:

```css
/* prose-frutjam maps these automatically */
body text      → --color-body
headings       → --color-on-base
links          → --color-primary
blockquotes    → --color-on-base  (text), --color-primary (border)
bullets        → --color-neutral
code           → --color-on-base
captions       → --color-on-neutral
```


#### Dark Mode

Add `.prose-invert` alongside `.prose-frutjam` for dark backgrounds — invert tokens are also mapped to Frutjam colors.

```html
<article class="prose prose-frutjam prose-invert bg-neutral p-6 rounded-lg">
  <h2>Dark Background Content</h2>
  <p>Inverted tokens keep text legible on dark surfaces.</p>
</article>
```