🙌 Clampography

Clampography is a pure CSS typography system that uses the clamp() function for fluid, responsive text scaling. It's designed as an alternative to @tailwindcss/typography, but works with or without Tailwind CSS. With 94% global browser support, it works on nearly all modern devices.

• No default styling: No colors, borders, transforms, or decorations.
• Structure only: Manages size, spacing, weight, and font-family.
• Smart scaling: Contextual elements use em (relative), blocks use clamp() (fluid).

The purpose

CSS resets like Tailwind's Preflight remove all browser typography defaults, leaving you with unstyled text. Clampography delivers production-ready text scaling that responds to viewport changes automatically, while leaving all aesthetic choices to you.

Visit the temporary demo page to see how it looks.

Requirements

Use Vite, Webpack, or similar build tool for CSS bundling. Popular frameworks like Astro, Next.js, Remix, and SvelteKit include CSS bundling by default and work seamlessly with Clampography. Without a build tool, native CSS @import combined with @layer has about 91% browser coverage and only works in browsers released since early 2022.

Installation

# Install with NPM
npm install clampography

# Install with PNPM
pnpm add clampography

# Install with Bun
bun install clampography

# Install with Deno
deno install npm:clampography

Usage

/* First import Tailwind CSS */
@import "tailwindcss";

/* Then import Clampography */
@import "clampography";

/* Then you can override Clampography's base styles */
@layer base {
  h1 {
    font-size: clamp(2.35rem, 1.95rem + 1.5vw, 4rem);
    font-weight: 400;
    line-height: 1.15;
  }
}