Typography

The text primitive that renders body copy at the design system's font sizes, weights, and line heights.

Installation

npm install @sipe-team/typography

import '@sipe-team/typography/styles.css';

Usage

Renders a paragraph at the default scale (size={14}, weight="regular", lineHeight="regular").

The quick brown fox jumps over the lazy dog.

Examples

Size

size maps to the token scale in pixels — from 12 for fine print up to 48 for display text. Pick the step that matches the role of the text, not an arbitrary pixel value.

Caption · 12

Body · 16

Heading · 24

Display · 48

Weight

weight selects the font weight by name. Reach for medium or heavier to signal emphasis or hierarchy; keep long-form reading text at regular.

Regular · 400

Medium · 500

SemiBold · 600

Bold · 700

Line height

lineHeight trades vertical density for readability. Use regular (1.5) for paragraphs a reader scans line by line, and compact (1.3) for tight, single-purpose labels or headings.

Regular line height gives paragraphs room to breathe across multiple lines.

Compact line height pulls the lines together for dense, glanceable text.

Color

color takes any CSS color string and is applied to the text. Left unset, the text inherits its color from the surrounding context.

A blue line of text

A tomato line of text

asChild

Merge the typography styles onto a different element instead of the default p — useful for a heading tag or a link that should carry the same scale. size and weight are visual only: a large <p> is not a heading, so reach for asChild with a real <h1>–<h6> when the text is structural, or screen readers and the document outline won't see it.

A styled heading element

Anatomy

import { Typography } from '@sipe-team/typography';

export default () => (
  <Typography size={16} weight="medium" lineHeight="regular">
    Label
  </Typography>
);

Renders a single <p> by default. With asChild, the styles and props are merged onto the child element you provide instead.

API Reference

Renders a <p> and forwards its ref.

Prop	Type	Default	Description
children	ReactNode	—	The text content.
size	12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 48	14	Font size in pixels, from the token scale.
weight	'regular' | 'medium' | 'semiBold' | 'bold'	'regular'	Font weight (400 / 500 / 600 / 700).
lineHeight	'regular' | 'compact'	'regular'	Line height — regular is 1.5, compact is 1.3.
color	string	—	Any CSS color. Unset, the text inherits its color.
asChild	boolean	false	Merge props onto the child instead of rendering a p.

Also accepts every ComponentProps<'p'> except color (which is overridden above), forwarded to the rendered element.