Specimen
A live type tester — set text, size, weight, tracking and serif voice while the specimen redraws.
Live — this one is real
font: 800 84px/0.95 Archivo Variable; · letter-spacing: -2px; · stretch: 100%
Usage
import { Specimen } from "mizu-ui";
export function Tester() {
return <Specimen />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect type/Specimen.tsx
Source is included in the npm package under src/type/Specimen.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text / onTextChange | string / fn | "Mizu" | Specimen text, up to 14 characters. |
| size / onSizeChange | number / fn | 84 | Font size in px (24–140). |
| weight / onWeightChange | number / fn | 800 | Archivo weight (100–900, step 25). Disabled in serif mode. |
| tracking / onTrackingChange | number / fn | -2 | Letter spacing in px (-8–24). |
| serif / onSerifChange | boolean / fn | false | Switch to Instrument Serif italic. |
Accessibility
All controls are labelled native inputs. The specimen stage is presentational.
Motion
Size and tracking transition over 150ms as you drag the sliders.