Typography Kit

Small helpers for readable type styles and CSS output.

fontstudio.dev

The gap between a font choice and a finished interface is a handful of decisions: size, weight, leading, tracking, and a comfortable measure. typographykit keeps those decisions explicit and serialises them to a CSS declaration block.

This is a small dependency-free set of helpers. It is DOM-free, so the same style description can power a preview, a renderer, or a build step.

Usage

import { createTypeStyle, styleToCss, tracking } from "typographykit";

const display = createTypeStyle({
  size: "clamp(3rem, 8vw, 8rem)",
  weight: 650,
  tracking: -24,
});

styleToCss(display);
// font-size: clamp(3rem, 8vw, 8rem); font-weight: 650;
// line-height: 1.4; letter-spacing: -0.024em;

tracking(-24); // "-0.024em"

API

| Export | Purpose | | --- | --- | | createTypeStyle(options) | Completes a type style with weight, leading, and tracking defaults. | | styleToCss(style) | Serialises a TypeStyle as a CSS declaration block. | | tracking(value) | Converts thousandths of an em into a CSS em value. | | readableMeasure(min, max) | Returns a bounded ch measure for long-form text. | | TypeStyleOptions | { size, weight?, lineHeight?, tracking?, family? }. |

Development

npm run build --workspace=typographykit

MIT.