Type Specimen

A single typography row displaying sample text at a given font-size token with weight and size metadata.

Preview

xs12px

Caption / helper text

sm14px

Small body text

md16px

Base body text

lg18px

Large body text

xl20px

Subsection heading

2xl24px

Section heading

3xl30px

Page title

Installation

npx visor add type-specimen

This copies two files into your project:

components/ui/type-specimen/type-specimen.tsx — the component
components/ui/type-specimen/type-specimen.module.css — the styles

Usage

import { TypeSpecimen } from '@/components/ui/type-specimen/type-specimen';

<TypeSpecimen
  token="--font-size-xl"
  label="xl"
  sizePx={20}
  sampleText="Subsection heading"
/>

API Reference

TypeSpecimenProps

Prop	Type	Default	Description
`token`*	`string`	—	CSS custom property for font size (e.g. "--font-size-xl").
`label`*	`string`	—	Label for this type step (e.g. "xl", "base").
`sizePx`*	`number`	—	Font size in pixels for fallback display.
`sampleText`*	`string`	—	Sample text to render at this size.
`className`	`string`	—	Additional CSS class names to merge onto the element.

Accessibility

TypeSpecimen is a documentation utility. Each row pairs the visual sample text with its label and pixel size in text form, so the type scale is readable without relying on visual font size alone.