Typography

A flexible text rendering component supporting custom, body, and heading modes.

Overview

The Typography component operates in three modes controlled by the type prop. custom accepts arbitrary numeric font sizes, body is semantic body text with named size steps, and heading is semantic headings with responsive size steps. All modes support weight, lineHeight, and render props.

Use heading type for page and section titles — x-large and large automatically scale up at the tablet breakpoint for responsive design.
Use body for all standard prose and UI text.
Use custom when a design specification requires a specific numeric size not available in the named scales.

Accessibility

heading type renders as <h2> by default. Use the render prop to set the correct heading level for your document outline (e.g., render=<h1 />).
body and custom types render as <p> by default. Change the element with render when wrapping inline content (e.g., render=<span />).
Maintain a logical heading hierarchy (h1 → h2 → h3) regardless of visual size. A smaller heading can still be a higher level.

Import

import { Typography } from "@cocso-ui/react";

Heading

Heading mode renders an h2 element by default. The x-large and large sizes are responsive, increasing in size at the tablet breakpoint.

X-Large Heading

Large Heading

Medium Heading

Small Heading

X-Small Heading

import { Typography } from "@cocso-ui/react";

export default function TypographyHeading() {
  return (
    <div className="flex flex-col gap-3 p-4">
      <Typography type="heading" size="x-large">X-Large Heading</Typography>
      <Typography type="heading" size="large">Large Heading</Typography>
      <Typography type="heading" size="medium">Medium Heading</Typography>
      <Typography type="heading" size="small">Small Heading</Typography>
      <Typography type="heading" size="x-small">X-Small Heading</Typography>
    </div>
  );
}

Body

Body mode is the default. It renders a p element for all standard prose and UI text.

Large body text for prominent content.

Medium body text for standard content.

Small body text for secondary content.

X-Small body text for captions.

import { Typography } from "@cocso-ui/react";

export default function TypographyBody() {
  return (
    <div className="flex flex-col gap-3 p-4">
      <Typography type="body" size="large">Large body text for prominent content.</Typography>
      <Typography type="body" size="medium">Medium body text for standard content.</Typography>
      <Typography type="body" size="small">Small body text for secondary content.</Typography>
      <Typography type="body" size="x-small">X-Small body text for captions.</Typography>
    </div>
  );
}

Custom

Custom mode accepts an arbitrary numeric font size from the design token scale, or a responsive object with base, tablet, and desktop keys.

Custom size 24, bold

Custom size 16, medium

Custom size 12, relaxed line height

import { Typography } from "@cocso-ui/react";

export default function TypographyCustom() {
  return (
    <div className="flex flex-col gap-3 p-4">
      <Typography type="custom" size={24} weight="bold">Custom size 24, bold</Typography>
      <Typography type="custom" size={16} weight="medium">Custom size 16, medium</Typography>
      <Typography type="custom" size={12} weight="normal" lineHeight="relaxed">Custom size 12, relaxed line height</Typography>
    </div>
  );
}

Responsive

Heading sizes x-large and large automatically increase at the tablet breakpoint. In custom mode, pass a responsive object or array to control the size independently at each breakpoint.

Name	Token	Value
`heading x-large`	`base → tablet`	`28px → 36px`
`heading large`	`base → tablet`	`24px → 32px`
`heading medium`	`base`	`20px`
`heading small`	`base`	`16px`
`heading x-small`	`base`	`14px`
`body large`	`base`	`18px`
`body medium`	`base`	`16px`
`body small`	`base`	`14px`
`body x-small`	`base`	`12px`

API Reference

Prop	Type	Default	Description
`type`	`"custom" \| "body" \| "heading"`	`"body"`	Selects the rendering mode and available size steps. `heading` renders responsive headings, `body` renders paragraph text, and `custom` accepts arbitrary numeric sizes.
`size (custom)`	`ResponsiveFontSize`	`16`	A numeric font size from the design token scale (e.g., 12, 16, 24), or a responsive object/array with `base`, `tablet`, `desktop` keys for different breakpoints.
`size (body)`	`"large" \| "medium" \| "small" \| "x-small"`	`"medium"`	Named body size step: `large` (18px), `medium` (16px), `small` (14px), `x-small` (12px).
`size (heading)`	`"x-large" \| "large" \| "medium" \| "small" \| "x-small"`	`"medium"`	Named heading size step. `x-large` and `large` are responsive, increasing at the tablet breakpoint. `medium` (20px), `small` (16px), `x-small` (14px) are fixed.
`weight`	`FontWeight`	`"normal" (custom/body), "bold" (heading)`	Font weight. Defaults to `"bold"` for headings and `"normal"` for body/custom text.
`lineHeight`	`LineHeight`	`"normal"`	Sets the line height.
`render`	`RenderProp`	-	Replaces the default HTML element. Heading defaults to `<h2>`, body/custom to `<p>`. Use this to set the correct semantic level.
`color`	`string`	-	Sets the text color directly. Accepts any CSS color value or design token reference.