SoftType
A variable-font engine in CSS — weight and width oscillate through the Archivo axes.
Live — this one is real
Usage
import { SoftType } from "mizu-ui";
export function Engine() {
return <SoftType text="Aa" mode="both" speed={1} />;
}
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/SoftType.tsx
Source is included in the npm package under src/type/SoftType.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Aa" | The specimen glyphs. |
| mode | "weight" | "width" | "both" | "weight" | Which axes oscillate. |
| speed | number | 1 | Oscillation rate multiplier. |
| min / max | number | 100 / 900 | Weight range. |
Accessibility
The type specimen carries role=img and a descriptive label.
Motion
CSS keyframes interpolate font-variation-settings. Reduced motion holds the actual font axes still.