Typography

Frutjam provides a typographic system with high precision. We offer a standard scale from xs to 9xl, but the library also supports dynamic sizing, which lets you use utility classes to define any specific pixel value.

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

<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)

<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

<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)

<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.

<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 you are rendering Markdown or content from a CMS, you can't manually add classes like heading-lg or para-base to every tag.

Frutjam provides a bridge for the official @tailwindcss/typography plugin to ensure these "invisible" tags still look like Frutjam.

Setup

Ensure the plugin is active in your Tailwind v4 CSS:

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

Usage

Apply .prose to enable the plugin, and .prose-frutjam to inject the Frutjam design tokens.

<article class="prose prose-frutjam">
  <h1>This Title Inherits Frutjam Styles</h1>
  <p>Standard paragraphs now match your <code>para-base</code> aesthetics automatically.</p>
  
  <ul>
    <li>Links use Frutjam accent colors</li>
    <li>Blockquotes use Frutjam border colors</li>
  </ul>
</article>