@bastianplsfix/typography

A semantic Text React component and a Tailwind CSS v4 type system: rem-based modular scale with per-size line-height and letter-spacing, fluid display sizes, vertical rhythm on the spacing grid, wrapping utilities, line clamping with an overflow-aware tooltip, cap-height trimming, and OpenType features.

Install

npm install @bastianplsfix/typography

react and react-dom (18 or 19) are peer dependencies.

Setup

In your app CSS, import the type system after Tailwind and register the component for class extraction (Tailwind doesn't scan node_modules):

@import "tailwindcss";
@import "@bastianplsfix/typography/theme.css";
@source "../node_modules/@bastianplsfix/typography/dist";

theme.css is font-agnostic. If your app uses Inter as a variable font, also add the Inter-tuned defaults (fallback metrics, stylistic sets, dark-mode weight de-bloom — see the file header for what it assumes):

@import "@bastianplsfix/typography/inter.css";

Use

import { Text } from "@bastianplsfix/typography";

<Text variant="heading-1">Page title</Text>
<Text variant="body">Body copy at the reading size, pretty-wrapped.</Text>
<Text maxLines={3}>Long content clamps and reveals a tooltip on overflow…</Text>
<Text size="sm" transform="uppercase">An eyebrow with caps tracking</Text>

Semantic variants (heading-1…3, body, body-small, description, caption, label) preset the element, size, weight, and wrap; any individual prop overrides its axis. See TextProps for the full API: OpenType features, justify (logical, RTL-safe), hasTabularNumbers, trim, underline, semantic elements via as (em, strong, s, del, sup/sub with the font's real figures, headings), and more.

Tests

npm test runs a Vitest browser-mode suite (real Chromium) covering the type scale, tracking, clamping, hyphenation, sup/sub resets, feature-case composition, stack rhythm and specificity guarantees, and the truncation tooltip. Set CHROMIUM_PATH to use a pre-provisioned browser instead of npx playwright install.

The component ships with "use client" — it works in React Server Component apps out of the box.